WordPressのサブディレクトリの画像をWebP化して高速化する方法

難易度

サブディレクトリのWebP化
改善前

画像の拡張子がJPG、PNGで保存されている状態です。

サブディレクトリのWebP化
改善後

見た目は変わりませんが、サブディレクトリサイトの画像読込形式がWebPに変わります。

サブディレクトリのWebP化
設定方法

プラグインをインストールする

プラグイン「EWWW Image Optimizer」をインストールします。

プラグインの設定画面からWebPをオンにする

サイドバーの「設定＞EWWW Image Optimizer」を開き、WebPタグを開きます。

チェックボックスをONにします。

下に出てくるコードを.htaccessに貼り付ける

以下のコードをコピーします。

FTP、もしくはファイルマネージャーからサブディレクトリの.htaccessにアクセスします。イメージは以下の通りです。サブディレクトリにインストールしている場合は、通常のディレクトリ（フォルダといった方が分かりやすいかもしれません）から一つ下の階層にもう一つサブディレクトリ用の.htaccessファイルが存在します。

ConohaやXサーバーで管理パネルに出る.htacess編集は、ドメイントップが対象になっています。そのためサブディレクトリのWebP化では直接編集してもサブディレクトリのサイトには効果がありません。

サブディレクトリの.htaccessへConohaでアクセスする場合、FTPもしくはファイルマネージャーから新しく設置したサブディレクトリサイトのフォルダを開きます。

以下はConoHaのファイルマネージャーで表示した別サイトのルートドメインですが、サブディレクトリは以下のように自分で決めたURLがフォルダと表示されます。それぞれにWordPressに関するファイルが入っています。

この下層のフォルダに.htaccessファイルがあるので、そこへコピーしたWebPのコードを貼り付けます。保存し、先ほどのEWWW Image Optimizerの画面を見るとグリーンに変わっています。これで設定は完了です。

メディアから一括最適化する

サイドバーのメディアから一括最適化を選びます。

画像をスキャンします。

右側のWebPのみ、チェックボックスを入れます。なお、EWWW image optimizerを過去利用したことがある場合は最適化を強制ボタンにチェックを入れて下さい。

圧縮が終わって、メディアライブラリの一覧で開きます。以下のボタンから一覧にできます。

以下のようにWebP圧縮されていることが確認できます。

WebPに変換されているか確認する

Google Chromeをシークレットタブで開きます。シークレットタブは「Alt＋shift＋n」を押すことで開くことができます。

F12を押して、左上からNetworkを開きます。

以下の枠の中がWebPに変わっていればいればOKです。（開いた時、何もデータがないことがあります。その場合は「ctrl+R」を押して再読み込み（リロード）して下さい）。

これでおしまいだよ！役に立ったらツイート、はてなブックマークしてくれると嬉しいな。