使用した経緯、感想など

キャッシュまわりは今までhtaccessやサーバー設定側に任せっきりにしていたのですが、ここのところページの表示などが重くなっておりました。それが良くなかったのかサイトヘルスにも響くようになっていましたので、「サーバーのレスポンスが遅くなっています」といったエラーメッセージも出るように。

そこで今更なのではありますが、とりあえずキャッシュプラグインとして最も手っ取り早いものの1つとされている「WP Fastest Cache」を入れてみました。

• WP Fastest Cache – WordPress プラグイン | WordPress.org 日本語
• WP Fastest Cache Premium | The Fastest WordPress Cache Plugin

ただし、キャッシュ系プラグインはページの描画で不具合の出やすいものの代表格でもありますので（それだけに忌避していたのですが）、できるだけ不具合のないように模索しながら設定をしていこうと思っております。

エラーメッセージは無事に出なくなった

とりあえず「WP Fastest Cache」の導入が終わったら、上記のような「サーバーのレスポンスはまだ遅いです」などのエラーメッセージは出なくなりました。ひとまず一段落といったところでしょうか。ページの描画も心なしか早くなったような気がします。

WordPressに限った話ではないですが、ページの表示速度は避けては通れません。これからもできる範囲で改善を続けていきたいと思います。

プラグインについて簡単に説明してみる

概要

「WP Fastest Cache」は、WordPressサイトの速度を向上させるためのキャッシュプラグインです。シンプルな設定画面で初心者でも扱いやすく、ページキャッシュの生成、圧縮、ブラウザキャッシュ、Lazy Load（画像遅延読み込み）など、サイトの高速化に必要な機能を幅広く備えています。

プラグインの特徴

• 簡単な設定画面：初心者でも数クリックで最適化可能ページ
• キャッシュ生成：静的HTMLを作成し、サイトを高速化
• HTML/CSS/JS圧縮：不要なスペースを削除し、ファイルサイズを軽量化
• Gzip圧縮：ページデータを圧縮し、転送速度を向上
• ブラウザキャッシュ：訪問者のブラウザにキャッシュを保存し、リピート訪問時の速度を改善
• CDN対応：Cloudflareやその他のCDNと連携可能
• モバイルキャッシュ管理：スマホ向けのキャッシュ設定が可能
• キャッシュ自動削除：記事の更新時に自動的にキャッシュをクリア画像の
• 遅延読み込み（Lazy Load）：画像をスクロール時に読み込むことでページ表示を高速化

「WP Fastest Cache」使用上の注意点

キャッシュの影響で変更が反映されないことがある

• サイトを更新しても古いキャッシュが表示されることがある
• キャッシュを削除（クリア）すると即座に反映される

他のキャッシュ系プラグインとの競合

• W3 Total Cache、LiteSpeed Cache などと併用すると不具合が起こる可能性がある
• キャッシュプラグインは1つだけ使用するのが推奨

JavaScript圧縮が一部の機能を壊すことがある

• JavaScriptの圧縮（Minify）を有効にすると、一部のテーマやプラグインが正常に動作しなくなる場合がある
• トラブルが発生した場合は JS圧縮を無効化 してみる

画像最適化はPro版のみ

• WebP変換や画像圧縮は無料版では利用できない
• 画像最適化が必要なら「EWWW Image Optimizer」や「Smush」等との併用を考えるのも手

【メモ】競合プラグインについて

1. WP Rocket
   • 高性能キャッシュ＋データベース最適化＋画像遅延読み込み
   • 有料のみ、機能は最も充実
2. W3 Total Cache
   • 高度なキャッシュ設定が可能（オブジェクトキャッシュ、DBキャッシュ）
   • 設定が難しく、初心者向けではない
3. LiteSpeed Cache
   • サーバー組み込み型キャッシュ、ECサイト向け最適化
   • LiteSpeedサーバー向けで、専用環境で最も効果が高い
4. Autoptimize
   • CSS・JS最適化に特化
   • キャッシュよりも圧縮や最適化重視
5. WP Super Cache
   • シンプルなキャッシュプラグイン
   • WP Fastest Cacheよりも設定が少ない

プラグイン開発者がWordPressテーマ「SWELL」と同じ方であることでも知られており、完全日本語化のため扱いやすいこともポイントです。

以下では、「特徴」「主な機能」「使い方の流れ」「補足設定」という4つの観点で詳しく説明します。

プラグインの特徴

軽量で高速

• 外部スクリプトをほとんど読み込まないため、ページ表示速度への影響が非常に少ないです。
• 高機能SEOプラグインにありがちなデータベース負荷も抑えられています。

シンプルな設定画面

• 日本語に完全対応しており、WordPress管理画面の「設定 → SEO Simple Pack」から直感的に操作できます。
• 各項目に説明がついているため、SEO初心者でも扱いやすいです。

テーマとの相性が良い

