皆さんこんにちは！最後にブログを書いてからかなり時間が経ちましたが、正直言って、少し悲しいです。現実には、学ばなければならないことがたくさんあり、すべてを学ぶには時間が足りないと感じることがあります。それにしても、誰が冗談でしょう？実を言うと、最近は先延ばしにすることが多いんです。

しかし最近、私はフロントエンド開発者にとって重要なテーマである Web パフォーマンスについて調査しており、学んだことを共有できることに興奮しています。 パフォーマンスの最適化は、正しく実行すると、Web サイトや Web アプリのユーザー体験に大きな違いをもたらす可能性があるものの 1 つです。ユーザー エクスペリエンスが向上するだけでなく、SEO も向上し、コンバージョン率にも影響を与える可能性があります。

それでは、早速見ていきましょう!

Web パフォーマンスが重要な理由

今日のペースの速い世界では、ユーザーは Web サイトが迅速に読み込まれ、スムーズに操作できることを期待しています。サイトが遅いとユーザーは離れてしまいます。それはとても簡単なことです。研究によると、わずか数秒の遅延でも直帰率が高くなり、エンゲージメントが低下する可能性があります。フロントエンド開発者として、私たちはアプリケーションの見栄えを良くするだけでなく、さまざまな条件下で適切に動作することを保証する責任があります。

パフォーマンスの測定に関しては、Google がゴールドスタンダードとみなされます。 Google は、開発者が Web サイトのパフォーマンスを追跡および改善するのに役立つ、Core Web Vitals として知られる一連の主要な指標を提供しています。それらを詳しく見てみましょう:

主の言うとおり Google パフォーマンスにはこれらのことが重要です

• FCP (最初のコンテンツフル ペイント)
• LCP (最大のコンテンツフル ペイント)
• CLS (累積レイアウト シフト)
• TTI (インタラクティブまでの時間)
• INP (次のペイントへのインタラクション)

さらに詳しく見てみましょう

FCP (最初のコンテンツフル ペイント)

測定内容: FCP は、ユーザーがページに移動した後、最初のコンテンツ (テキスト、画像など) が画面に表示されるまでにかかる時間を測定します。これは、ページが読み込まれているというフィードバックをユーザーに提供するため、重要な指標です。 FCP が速いほど、ユーザー エクスペリエンスは向上します。

FCP を改善する方法:

レンダリング ブロック リソースの最小化: 同期 JavaScript や CSS など、ページのレンダリングをブロックするリソースを削減または削除します。重要なリソースには を使用します。

Defer Non-Critical JavaScript: 重要でないスクリプトには defer または async 属性を使用して、初期ペイントをブロックしないようにします。

*サーバーサイド レンダリング (SSR) を使用する: * SSR は、特に動的コンテンツの場合、最初の HTML をより速く配信するのに役立ち、ユーザーは意味のあるコンテンツをより早く見ることができます。

CSS 配信の最適化: CSS のサイズを最小化し、重要な CSS をインライン化して、ブラウザーがコンテンツをより速く表示できるようにします。

コンテンツ配信ネットワーク (CDN) を使用する: CDN から静的アセットを提供して、遅延を削減し、リソース配信を高速化します。

LCP (最大のコンテンツフル ペイント)

測定内容: LCP は、最大の要素 (通常はヒーロー画像、大きなテキスト ブロック、またはビデオ) がビューポート内で完全にレンダリングされるのにかかる時間に焦点を当てています。最大のコンテンツが読み込まれると、ユーザーはページの準備が完了したと考えるため、これは体感的な読み込み速度の優れた指標となります。高速なエクスペリエンスを実現するには、LCP を 2.5 秒 未満に抑えることを目指してください。

LCP を改善する方法:

画像の最適化と圧縮: WebP などの最新の画像形式を使用し、画像を圧縮し、srcset 属性とsize 属性を使用して適切な画像サイズが提供されるようにします。

スクロールせずに見える画像の遅延読み込み: すぐに表示されない画像の遅延読み込みを実装して、スクロールせずに見えるコンテンツの読み込みを優先します。

重要なリソースのプリロード: タグを使用すると、フォント、ヒーロー画像、大きなメディア ファイルなどの重要なリソースをより迅速にロードできます。

レンダリングをブロックする CSS を最小限に抑える: FCP と同様に、レンダリングをブロックする可能性のある大きな CSS ファイルの使用を最小限に抑えます。

サードパーティのスクリプトを減らす: サードパーティの広告、分析、またはその他のスクリプトにより、LCP の速度が低下する可能性があります。必須ではないスクリプトを延期または非同期的に読み込みます。

