PageSpeed Insights 対策 まとめ
PageSpeed Insights の対策はほぼ完了したので,この辺でまとめておきます.
(と言っても,必要に応じて随時内容は更新しています.)
恐らく,このページはホームページのデザイナーがアクセスされることが多いと思いますが,企業のホームページ担当者だけでなく,デザイナーの方もご相談あれば,下のフォームからお問い合わせください.
PageSpeed Insight の情報が増えたそもそもの始まりは,サーチコンソールで「速度(試験運用版)」というページが表示されるようになったことに始まる.
「速度(試験運用版)」は実際に Chrome で接続している人々のスピードを集計して出しているらしい.

それに対して,PageSpeed Insights は時間帯によって点数が変わったりするので,再現性は完全にはないが,警告に関してはサーバーのスピードには関係なく評価してくれる.
よって,少なくとも警告は出ないような状態にするのが望ましい.
以下,対策をどのようにとったかを説明したページへのリンクを張っておきます.
参考にしてください.
また,この PageSpeed Insights のスコアはここでスコアの原因となる要因以外の基本的な検索単語に対するマッチ度合が同じぐらいのページを比較した際に検索順位に影響するぐらいと考えていたほうが良い.
ウェブマスター向け公式ブログにも
「魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります」
と書いてあります.
目次 [閉じる]
各項目への対策
動画を埋め込んでいてスピードが遅い場合
画面に見えていない画像は読み込まないで高速化をはかる方法
画像を少しでも軽くしたい場合
ウェブフォントを使っている場合,代替を用意する
最大コンテンツが表示されるまでの時間に関して
LCP (Largest Contentful Paint) について
ページ表示中に位置がずれないようにする
CLS (Cumulative Layout Shift) について
入力できるようになるまでの時間を短縮する
キャッシュを設定して高速化する
「静的なアセットと効率的なキャッシュポリシーの配信」について
便利ツール
元ネタは lighthouse ということですが,これには chrome の拡張機能が存在している.
これを使うと簡単にもっと詳細にページの評価をしてもらえる.