PageSpeed Insights 対策まとめ

PageSpeed Insights の対策はほぼ完了したので，この辺でまとめておきます．
(と言っても，必要に応じて随時内容は更新しています．)

恐らく，このページはホームページのデザイナーがアクセスされることが多いと思いますが，企業のホームページ担当者だけでなく，デザイナーの方もご相談あれば，下のフォームからお問い合わせください．

PageSpeed Insight の情報が増えたそもそもの始まりは，サーチコンソールで「速度（試験運用版）」というページが表示されるようになったことに始まる．

「速度（試験運用版）」は実際に Chrome で接続している人々のスピードを集計して出しているらしい．

それに対して，PageSpeed Insights は時間帯によって点数が変わったりするので，再現性は完全にはないが，警告に関してはサーバーのスピードには関係なく評価してくれる．

よって，少なくとも警告は出ないような状態にするのが望ましい．

以下，対策をどのようにとったかを説明したページへのリンクを張っておきます．
参考にしてください．

また，この PageSpeed Insights のスコアはここでスコアの原因となる要因以外の基本的な検索単語に対するマッチ度合が同じぐらいのページを比較した際に検索順位に影響するぐらいと考えていたほうが良い．
ウェブマスター向け公式ブログにも
「魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります」
と書いてあります．

各項目への対策

動画を埋め込んでいてスピードが遅い場合

Youtube の動画を複数埋め込みしたページの高速化

画面に見えていない画像は読み込まないで高速化をはかる方法

オフスクリーン画像の遅延読み込み

画像を少しでも軽くしたい場合

次世代フォーマットでの画像の配信

ウェブフォントを使っている場合，代替を用意する

ウェブフォント読み込み中の全テキストの表示

最大コンテンツが表示されるまでの時間に関して

LCP (Largest Contentful Paint) について

ページ表示中に位置がずれないようにする

CLS (Cumulative Layout Shift) について

入力できるようになるまでの時間を短縮する

FID (First Input Delay) について

キャッシュを設定して高速化する

「静的なアセットと効率的なキャッシュポリシーの配信」について

便利ツール

元ネタは lighthouse ということですが，これには chrome の拡張機能が存在している．

chrome の拡張機能 Lighthouse

これを使うと簡単にもっと詳細にページの評価をしてもらえる．