PageSpeed Insights 対策まとめ

2020年1月11日 HTML&CSS, 知識

PageSpeed Insights の対策はほぼ完了したので，この辺でまとめておきます．

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

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

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

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

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

各項目への対策

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

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

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

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

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

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

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

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

便利ツール

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

chrome の拡張機能 Lighthouse

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