PageSpeed Insights の評価の改善（50->97）
とある日に PageSpeed Insights でスコア（モバイル）を確認してみたらヒドイことになっていました。ちなみにパソコンは 98 と高スコア。なぜ….モバイルとパソコンのスコアの乖離は気になりますが、今のモバイルファーストな時代にモバイルのスコアが低いというのは致命的です。
ということで今回紹介している対応をしてみたところ下記のように 50->97 と大改善出来ました。
スコア改善のためにやったこと
実施したことは下記の２点です。一つづつ詳しく見ていきましょう。
- iframe 要素に loading=lazy 属性を追加し遅延読み込みとした。
- プラグイン「Flying Scripts by WP Speed Matters Settings」をインストールし、使われていない Javascript を追加し、読み込まないようにした。
なお以下に今回のことも含めたサイトの構成をまとめております。ご参考になれば幸いです。
https://doc-sin.life/?page_id=2499PageSpeed Insights からの指摘事項
以下が今回指摘された中で一番の遅延（2.4s）の原因のものでした。「使用されていない JavaScript 」というわけで幾つかの URL が示されています。だいたいが google.com のものですね。サブドメインを見ると calender やら map が見られます。これを見た瞬間、最近サイドウェジェットに追加した googlemap と calender が思いつきました。それらは iframe で読み込んでいました。「表示させない」という選択肢は無いので、どうにか改善する方法がないかと思い、見つけたのが次の、loading=lazy の方法でした。
loading=lazy 属性を使った遅延読み込み
当サイトの右側（モバイル版では下方）に配置しているウィジェットに iframe で GoogleMap と GoogleCalender を埋め込んでいますが、これがスコアを下げている一つの原因でした。
両方とも読み込みに非常に時間がかかり、その読み込み時間がサイト全体に影響していました。それを Lazy loading で遅延読み込みすることで表示速度を最適化しました。Lazy loading の詳細はこちらのサイトが参考になると思います。
具体的な設定方法は非常に簡単で、以下のように loading=lazy 属性を付け加えるだけです。（※説明のため実際のコードから一部記述を削除・変更しています。）何か特別なものをインストールや小難しいコードを書く必要はありません。どうやらブラウザが loading=lazy 属性があれば良いように遅延読み込みをしてくれるようです。
<!-- ロードバイクグルメマップ -->
<div class="google_iframe">
<iframe src="https://www.google.com/maps/path" loading=lazy></iframe>
</div>結果、50->78 と大幅スコア改善されました。２箇所の ifreme に loading=lazy って文字列を追加しただけです。効果が絶大です。
使われていない Javascript の対応
iframe を遅延読み込みさせることでスコアは解消しましたが、依然として「使用されていない JavaScript 」が指摘されていました。使用されていないのであれば消せばいいのは？と思いますが、thema や plugin に組み込まれているものなのでそう簡単なことではありません。そこで「Flying Scripts by WP Speed Matters Settings」というプラグインを使うことにしました。これはその Javascript が使われない限りは読み込ませなようにするもので、非常に効果がありそうでした。そこでインストールし以下に、指摘されたものを追加してみたところ…
78->97 と大幅にスコアを改善することが出来ました。
まだまだ改善の余地はあり？
スコアはいい感じになりましたが、スコアの少し下に気になることが書いてありました。
「〜〜に合格していません。」…だと…。
「Cumulative Layout Shift」（CLS）なるものが悪いらしいです。調べてみると予期しないレイアウトのズレらしいです。マジか。まずはどこのレイアウトがズレているか、とその原因調査からですね。ちなみにモバイルのみで、パソコン版はいずれも合格していました。