このサイトを立ち上げてから、1ヶ月後ぐらいに、PageSpeed Insaightsで分析した結果が、64だった。前回の取組については、下記の記事を確認していただきたい。
公開記事数が70を超え、一区切りついたところで、再びPageSpeed Insightsで分析した結果が次の画像である。
評価は45で、いずれの指標も真っ赤である。今回の調整では、この45を81に戻した。
評価45→81になった決定的な対策
評価を上げるべく、さまざまな思考と試行を繰り返した。振り返れば、大したことをやっていないが、PageSpeed Insightsから「ツリーマップ」を見れることに気づき、眺めていた。chromeの開発者ツールでも確認できる内容だが、たまたまの流れでツリーマップでボトルネックを探していた。
結論を言えば、wordpressのプラグインである「EWWW image optimizer」に頼り過ぎていた。wordpressに画像をアップロードする前に、Squooshで画像サイズを極限までおとした。また複雑な画像を削除し、幾何学的な画像を使うことで、画像サイズをおさえることにした。
「EWWW image optimizer」には有料版があり、さまざまなサイトでは無料版でも高機能ということだったが、圧縮率に限界があったようだ。Squooshは、元画像と圧縮後の画像を比較できるため、圧縮率をぎりぎりまで高められる。
この時点で、すでに対策済みの人にとっては興味がないかもしれない。しかし、同じような悩みを抱えている人向けに、私が行った手順を紹介しておく。
PageSpeed Insightsの評価を上げた施策
ここから紹介する施策は、Webサイト制作を専門とする人なら、おそらく必ずやっているであろうものばかりである。単に、私が軽視しており、また手間がかかるためやってこなかった。PageSpeed Insightsの対策で苦労している同志も多いと考えられるため、紹介しておく。
ツリーマップからGoogleタグの確認・修正
PageSpeed Insightsの診断結果の上に、「ツリーマップを見る」という箇所がある。ここをクリックすると、次のような画面に移行する。
上記はリソースのサイズと使用していないバイト、横棒で示しているカバレッジである。カバレッジの赤い部分が多いと、改善の余地がある。私の場合、GA4タグIDを使い、タグマネージャーIDを設定していなかったため、タグマネージャーIDを設定し、GA4タグIDを削除した。まず、これで少し改善された。
画像サイズの圧縮
以前からの課題で「最大コンテンツの描画」要素への対策があった。画像サイズをもっと減らせますよ、という忠告だが、手間がかかるため、「EWWW image optimizer」に頼っていた。今回、少し時間があったので、思い切って、次の手順で対策した。
◆ 複雑なアイキャッチ画像を幾何学的な画像に変更する
- 画像名も適当だったため、アイキャッチ画像をすべて削除し、いちから作成
- アイキャッチ画像を1200 × 675に統一し、canvaで調整
- canvaからダウンロードした画像を、Squooshでサイズ圧縮。特にQualityを極限まで下げた。
画像の右下に、「86%」とあり、これを画質を確認しながら、20まで90%以上圧縮した。Squooshはウェブ版もあるが、アプリを使用している。軽量でサクサク動くので、予想以上に簡単に圧縮できた。
このあと、wordpressにアップするが、「EWWW image optimizer」は有効にしている。「EWWW image optimizer」による圧縮率は低いが、webPが使えるので、様子見で使い続けている。
記事が少なかったので、面倒だったが、やり遂げた。これで評価が81まで復活したのである。
まとめ
PageSpeed Insightsの評価を上げるために、ツリーマップを活用してGoogleタグの修正と画像サイズの圧縮を行った。具体的には、タグマネージャーIDを設定してGA4タグIDを削除し、アイキャッチ画像を幾何学的な画像に変更してサイズを圧縮した。その結果、評価が45から81まで改善した。WordPressプラグインの「EWWW image optimizer」に頼り過ぎず、Squooshを使って画像サイズを極限まで減らすことが効果的であった。
コメント