ブログ運営者なら誰もが衝突する壁、
＼サイトの高速化／
私も悩まされました。
高速化の確認にはPageSpeed Insightsを利用しています。
今回はそのエラーの一つ『次世代フォーマットでの画像の配信』の改善方法を紹介します。
- 次世代フォーマットとは
- EWWWImage Optimizerについて
- EWWWImage OptimizerでWebP設定をする方法
※ウェブ用語などに関しては初心者ですので解釈が間違っていたらすみません。
※PageSpeed Insightsについてはこちらの記事で簡単に説明しています。ページスピードが劇的に上がる方法も紹介していますので、是非ご覧ください。
次世代フォーマットとは
PageSpeed Insightsの『次世代フォーマットでの画像の配信』という改善方法の詳細には、次のような文面が出てきます。
JPEG 2000、JPEG XR、 WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
PageSpeed Insights (google.com)
つまり、ここでいう次世代フォーマットとは、JPEG 2000、JPEG XR、 WebPなどです。
Googleはこの中でもWebPへの変換を推奨しています。
「WebP」 とは、2010年にGoogleがJPEGに代わる画像フォーマットとしてを発表したものです。JPEGやPNGよりファイルサイズ3割弱小さくできると謳っています。
A new image format for the Web | WebP | Google Developers
つまり画像の保存形式をWebPにすると、サイトスピード向上も狙えるということだね！
どうやってWebPに変換するの？
画像の圧縮には、多くの人がEWWWImage Optimizerというプラグインを推奨しています。
このプラグインを使ってWebP変換も行うことができます。
EWWWImage Optimizerについて
EWWWImage Optimizerとは画像の圧縮変換ツールです。
有効化し、数カ所チェックを入れるだけで、サイト上に存在している画像の最適化ができ且つ、今後アップロードしていく画像も自動で最適化してくれます。
EWWW Image Optimizer – WordPress プラグイン | WordPress.org 日本語
基本的な設定方法は、ヒトデさんのサイトで分かりやすく説明されているので、まだインストールしていない方はこちらをご覧ください。
EWWWImage OptimizerでWebP設定する
EWWWImage Optimizerは、有効化しておくだけでも優れた機能をもちますが、WebPの設定をしておくことで、よりサイトスピードの向上が期待できます。
設定方法はさほど難しくありません。
設定方法
１．EWWWImage Optimizerの設定画面を開く
２．WebP変換にチェックを入れる
３． WebPの配信方法の欄が出てくる。（白い箱が出てきて、右下に赤い四角が出てくる）
４．青枠の部分をサーバーの.htaccessに追加設定するため、コピーする
ここからサーバー側での操作になります。
WordPressの画面は一旦保存してもいいですし、開いたまま置いておいても大丈夫です。
５．サーバーのサイト管理画面から「.htaccess」の設定画面 を開き、編集する
※私はConoHaサーバーと契約しているので、以下ConoHaでの設定方法になります。
サイト管理→サイト設定→.htaccess設定を開く→右の鉛筆をクリック
６． .htaccessにWordPressでコピーしたものを貼り付け、保存する
貼り付けるときに、変に改行したり、スペースが入っているとうまくいかないので気を付けてください。
私は、後からわかりやすいように、一番下に貼り付けました。
７．Wordpress、EWWWImage Optimizerの設定画面のWebP欄まで戻り、WebPの配信方法が「WebPルールが正常に検証されました」という言葉に代わり、赤い四角が緑になっていれば完了。
※先ほど、保存せずに画面をそのままにしていた方は、ここで保存すれば上の画像のように切り替わります。
この設定が完了すると、PageSpeed Insightsの改善できる点から『次世代フォーマットでの画像の配信』が消えると思います。
まとめ
今回は、『次世代フォーマットでの画像の配信』の改善方法についてお話ししました。
次世代フォーマットと言っていますが、WebPが発表されたのは2010年なので、次世代感はあまり感じない気もしますね 笑。
(それくらいJPEG等が浸透しているということなのでしょう。)
今回の方法は、皆さんがインストールしているであろうEWWWImage Optimizerを使用して出来るので、割と手軽なサイトスピード向上方法なのではないでしょうか。
ちなみにEWWWImage Optimizerの遅延読み込みにチェックを入れたままにしておくと、サイトの画像が表示されない事例をよく見かけるので、必ずチェックは外しておいてくださいね。
それではまた。
コメント