• SWELLはもちろん、Cocoon、Arkhe、VK Blocks Themeなど多くの国産テーマで問題なく動作します。
• テーマ側にmetaタグ生成機能がある場合、競合を避けるための調整も比較的容易です。

主な機能

メタ情報（title・description・OGP）の設定

• トップページ・投稿ページ・固定ページ・アーカイブページなどのタイトルタグ（title）やディスクリプション（description）を一括または個別に設定可能です。
• OGP（Open Graph Protocol）やTwitterカードもサポートしており、SNSシェア時に適切なサムネイル・タイトル・説明文を表示できます。

SNS連携設定

• FacebookアプリID、OGP画像のデフォルト指定、Twitterカードタイプなどを管理画面で設定できます。
• 投稿ごとにアイキャッチをOGP画像として自動使用することもできます。

検索エンジン向け設定

• Googleなどの検索エンジン用に、noindex（インデックスしない）設定やnofollowを投稿単位で指定可能です。
• サイト全体のメタタグ（robotsタグ）やcanonicalタグを自動生成してくれます。

検証タグ（Verification）登録

• Google Search Console、Bing Webmaster Toolsなどの認証タグを簡単に追加できます。

基本的な使い方の流れ

詳しい使い方は以下のページをご確認ください。

• SEO SIMPLE PACK – WordPress プラグイン | WordPress.org 日本語
• SEO SIMPLE PACK の使い方 | LOOS,Inc.

1. インストール

• WordPress管理画面で「プラグイン → 新規追加」から「SEO Simple Pack」を検索し、インストールして有効化します。

2. 初期設定

管理画面左メニューの「設定 → SEO Simple Pack」を開くと、以下のタブが並びます。

• 一般設定
  • 基本設定
  • 投稿ページ
  • タクソノミーアーカイブ
  • その他アーカイブ
  • Googleアナリティクス
  • ウェブマスターツール
• OGP設定
  • 基本設定
  • Facebook
  • Twitter
• HELP（使用できるテンプレート変数を確認可能）

3. 一般設定

• トップページや投稿ページのタイトルおよびディスクリプションを「%post_title% | %site_title%」のようにテンプレートで指定できます。これにより、SEO的に最適なタイトル構造を自動生成できます。
• 特定のページについてnoindexにしたい場合、そのように設定をすることも可能です。不要なページをインデックスさせないことで、SEOの評価を集中させられます。
• 「メディアページ」「著者アーカイブページ」など、一部ページについては強制リダイレクトするように設定することが可能です。
• 「Googleアナリティクス」タブおよび「ウェブマスターツール」タブでは、対象のコードを入力することにより簡単に導入を行うことが可能です。

「一般設定」画面（一例）

4. OGP設定

