フロントエンドパフォーマンス2021：クイックウィン
公開: 2022-03-10このガイドは、フロントエンドのパフォーマンスモニタリング、セッションの再生、および製品分析を組み合わせて、より良いカスタマーエクスペリエンスを構築するのに役立つ、LogRocketの友人から親切にサポートされています。 LogRocketは、主要なメトリックを追跡します。 DOM完了、最初のバイトまでの時間、最初の入力遅延、クライアントのCPUとメモリの使用量。 今すぐLogRocketの無料トライアルを入手してください。
目次
- 準備：計画と指標
- 現実的な目標の設定
- 環境の定義
- 資産の最適化
- ビルドの最適化
- 配信の最適化
- ネットワーキング、HTTP / 2、HTTP / 3
- テストとモニタリング
- クイックウィン
- 1ページのすべて
- チェックリストをダウンロードする（PDF、Apple Pages、MS Word）
- 1ページのすべて
- チェックリストをダウンロードする（PDF、Apple Pages、MS Word）
- 次のガイドを見逃さないように、メールマガジンを購読してください。
クイックウィン
このリストは非常に包括的であり、すべての最適化を完了するにはかなりの時間がかかる場合があります。 それで、もしあなたが大幅な改善を得るのにたった1時間しかなかったとしたら、あなたはどうしますか？ それをすべて17個のぶら下がっている果物に煮詰めましょう。 明らかに、開始する前と終了したら、3Gおよびケーブル接続での最大のコンテンツフルペイントとインタラクティブまでの時間などの結果を測定します。
- 実世界の経験を測定し、適切な目標を設定します。 最速の競合他社よりも少なくとも20％速くなることを目指してください。 最大のコンテンツフルペイント<2.5秒、最初の入力遅延<100ミリ秒、低速3Gでのインタラクティブまでの時間<5秒、繰り返しの訪問、TTI <2秒以内にとどまります。 少なくとも最初の満足のいくペイントとインタラクティブまでの時間のために最適化します。
- Squoosh、mozjpeg、guetzli、pingo、SVGOMGを使用して画像を最適化し、画像CDNを使用してAVIF / WebPを提供します。
- メインテンプレート用の重要なCSSを準備し、各テンプレートの
<head>にインライン化します。 CSS / JSの場合、最大の重要なファイルサイズバジェット内で動作します。 170KB gzip圧縮（0.7MB解凍）。 - スクリプトのトリミング、最適化、延期、遅延読み込み。 バンドラーの構成に投資して、冗長性を取り除き、軽量の代替案を確認します。
- 静的アセットは常にセルフホストし、サードパーティのアセットは常にセルフホストすることを好みます。 サードパーティのスクリプトの影響を制限します。 ファサードを使用し、インタラクションでウィジェットをロードし、ちらつき防止スニペットに注意してください。
- フレームワークを選択するときは選択してください。 シングルページアプリケーションの場合、重要なページを特定して静的に提供するか、少なくとも事前にレンダリングし、コンポーネントレベルでプログレッシブハイドレーションを使用し、インタラクションでモジュールをインポートします。
- クライアント側のレンダリングだけでは、パフォーマンスを向上させることはできません。 ページがあまり変更されていない場合は事前レンダリングし、可能であればフレームワークの起動を延期します。 可能であれば、ストリーミングサーバー側レンダリングを使用してください。
-
<script type="module">およびmodule / nomoduleパターンを持つレガシーブラウザにのみレガシーコードを提供します。 - CSSルールを再グループ化して、本体のCSSをテストしてみてください。
- リソースヒントを追加して、より高速な
dns-lookup、preconnect、prefetch、preload、prerender。 - Webフォントをサブセット化して非同期にロードし、CSSの
font-displayを利用して最初のレンダリングを高速化します。 - HTTPキャッシュヘッダーとセキュリティヘッダーが正しく設定されていることを確認してください。
- サーバーでBrotli圧縮を有効にします。 （それが不可能な場合は、少なくともGzip圧縮が有効になっていることを確認してください。）
- サーバーがLinuxカーネルバージョン4.9以降で実行されている限り、TCPBBR輻輳を有効にします。
- 可能であれば、OCSPステープリングとIPv6を有効にします。 常にOCSPステープルDV証明書を提供します。
- HTTP / 2のHPACK圧縮を有効にし、利用可能な場合はHTTP / 3に移動します。
- フォント、スタイル、JavaScript、画像などのアセットをServiceWorkerキャッシュにキャッシュします。
チェックリストのダウンロード（PDF、Apple Pages）
このチェックリストを念頭に置いて、あらゆる種類のフロントエンドパフォーマンスプロジェクトに備える必要があります。 チェックリストの印刷可能なPDFと、編集可能なApple Pagesドキュメントをダウンロードして、ニーズに合わせてチェックリストをカスタマイズしてください。
- チェックリストPDFをダウンロード（PDF、166 KB）
- Apple Pagesのチェックリストをダウンロードする（.pages、275 KB）
- MS Wordのチェックリストをダウンロードする（.docx、151 KB）
別の方法が必要な場合は、Dan Rublicによるフロントエンドチェックリスト、Jon Yablonskiによる「Designer'sWeb Performance Checklist」、およびFrontendChecklistを確認することもできます。
オフウィーゴー！
最適化の一部は、作業や予算の範囲を超えているか、処理する必要のあるレガシーコードを考えるとやり過ぎかもしれません。 それはいいです！ このチェックリストを一般的な（そしてできれば包括的な）ガイドとして使用し、コンテキストに適用される問題の独自のリストを作成してください。 しかし、最も重要なことは、最適化する前に、独自のプロジェクトをテストおよび測定して問題を特定することです。 みんな、2021年にハッピーパフォーマンスを達成！
目次
- 準備：計画と指標
- 現実的な目標の設定
- 環境の定義
- 資産の最適化
- ビルドの最適化
- 配信の最適化
- ネットワーキング、HTTP / 2、HTTP / 3
- テストとモニタリング
- クイックウィン
- 1ページのすべて
- チェックリストをダウンロードする（PDF、Apple Pages、MS Word）
- 1ページのすべて
- チェックリストをダウンロードする（PDF、Apple Pages、MS Word）
- 次のガイドを見逃さないように、メールマガジンを購読してください。
Guy Podjarny、Yoav Weiss、Addy Osmani、Artem Denysov、Denys Mishunov、Ilya Pukhalski、Jeremy Wagner、Colin Bendell、Mark Zeman、Patrick Meenan、Leonardo Losoviz、Andy Davies、Rachel Andrew、Anselm Hannemann、Barry Pollard、 Hamann、Gideon Pyzer、Andy Davies、Maria Prosvernina、Tim Kadlec、Rey Bango、Matthias Ott、Peter Bowyer、Phil Walton、Mariana Peralta、Pepijn Senders、Mark Nottingham、Jean Pierre Vincent、Philipp Tellis、Ryan Townsend、Ingrid Bergman、Mohamed Hussain SH、JacobGroß、Tim Swalling、Bob Visser、Kev Adamson、Adir Amsalem、Aleksey Kulikov、Rodney Rehm、およびこの記事をレビューしてくれた素晴らしいコミュニティ、そしてパフォーマンス最適化の作業から学んだ技術と教訓を誰もが使用できるように共有している素晴らしいコミュニティ。 あなたは本当に粉砕しています！