CLS (累積レイアウト シフト)

測定内容: CLS はページの視覚的な安定性を測定します。何かを読んでいるときに、突然レイアウトが変わって、場所を見失ったり、間違ったボタンをクリックしたりしたことはありませんか?それは悪いCLSスコアです。 CLS は、読み込みプロセス中にページ上の要素がどれだけ予期せず移動するかを追跡します。特にモバイルでのスムーズなユーザー エクスペリエンスには、低い CLS が不可欠です。

CLS を改善する方法:

画像とビデオのサイズを設定する: 画像には常に幅と高さの属性を含めるか、CSS アスペクト比ボックスを使用してメディア要素を読み込む前にスペースを確保します。

既存のコンテンツの上にコンテンツを挿入することを避ける: 絶対に必要な場合 (広告など) を除き、既存のコンテンツの上にコンテンツを動的に追加することは避けてください。

フォント読み込み戦略を使用する: カスタム フォントを読み込むときは、font-display: swap; を使用します。フォントの読み込みによるレイアウトのずれを避けるため。

スペースのない新しい広告やポップアップの挿入を避ける: 予期しない変化を避けるために、動的に読み込まれる広告、バナー、またはポップアップがレイアウト スペースに考慮されていることを確認してください。

画像と同じスペースの画像プレースホルダーまたはローダーを使用する

TTI (インタラクティブまでの時間)

測定内容: TTI は、ページが完全にインタラクティブになるまでにかかる時間を測定します。これは、すべてのボタン、入力、リンクが使用可能であり、メインスレッドがユーザー入力に自由に応答できることを意味します。高速 TTI により、ユーザーはサイトの動作が遅い、応答しないなどと感じることなく、コンテンツに素早くアクセスできます。

TTI を改善する方法:

JavaScript 実行時間の短縮: 大規模な JavaScript バンドルを分割し、最初のインタラクションに必要なスクリプトのみをロードします。 React でのコード分割 (React.lazy() を使用) または JavaScript での動的インポートを使用します。
Web ワーカーを使用する: メイン スレッドの応答性を維持するために、重い非 UI ブロッキング タスクを Web ワーカーにオフロードします。
長いタスクを延期する: 長い JavaScript タスクを小さなタスクに分割して、メインスレッドが長時間ブロックされないようにする。
重要なリソースのプリロード: TTI の遅延を回避するために、対話性に必要な必須リソース (スクリプト、スタイル) がプリロードされていることを確認します。
CSS と JavaScript の最適化: 重要なコードを縮小、圧縮し、優先順位を付けます。ツリーシェイキングを使用してデッドコードを排除し、スクリプトの実行を高速化します。 GZIP または BROTLI 圧縮メカニズムを使用する

INP (次のペイントへのインタラクション)

測定内容: 比較的新しい指標である INP は、ページがユーザー操作 (ボタンのクリック、スクロール、入力など) に応答し、それに応じて UI を更新するまでにかかる時間を追跡します。これは、初期読み込みだけでなく全体的なインタラクティブ性を測定するのに役立ち、ユーザー セッション全体を通じてアプリがスムーズに動作することを保証します。

INP を改善する方法:

入力遅延の削減: メインスレッドをブロックする長い JavaScript タスクを回避することで、ユーザー入力 (クリック、キー押下) が迅速に処理されるようにします。

入力応答性の優先順位: requestAnimationFrame または requestIdleCallback を使用して、アイドル時間中に緊急でない作業を処理し、対話処理のためにメイン スレッドを開いたままにします。

デバウンスとスロットルを使用する: 頻繁なユーザー操作 (スクロールや入力など) を処理するときは、イベント ハンドラーをデバウンスまたはスロットルして、UI が応答しなくなるのを防ぎます。

Lazy Load Non-Critical Code: 最初の対話が終わるまで、重要ではない機能の読み込みを延期します。
たとえば、React.lazy() と Suspense.

これらの戦略に従うことで、これらの主要な指標を大幅に改善し、より高速で応答性の高いユーザー エクスペリエンスを提供できます。これらの最適化は、特に一緒に適用すると、サイトが Google の Core Web Vitals テストに合格するだけでなく、ユーザーに優れたエクスペリエンスを提供できるようになります

このブログが役に立ち、次のパフォーマンス向上戦略に役立ついくつかの重要な洞察が得られたことを願っています。

パフォーマンス、Web セキュリティ、React、Angular、Vue に関するさらに素晴らしいブログについては、フォローしてください