SEO・サイトの質問掲示板 >

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

Wordpress(ワードプレス)

このカスタマイズのポイント

WebP化によって、画像の読み込み速度を上げることができますが、サブディレクトリにあるサイトをWebP化する場合は一部手順が異なります。

この記事ではサブディレクトリにWebPを適用するためのポイントをまとめました。

本カスタマイズの基本情報

所要時間 20分(※)
利用する
プラグイン
EWWW image
optimizer
効果 スピード向上
サーバー負荷低減
SEO効果

※画像の数で変わります

※通常のサイト(ルートドメイン)のWebP化の場合はこちらの手順をご確認ください。

※本方法のサブディレクトリはシングルサイトとして作った場合に適用できます。マルチサイトの場合は適用できません。

難易度

Lv.1 プラグインのみ
Lv2 CSSの操作が必要
Lv3 サーバーでの操作が必要
Lv4 FTPの操作が必要
Lv5 それ以上の難易度全て
※バックアップを取ってから行うようにして下さい。

 

サブディレクトリの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の画面を見るとグリーンに変わっています。これで設定は完了です。

 

キャッシュプラグイン「WP Fastest Cache」を利用している場合は、WebP用のコードが入っているため、最初からグリーンになります。これはサブディレクトリでも、上層ディレクトリでも同様です。

 

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

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

 

画像をスキャンします。

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

0

  1. アバター 匿名 より:

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

    とのご説明ですが、.htaccessファイルは見つけられたものの、WebPコードをどのように貼り付けていいかわかりません。
    「開く」を選択するとファイルが「htaccess」という名前でダウンロードされるだけです。

    .htaccessファイルの編集方法をご教授いただけませんでしょうか。

    0
  2. ホームページクエスト ホームページクエスト より:

    匿名さん、ご質問ありがとうございます。

    おそらくConoHaのサーバーと思いますので、その前提で回答させていただきます。

    ConoHaのサーバーの場合の.サブディレクトリのhtaccessはそのままだと編集ができません。なので、.htaccessを一度ダウンロードした後に、編集後もう一度アップデートする必要があります。

    ConoHaの上のコマンドにアップデート用のアイコンがあると思いますので、そちらから編集したファイルをアップデートしてください。

    念のためですが、ConoHaからWindowsに.htaccessをダウンロードするとなぜか最初の「.」が消える現象があります。アップロード後に「リネーム(名前を編集)」して、.htaccessにしてください。

    よろしくお願いいたします。

    0
  3. アバター 匿名 より:

    早速のご回答誠にありがとうございます。
    ダウンロードしてメモ帳で編集後、.htaccessにリネームしてアップロードして上書きしたら成功しました。
    難しい操作がかんたんにできてうれしいです。ありがとうございました。

    0
タイトルとURLをコピーしました