• X(旧Twitter）およびFacebookに適合したOGPタグに関する設定が可能です。
• 既定のOGP画像を指定しておくと、アイキャッチがない記事にもサムネイルが表示されます。

「OGP設定」画面（一例）

5. 投稿・固定ページ編集画面での個別設定

• 各記事の編集画面の下部に「SEO Simple Pack設定」というメタボックスが追加されます。
• ここでタイトル・description・OGP画像・noindex設定などを個別に上書き可能です。

個別設定の様子（一例）

補足・注意点

og:titleやmeta descriptionをカスタムフックで操作する

テーマ側やfunctions.phpでフックを使えます（詳しくは公式ページをご確認ください）。

add_filter('ssp_og_title', function($title) {
    if (is_category()) {
        $title = 'カテゴリー: ' . single_cat_title('', false) . ' | ' . get_bloginfo('name');
    }
    return $title;
});

このように、カテゴリーやカスタム投稿タイプごとに動的に変更できます。

プラグイン・その他設定との競合

• 既存のSEO対策用プラグイン（「All in One SEO」など）を既に入れている場合、このプラグインを使用する意味はありません。どちらかのみを使用するにとどめ、同時利用は極力避けるのが良いでしょう。
• CocoonやXWRITEなどのテーマで同様のmetaタグを出力している場合は、SEO Simple Pack側で重複しないよう、重複箇所の設定をオフにする必要があります。

まとめ

• 主な目的： title・description・OGPを簡単管理
• 特徴： 軽量・日本語対応・設定が分かりやすい
• 向いているユーザー： SEOの基本設定だけを確実に行いたい人
• 注意点：他のSEOプラグインとの併用は避けるとともに、テーマ内のSEO設定に注意する

なぜ画像最適化が必要なのか

ページ表示速度の改善

大きな画像ファイルをそのまま読み込むと、ユーザーの通信回線（特にモバイル）で表示に時間がかかります。読み込みが遅いと、離脱率が上がりSEO（検索エンジン最適化）にも悪影響を及ぼします。

※離脱率（Bounce Rate）：ユーザーが1ページだけ見てサイトを離れる割合です。

帯域（バンド幅）とサーバー負荷の軽減

画像サイズが小さければ、それだけ転送データ量が減るため、サーバーやCDNのコストを抑えられます。高画質を保ちつつ圧縮率を上げられると理想的です。

レスポンシブ対応の強化

ユーザーの画面幅に合わせた最適な画像サイズを提供すると、無駄な大きい画像のダウンロードを防げます。WordPressはsrcset機能で自動的に最適画像を選択しますが、カスタムサイズを用意しておくことで、さらに細かく制御できます。

EWWW Image Optimizer の導入と設定

プラグインのインストール

1. 管理画面の「プラグイン」→「新規追加」で「EWWW Image Optimizer」を検索
2. “今すぐインストール” → “有効化”

基本設定

有効化後、管理画面の「設定」→「EWWW Image Optimizer」メニューに移動します。

［Basic Settings］
・『Remove metadata』：チェック → 画像に含まれる撮影情報などの余分なデータを削除  
・『Enable Jumbo Mode』：好みで → 圧縮率をさらに高める（サーバーCPUに負荷がかかる場合あり）

• Metadata（メタデータ）とは、撮影日時やカメラ情報などの付帯情報
• Jumbo Mode：高圧縮モード。時間がかかるがファイルサイズを大きく削減できます。

WebP 変換の有効化

「WebP Conversion」タブを開き、

1. 『Convert existing images to WebP』にチェック
2. 『Also convert to WebP in Media Library』にチェック

WebPはJPEG/PNGよりもさらに圧縮効率に優れた次世代フォーマットです。

一括最適化（Bulk Optimize）

既存メディアを一度に最適化するため、「Tools」→「Image Optimization」→「Run All Optimizations」で一括処理を実行します。時間がかかる場合があるので、深夜帯など負荷の低い時間に行いましょう。

画像サイズ（サムネイル）の追加と活用

なぜカスタム画像サイズが有効か

• テーマやテンプレートごとに必要な画像サイズは異なります。
• デフォルトの「サムネイル（150×150px）」「中サイズ（300×300px）」「大サイズ（1024×1024px）」以外に、独自サイズを追加すると、余分に大きいサイズを読み込まずに済みます。

functions.php に設定を追加

子テーマ（Child Theme）の functions.php に以下コードを追記します。

<?php
// カスタム画像サイズを追加
function mytheme_setup_custom_image_sizes() {
    // 幅800px、高さ450px、トリミングは中央基準
    add_image_size( 'hero-large', 800, 450, array( 'center', 'center' ) );
    // 幅400px、高さ225px、トリミングなし（縦横比を維持）
    add_image_size( 'hero-medium', 400, 225, false );
}
add_action( 'after_setup_theme', 'mytheme_setup_custom_image_sizes' );

コードの解説

• add_image_size( $name, $width, $height, $crop )
  • $name：画像サイズの識別名
  • $width, $height：ピクセル単位
  • $crop：切り抜き設定。true（センターで切り抜き）/array( ‘x’,’y’ )/false

サムネイル再生成

新規登録画像には自動生成されますが、過去画像には適用されません。
再生成には「Regenerate Thumbnails」などのプラグインを使い、以下手順で実行します。

1. プラグインをインストール・有効化
2. ツール→「Regenerate Thumbnails」→「Regenerate All Thumbnails」を実行

テンプレートでのサイズ指定

記事一覧やヘッダーなどテーマ内で画像を出力する際、以下のように呼び出します。

if ( has_post_thumbnail() ) {
    // hero-large サイズで出力
    the_post_thumbnail( 'hero-large' );
}

WordPressは自動的に srcset 属性を付与し、画面幅に合わせて最適な画像を選びます。さらに細かく制御したい場合は、wp_get_attachment_image_srcset() や sizes 属性を併用しましょう。

さらに効果を高めるポイント

Lazy Load（遅延読み込み）

EWWW Image Optimizer では「Lazy Load」タブから有効化でき、ユーザー画面内に到達した画像だけを読み込みます。WordPress 5.5以降は標準で loading="lazy" が付きますが、プラグインでさらに最適化可能です。

• CDN（コンテンツ配信ネットワーク）
  画像をCDNに配信すると、ユーザーからの地理的な距離による遅延を減らせます。EWWWのCDNオプション（有料）や、Cloudflare・AWS CloudFront・KeyCDNなどと併用しましょう。
• SVG（ベクター画像）の活用
  アイコンやロゴなど単色・簡易図形はSVG化できると、ファイルサイズ・解像度の両面でメリットがあります。

まとめ

1. EWWW Image Optimizer でメタデータ削除・圧縮・WebP変換・遅延読み込みを設定し、既存画像を一括最適化
2. カスタム画像サイズ を add_image_size() で定義し、不要な大きいサイズ読み込みを防ぐ
3. 再生成プラグイン で過去画像にも適用
4. テーマテンプレートで the_post_thumbnail() などを活用し、srcset でレスポンシブ配信

これらを組み合わせることで、ページの表示速度・ユーザー体験・SEOが同時に向上します。ぜひ試してみてください！