「次世代フォーマットでの画像の配信」の改善方法【WebPを使う】

2020年6月25日

「次世代フォーマットでの画像の配信」の改善方法【WebPを使って解決】

 

GoogleのPageSpeed Insightsで,Webサイトの表示速度を測定すると出てくる「次世代フォーマットでの画像の配信」

 

今回は,これの対策についてまとめていきます.

 

特に,画像をたくさん使っている方は,スコアを大きく改善できる可能性があるので,ぜひ試してみてください.

 

 

本題に入る前に…

 

これから紹介する方法は,「.htaccess」というファイルに変更を加えます.

 

そのため,必ずバックアップを取り,あくまでも自己責任でお願いいたします.

 

また,参考までに,対策を行った時点でのwordpressテーマとそのバージョンを記しておきます.

 

テーマ
バージョン
20200206

 

「次世代フォーマットでの画像の配信」の改善方法

 

手順は以下の3ステップです.

  1. EWWW Image Optimizerの導入・設定
  2. .htaccessへの記述
  3. 画像を最適化

 

では,順を追って説明していきいます.

 

その①:EWWW Image Optimizerの導入・設定

 

まず,プラグイン「EWWW Image Optimizer」が入っていない方は,インストールし有効化してください.

EWWW-Image-Optimizerのインストール

 

他の画像圧縮系プラグインを導入している場合,警告が出ることがあるそうです. そのようなプラグインは,停止しておくことをおすすめします.

 

次に,「EWWW Image Optimizer」の設定を開きます.

EWWWの設定を開く

 

以下の場所をクリックし,「WebP」タブを開きます.

WebPタブ

 

「JPG,PNGからWebP」にチェックを入れます.

JPG,PNGからWebPへ

 

「変更を保存」をクリックします.

変更を保存

 

すると,ページの下の方に「リライトルール」が生成されているので,この中身をコピーします.

リライトルール

 

ここで「リライトルールを挿入する」ボタンは押さないよう注意してください!
このボタンを使うと,うまくいかなくなることがあるそうです.

 

次のステップで,今コピーした内容を「.htaccess」に書き加えていきます.

 

その②:.htaccessへの記述

 

次に,先ほどコピーした内容を .htaccessに書き加えます.

 

主な方法として,

  1. サーバー経由で書き加える
  2. FTPソフトで書き加える

があげられます.

 

それぞれの方法について,簡単に解説します.

 

サーバー経由で行う場合

 

サーバー経由で行う場合は,以下の手順で書き加えます.

 

  1. サーバーにログインする
  2. 対象のドメインを選ぶ
  3. 「.htaccess」を開く
    (バックアップは忘れずに!)
  4. コピーした内容を「.htaccess」ファイルの一番上に貼り付ける
  5. 変更を保存する

 

Xserverを使っている場合は,サーバーパネルの以下のボタンから編集ができますよ!

Xserverのサーバーパネル

 

必ずバックアップを取っておきましょう!

 

FTPソフトを利用する場合

 

FTPソフトを使う場合は,以下の手順で書き加えます.

  1. FTPソフトでサーバーに接続する
  2. 対象のドメインのフォルダを開く
  3. 「.htaccess」ファイルをダウンロード
    (バックアップは忘れずに!)
  4. ダウンロードした「.htaccess」ファイルの一番上に,コピーした内容を貼り付ける
  5. 「.htaccess」ファイルをもとの場所にアップロード(上書き保存)する

 

みっちー
ちなみに,僕は「FileZilla」というFTPソフトを使いました!

 

これで,このステップは終了です.

 

その③:画像を最適化する

 

最後のステップとして,画像を最適化していきます.

 

念のため,画像のバックアップも行っておくことをおすすめします.

 

まず,wordpressのダッシュボードから,メディア > 一括最適化をクリックします.

一括最適化

 

次に,画面右の方にある「再最適化を強制」にチェックを入れます.

再最適化を強制

 

その後,「最適化されていない画像をスキャンする」をクリックします.

最低化されていない画像をスキャン

 

そして,「〇点の画像を最適化」をクリックします.

最適化

 

みっちー
…2960点!

画像数が異様に多い件については,記事の最後の方で補足説明します.

 

 

クリック後,最適化が始まるので気長に待ちましょう!

 

最適化が終われば,すべてのステップ終了です.

 

みっちー
お疲れ様でした!

 

 

最適化ができたか確認する

 

まず,画像のある適当な記事にアクセスします.

 

画像の上で右クリックをし,「新しいタブで画像を開く(I)」をクリックします.

新しいタブで画像を開く

 

ウインドウサイズを小さくし,デスクトップなどの適当なところにドラッグ&ドロップします.

ドラッグ&ドロップ

 

みっちー
「.webp」になってる!

 

これでうまくいっていることが確認できます.

 

WebP未対応のブラウザでは,元のJPG,PNG画像が表示されますよ!

 

最適化する画像の数が多かった理由

 

先ほど,「2960点の画像を…」と表示されていましたね.

 

みっちーブログの今までの記事を見ていただければわかりますが,そこまで多くは画像を使っていません.

 

みっちー
…じゃあ,どういうことなの?

 

画像をアップロードしたときに自動的に生成される別サイズの画像,が原因です.

 

例えば,適当な画像をアップロードすると,「大サイズ」「中サイズ」「サムネイル」といった,オリジナルの画像とは別のサイズの画像が生成されます.

 

これによりたくさんの画像が生成された結果,「2960点」という数字が出てしまいました.

 

 

このまま放置しても良いのですが,今後のために使っていない「中サイズ」の自動生成を停止することにしました.

 

みっちー
手順はとっても簡単でした!

 

まず,ダッシュボード > 設定 > メディア をクリックします.

 

そして,生成したくない画像サイズの「幅の上限」「高さの上限」の値を0にするだけです.

メディア設定

 

みっちー
「変更を保存」を忘れずに!

 

 

「次世代フォーマットでの画像の配信」の改善方法 まとめ

「次世代フォーマットでの画像の配信」の改善方法 まとめ

 

今回は,PageSpeed Insightsにて表示される「次世代フォーマットでの画像の配信」の改善方法を紹介しました.

 

WebPへの変換ができたら,再度PageSpeed Insightsで計測をしてみて下さい.

 

みっちー
スコアが上がってると良いですね!

 

では,最後まで読んでいただきありがとうございました!

 

-ブログ

Copyright© みっちーブログ , 2021 All Rights Reserved.