200 の堀から伝わる物語

パフォーマンスが重要 web プロジェクトの成功の重要な要因として、パフォーマンス、特に web ページの速度が強調されます。 第一の目標は、パフォーマンススコアを 100 に保つことです。

開発の方法

• 開発中の継続的なテストには、Google PageSpeed Insights を使用します。
• 高いパフォーマンスを維持するために、既に 100 のスコアを付けたボイラープレートコードを使用してプロジェクトを開始します。
• 結合する前に、プルリクエスト（PR）がパフォーマンス標準を満たしていることを確認します。

主要指標 パフォーマンススコアに大きな影響を与える最大コンテンツペイント（LCP）と合計ブロッキング時間（TBT）の最適化に焦点を当てています。

リソースの管理

• フォントやサードパーティスクリプトなど、必要なリソースをプロジェクトソース内に含めます。
• 読み込み時間を短縮するには、フォントのフォールバックを使用します。
• 初期読み込みパフォーマンスを向上させるために、不要なスクリプトの読み込みを遅延させます。

画像の最適化 折りたたまれた画像より上位の画像の読み込みを優先し、重要な画像には優先度の高い取得の設定を使用します。

導入事例

• CNN.com パフォーマンスを向上させるために、クエリインデックスを最適化し、Google広告の読み込みを遅延させました。
• Herbert ホーム ユーザーがスクロールしたときにデータを読み込み、パフォーマンスとユーザーエクスペリエンスを向上させるために積集合オブザーバー API を使用しました。

ベストプラクティス

• まずボイラープレートコードから始めて、適切に構成されたマークアップを使用します。
• 高度な CSS セレクターを利用し、JavaScript操作を最小限に抑えます。
• モバイルファーストの開発に重点を置きます。
• 作成者にとって直観的なコンテンツ構造を確保する

ツール サイトのパフォーマンススコアの経時的な追跡に、Google シートや DSA などのツールを使用します。