WEBサイトを
浄化する煩悩にまみれたWEBサイトを
真っ白に浄化する

WEBサイトも浄化しましょう。

今年一年を無事に歩むために
もう新年の気分は抜けきったと思いますが、サイトも今年一年を問題なく歩んでいけるように浄化したいと思います。
さて、WEBサイトを永く運用していると、いろいろ不要な要素がたまってきます。人間の体でいうとデトックス（浄化）ですか。老廃物の排出。
WEBサイトの老廃物にあたるのは、例えば、外部読み込みファイル。fontawsomなんかは、アイコンをたった一つ使うためでも何メガも必要になります。
jQuery とか、あとGoogleアナリティクスのコード、これなんか初期読み込みの必要はないものです。また、画像もPNGやJPGをwebpにするだけで、ものによっては半分になります。

浄化の目的って何だい

直近はやっぱりpageSpeedInsights
WEBサイトを浄化する直近の目標はgoogleのpageSpeedInsightsで90点以上をとるということになります。
最終的なゴールは聞こえのいい、もっと崇高なものでもいいんですが(笑)。
実際にpageSpeedInsightsの高得点はGoogle検索に効果があるだけでなく、サイトの問題改善に非常に有益です。
PageInsightsをまだ使われたことがない方はいないとは思いますがpageSpeedInsightsでは以次の5つの指標で診断してくれます。

pageSpeedInsightsの５つの指標

つまり浄化の5つの指標
1. FCP (First Contentful Paint) - 最初のコンテンツの描画

2. SI (Speed Index) - スピード指数

3. LCP (Largest Contentful Paint) - 最大のコンテンツの描画

4. TBT (Total Blocking Time) - 総ブロック時間

5. CLS (Cumulative Layout Shift) - 累積レイアウトシフト

5つの指標それぞれの解説

1. FCP (First Contentful Paint) - 最初のコンテンツの描画
FCPは、ユーザーがページを開いてから最初のコンテンツが表示されるまでの時間を測定します。
これは、画像、テキスト、またはDOMの要素などの最初のコンテンツがユーザーの画面に描画されるまでの時間です。
FCPの値が小さいほど、ユーザーはより早くコンテンツを見ることができます。

2. SI (Speed Index) - スピード指数

SIは、ページの読み込みが進むにつれて画面上に表示される可視要素の変化を測定します。
SIは時間の経過に応じて計算され、ユーザーにとってページがどれだけ速く表示されているかを示す数値です。
SIの値が小さいほど、ページの読み込みが早く進んでいることを示します。

3. LCP (Largest Contentful Paint) - 最大のコンテンツの描画

LCPは、ページ上で最も大きな要素（テキスト、画像、ビデオなど）が画面に表示されるまでの時間を測定します。
この指標は、ユーザーが重要なコンテンツを見るために待たされる時間を示します。
LCPの値が小さいほど、ユーザーは重要なコンテンツを早く表示されることになります。

4. TBT (Total Blocking Time) - 総ブロック時間
TBTは、ブラウザが応答しなくなり、ユーザーの入力がブロックされる時間の合計を測定します。
これは、JavaScriptの実行がメインスレッドを占有し、ユーザーの操作に応答する能力を妨げる時間です。
TBTの値が小さいほど、ユーザーはスムーズな操作体験を得ることができます。

5. CLS (Cumulative Layout Shift) - 累積レイアウトシフト
CLSは、ページの読み込み中や操作中に、予期しない要素の移動が起きる度合いを測定します。
これにより、ユーザーがコンテンツに意図した操作を行いにくくなる問題を検出します。
CLSの値が小さいほど、ユーザーは安定した表示を維持しやすくなります。

5つの指標それぞれの対策

それぞれの対策とはいっても、お互いに密接に関連している
Googleの5つのパフォーマンス指標（FCP、SI、LCP、TBT、CLS）は、それぞれ独立した測定項目ではありますが、密接に関連しています。
特に、特定の指標を改善しようとした施策が他の指標にも影響を与える場合が多くあります。
その関連性を理解することは、Webパフォーマンスを総合的に改善するうえで非常に重要です。

