画像の次世代フォーマット化と、サイトの最適化について考える。
概要
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 に変換したんだから当然か。ファイルサイズが倍になっていないのは素晴らしいと思います。さすが次世代フォーマット。
W3 Total Cache
インストールと設定
これもインストールをポチって、有効化するだけです。
左サイドのツールバーと上部のツールバーにアイコンが一個追加になっていました。
さっそくダッシュボードにアクセスしてみました。
おおっと。
どうやらファイルに書き込みができなくてインストールが完了していない。
下記の内容を書き込んでくれと。
レンタルサーバーのホームページにログインして管理からFTP で指示されたファイルを開いてみると、確かに書き込み権限がないので、一旦書き込み権限をつけてから、上記の一文を追加。追加後に、権限をもとに戻しておきました。
ページを開きなおすと、メッセージが消えてました。
これで、インストールは正常終了という事で良さそうです。
画面の下に「Skip」と「NEXT」のボタンがありましたが、NEXT はAccept が必要なのか、グレーアウトしてましたので、とりあえずSkip をしてみることに。
画面がダッシュボードに変化したようです。
とりあえず、ここではこれ以上出来る事はなさそうです。
一般設定
設定項目がかなりあります。結構難しい話が多い。。。
良さそうなサイトを発見。乗っからせていただきます。
下記のサイトでは、「General Setting」として解説されてました。
W3 Total Cache のおすすめの設定方法
https://bazubu.com/w3-total-cache-23854.html
（一般設定の）一般
ここは、やることないです。
ページキャッシュ
ページキャッシュは、「有効化」にチェック。
ページキャッシュ方法は「ディスク：拡張」に設定します。
圧縮
圧縮 をいったん有効化したのですが、私の場合サイトのレイアウトが激しく崩れてしまったので、断念。
元に戻しました。
その他の値は、初期設定のままでOK のようです。
Opcode Cache
ここは解説がなかったので新機能かなと思います。
PHP をコンパイルしてキャッシュしておく仕組みのようです。
ちょっと怖いので、非活性のまま保留します。
データベースキャッシュ
キャッシュ有効にします。
Object Cache
オブジェクトをキャッシュしておく。
保留かな。
ブラウザーキャッシュ
ここはデフォルトのまま、有効。
CDN、リバースプロキシ
どちらも負荷分散を目的としてキャッシュ用にサーバーをたてる話になると思います。
別途サーバーが要るはずなので、ひとまずスルーしました。
USER Experience
Lazy Load Image のみチェックを入れました。
サイトの画面で表示されていない箇所の画像を後から読み込む設定（のはず。）
後は絵文字を無効化とか、WP 埋め込み無効化、jquery 無効化などと思われます。
とりあえず、保留です。
Statistics
サイトの統計を取って、予想通り効果が出ているか確認するための設定の様なので、スルー。
Fragment Cache
サイトページの各「部品」に個別に参照キーを割り当てて、キャッシュを行う仕組みのようです。
ディスクに設定してみました。
有償の機能だったようなので、元に戻しておきました。
以降は、ライセンスと、管理向けの設定だったので、以上にしました。
このプラグインはキャッシュの設定ですからね。
スピードアップではなくて効率化の話だと思うので、スコアは気にせずに様子見しようと思います。
変にサイトが重くなったとか、表示がおかしくなったとかなければ、今はいいと思います。
感想
体感ですが、以前に比べると「かなり速くなった」と感じています。
今まででもちょっと重いかなーで、「気にならない程度」レベルだと思っていましたが、
今回、最適化をして「結構遅い」のレベルだったと感じました。
プラグインを導入して良かったです。
スコアは測定ごとに変わるのであまり気にしないことにしています。
何より、「次世代フォーマット対応済」なサイトになったのがうれしいです。
以上です。