WordPress SEO ブログで使用している画像の「次世代フォーマット化」や、サイトの最適化について考える。

画像の次世代フォーマット化と、サイトの最適化について考える。

Contents

1 画像の次世代フォーマット化と、サイトの最適化について考える。

概要

WP サイトの読み込みが遅いということで、使用している画像ファイルのフォーマットや、キャッシュについてコンサイダーするように、Google Sitekit （プラグイン）から提案を受け対応した時の内容です。

サイトの読み込みが遅い気がしている方や、同じようなことをGoogle に言われてプラグインを検討中の方に。

読み込みが速くなるから、次世代フォーマットや、キャッシを使用する事を考えましょうと。
キャッシュポリシーとか、最適化とかプラグインをとか試せよと。

考え中

次世代フォーマット

なるほど、考えてもいませんでした。画像フォーマットに既に次世代が出てきているんですねー。

Google 検索したら、良きサイトがサクサクと出てきました。ですので細かい説明は別途「画像、次世代フォーマット」などで検索していただければ良いソースが沢山見つかると思いますので割愛します。

簡単に言うと、その名の通り次の時代のフォーマットでした。
「JPEG」が進化したフォーマットが２つと、Google が開発しているフォーマット「WebP」が注目株のようです。（他にもあるのかもですが、これらが軒並み紹介されています。）

いずれも従来の形式に比べ高圧縮との事ですが、それぞれに対応するブラウザの種類に難がある様ですね。どのブラウザでも読める形式のものは無く、覇権争い中の様です。

まあ、情報源が半年くらい前の記事なので現在の状況も調べる必要がありそうではありますが、Google の検索エンジン向けの最適化なので、Google に寄せておけばいいでしょう。

という事で「WebP」形式に対応する方向で決まりました。

現時点では全てのブラウザがWebP に対応していないので、それ向けに代替の画像を用意しておく必要がありそうです。

余談ですが、WebP のさらに向こうからAVIF というフォーマットもやって来ているらしいです。

キャッシュについて。

キャッシュ用のポリシーを実装すると、ブラウザキャッシュとのやり取り効率化される、というものらしいです。

やって損は無さそうなので、とりあえず何かしらプラグインを入れて、デフォルトで運用（丸投げ）しようかと思います。

コード最適化

これも、プラグインに丸投げの方向で。

プラグインは何が良い？

今回の最大の目玉はWebP 変換のプラグインだなという事で、画像ファイルの一発変換とWebP 非対応ブラウザだった場合の処理も追加してくれる事が前提だと意気込んで検索したところ、大体そんな仕様でした。

そうなるとさらに何を選んで良いか分からんじゃないか。

であれば、
「トップにヒットするプラグインで、いろいろ網羅した都合がいいプラグインがいいんじゃないか。」
ということで適当に翻訳を見ながら埋めてみました。

欲しいなーと思う機能が「ある」、「なし」のみ確認しています。
英語をGoogle 翻訳しつつ、パラパラ読みなので、見落としや間違いもあるかもです。

プラグイン名	キャッシュ	WebP フォーマット	画像圧縮	サイト最適化
W3 Total Cache	〇			〇
Smush – Lazy Load Images, Optimize & Compress Images		Pro のみ	〇
Imagify – Optimize your Images & Convert WebP			20M/月の制限あり。
WP-Optimize – Clean, Compress, Cache.	〇		〇	DB 最適化
EWWW Image Optimizer		〇	〇

意外とWebP 対応が少ない。

W3 Total Cache は確定で入れようと思います。何よりオープンソースです。

EWWW Image Optimizer がWebP も対応なので、画像対策はこれにしようと思います。

と言う訳で方針が決まりました。

じゃあ、最適化してみよう。

最適化の効果を検討するために、現状を確認。
テストの度にスコアが変わるのでホント参考程度に。

スマホは、アクセスが少なくて、フィールドデータがとれない。

PCはこんな感じ

EWWW Image Optimizer

インストール、設定。

インストールはポチるだけ。
恐ろしい時代。

ダッシュボード　＞「設定」に該当のプラグインの項目が増えていたので、早速クリックしてみます。

下記の画面が出てきました。

「speed up your site 」
迷わずにチェック。そのために入れました。

「Save storage space」
バックアップを取る的なボタンでしょうか。やばそうな感じではないのでOK しておきます。

「Get 5x more optimization priority support 」
直訳（Google）すると「5倍以上の最適化優先度サポートを取得」
最適化の処理とか優先してもらえる感じの有料オプションでしょうか。
とりあえず、「free」の方で。

NEXT をクリックして、次の設定に進みます。

「WebP 変換」を有効にすると、容量が増える。。。。的なメッセージが。
仕方無いと思います。ということで「Continue」をクリックします。

「Save Settings」して設定は終わりです。

次にこんな画面が開いてきます。
この設定は「新しいアップロードから有効で、既存の画像については、バルク・オプティマイザを使う」との事。

最適化の実行

画面の指示に従って、スキャン、最適化を実施。

最適化中。

しばらく放置です。

折をみて、、、設定　＞「EWWW Image Optimizer 」を開くと、スコアが出ていました。

結構、最適化された？

ダッシュボード　＞ツール　＞「EWWW Image Optimizer」を開くと、最適化した画像についての後処理ができる感じでした。

Ludicrous Mode
普段は使わなくても良さそう。

効果を確認。

スマートフォン

使用前

使用後

ページ読み込みにかかる時間「Largest Contentful Paint」が5倍くらいに増えているのは、遅延読込を有効化した結果でしょう。
その代わりに「Total Blocking Time」が減りました。
まあ、テストする度に結果が変わるので、評価方法を間違えた感じです。
このあと、自分のページに実際にアクセスして見ましたが、体感で圧倒的に速くなっていました。

PC

使用前

使用後

数値的には、あまり変わっていないような気がしますが、スマホ、PC ともに読み込みが体感レベルでは「速くなった」と感じます。

上記のスコアはテストする度にかわるので、あまりこれで一喜一憂しないようにします。
冒頭でGoogle Site Kit に指摘されていた、サイト改善提案内容が減っているところを見ると改善された判定なんでしょう。

これもテストの度に変わるので何ともですが。

増えたファイルの量を確認。

ファイルが増えるって話だったので、FTP でサイトのファイルを一括ダウンロードして、バックアップしておいた実施の前のデータサイズと比べてみたいと思います。

データベースのエクスポートファイルサイズ。

10M くらい増えましたね。

画像ファイル

画像ファイルについては、この「upload」フォルダに保存されているみたいですね。（「違うよ！」という場合、ご指摘いただけますと大変ありがたいです。）
比べてみると倍ぐらいになっていますね。
そりゃ、全部WebP に変換したんだから当然か。ファイルサイズが倍になっていないのは素晴らしいと思います。さすが次世代フォーマット。