1. FCP
こちらの対策はファーストビューの描画以外をいかに読み込まないようにするかファーストビューの描画に必要な要素をいかに小さくするかという点が重要な対策になります。
FCPが遅い場合、最初の意味のあるコンテンツの読み込みが遅れるため、LCPも遅くなりがちです。
LCPは「最大のコンテンツ」が描画される時間を測定する指標ですが、FCPとLCPが同じ画像や要素に依存することが多いです。
FCPが早ければ、Speed Index（以後SI。表示コンテンツが完全に視覚的に整う速度）も改善します。
SIはビューポート内の描画進捗を測定するため、FCPのタイミングが早いほど、SIにもポジティブな影響を与えます。
JavaScriptのブロッキングが多い場合、FCPもTBTも悪化します。
たとえば、FCPのために必要な初期HTML/CSS/フォント読み込みがJavaScriptでブロックされると、FCPが遅くなり、それがTBTのスコアにも影響します。

2. SI
SIは、ビューポート内のコンテンツがどれだけ早く視覚的に完成するかを示します。
メインスレッドがJavaScriptによって長時間ブロックされると、ページの描画プロセス全体が遅延し、SIが悪化します。
しかし、この指標は他の対策が効果を上げると相対的に数値が低くなるので特に対策は必要ありません。

3. LCP
こちらもFCPと同様に、いかに要素のサイズを小さくするかが重要になります。
特に画像、動画をいかに圧縮するかが重要です。
たとえばFCPが早くても、LCPに該当するコンテンツ（例: ヒーロー画像）が後回しにされると、LCPが遅くなります。
逆に、LCPの要素が最初のコンテンツである場合、FCPとLCPのタイミングはほぼ一致します。
LCPの要素が描画されるまでの時間が遅いと、SIにも影響を与えます。
LCPはビューポート内の大きな要素に依存するため、遅延がSIスコアを引き下げる可能性があります。
LCPに該当する画像やフォント、CSSがJavaScriptでブロックされている場合、TBTが長くなると同時にLCPも遅れます。

4. TBT
JavaScriptがメインスレッドを長時間ブロックすると、最初のコンテンツの描画（FCP）が遅れます。
特に初期ロード時に多くのスクリプトを実行する場合、FCPが悪化します。
JavaScriptの最適化には、冗長なコードや重い処理を特定し、効率的なコードに置き換えます。
また、JavaScriptファイルの結合や最小化も検討します。
非同期処理の最適化のためには、非同期タスク（例：イベントハンドラ、APIリクエスト）を最適化し、長時間実行されるタスクを分割してブロッキング時間を削減します。
レンダリングの最適化にはレンダリングのブロッキング要因を特定し、CSSの最適化、非同期スクリプトの使用、画像の遅延ロードなどの手法を検討します。

5. CLS
画像や動画の読み込み中にサイズが確定していない場合、後からページがリレイアウトされてしまい、CLSが発生することがあります。
これを防ぐためには画像・動画・動的コンテンツが挿入される領域を固定して、事前にスペースを確保します。
このために挿入される要素の正確なサイズを事前に設定しておきます。
img要素やvideo要素にwidthとheight属性を指定し、表示領域を事前に確保します。
ほかに、CSSのaspect-ratioプロパティを活用します。要素の高さを自動で算出するのに非常に有効です。

/* aspect-ratioのサンプル */
img {
  aspect-ratio: 3 / 2; /* 幅:高さの比率を指定 */
}

WEBフォント
WEBフォントの読み込み時もCLSが発生します。この場合は、font-display: swapを使用してウェブフォントが読み込まれるまで、システムフォントで代替表示します。これはgoogle fontの場合は埋め込みコードに最初から記載があります。

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

また事前にウェブフォントをプリロードするやり方もあります。

その他Google AdSenseなどの広告では、「固定サイズ」または「レスポンシブ広告の推奨コード」を使用することも効果があります。