2021 年前端性能：快速獲勝

已發表: 2022-03-10
快速總結↬讓2021年……快點！ 一份年度前端性能清單，包含您在當今 Web 上創建快速體驗所需了解的所有內容，從指標到工具和前端技術。 自 2016 年以來更新。

目錄

  1. 準備：計劃和指標
  2. 設定切合實際的目標
  3. 定義環境
  4. 資產優化
  5. 構建優化
  6. 交付優化
  7. 網絡、HTTP/2、HTTP/3
  8. 測試和監控
  9. 快速獲勝
  10. 一切都在一頁上
  11. 下載清單（PDF、Apple Pages、MS Word）
  12. 一切都在一頁上
  13. 下載清單（PDF、Apple Pages、MS Word）
  14. 訂閱我們的電子郵件通訊不要錯過下一個指南。

快速獲勝

這個列表非常全面，完成所有優化可能需要相當長的時間。 那麼，如果你只有 1 小時的時間來獲得顯著的改進，你會怎麼做？ 讓我們把它歸結為17 種容易獲得的果實。 顯然，在開始之前和完成後，測量結果，包括最大內容繪製和 3G 和電纜連接上的交互時間。

  1. 衡量現實世界的體驗並設定適當的目標。 目標是比你最快的競爭對手至少快 20%。 保持在最大內容繪製 < 2.5 秒內，首次輸入延遲 < 100 毫秒，在慢速 3G 上交互時間 < 5 秒，重複訪問，TTI < 2 秒。 至少優化首次內容繪製和交互時間。
  2. 使用 Squoosh、mozjpeg、guetzli、pingo 和 SVGOMG 優化圖像，並使用圖像 CDN 提供 AVIF/WebP。
  3. 為您的主模板準備關鍵的 CSS，並將它們內聯在每個模板的<head>中。 對於 CSS/JS，在最大的關鍵文件大小預算內運行。 170KB gzipped（0.7MB 解壓）。
  4. 修剪、優化、延遲和延遲加載腳本。 投資捆綁器的配置以消除冗餘並檢查輕量級替代方案。
  5. 始終自託管您的靜態資產，並且始終更喜歡自託管第三方資產。 限制第三方腳本的影響。 使用外觀，在交互中加載小部件並註意防閃爍片段。
  6. 選擇框架時要有選擇性。 對於單頁應用程序，識別關鍵頁面並靜態提供它們，或者至少預渲染它們，並在組件級別使用漸進式水合併在交互時導入模塊。
  7. 單獨的客戶端渲染對於性能來說並不是一個好的選擇。 如果您的頁面沒有太大變化，請預渲染，如果可以，請推遲啟動框架。 如果可能，請使用流式服務器端渲染。
  8. 僅向具有<script type="module">和 module/nomodule 模式的舊版瀏覽器提供舊版代碼。
  9. 嘗試重新組合 CSS 規則並測試 in-body CSS。
  10. 添加資源提示以通過更快dns-lookup 、 preconnect 、 prefetch 、 preload和prerender加快交付。
  11. 子集網絡字體並異步加載它們，並利用 CSS 中的font-display進行快速首次渲染。
  12. 檢查 HTTP 緩存標頭和安全標頭是否設置正確。
  13. 在服務器上啟用 Brotli 壓縮。 （如果這不可能，至少確保啟用 Gzip 壓縮。）
  14. 只要您的服務器在 Linux 內核版本 4.9+ 上運行，就啟用 TCP BBR 擁塞。
  15. 如果可能，啟用 OCSP 裝訂和 IPv6。 始終提供 OCSP 裝訂的 DV 證書。
  16. 為 HTTP/2 啟用 HPACK 壓縮，如果可用，請移至 HTTP/3。
  17. 在 Service Worker 緩存中緩存字體、樣式、JavaScript 和圖像等資產。

下載清單（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's Web Performance Checklist”和 FrontendChecklist。

我們走吧！

一些優化可能超出了您的工作或預算範圍，或者考慮到您必須處理的遺留代碼可能只是過度殺傷力。 沒關係！ 將此清單用作一般（希望是全面的）指南，並創建您自己的適用於您的上下文的問題列表。 但最重要的是，在優化之前測試和測量您自己的項目以識別問題。 祝大家2021年業績好！

目錄

  1. 準備：計劃和指標
  2. 設定切合實際的目標
  3. 定義環境
  4. 資產優化
  5. 構建優化
  6. 交付優化
  7. 網絡、HTTP/2、HTTP/3
  8. 測試和監控
  9. 快速獲勝
  10. 一切都在一頁上
  11. 下載清單（PDF、Apple Pages、MS Word）
  12. 一切都在一頁上
  13. 下載清單（PDF、Apple Pages、MS Word）
  14. 訂閱我們的電子郵件通訊不要錯過下一個指南。

非常感謝 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、Patrick哈曼、吉迪恩·派澤、安迪·戴維斯、瑪麗亞·普羅斯維尼娜、蒂姆·卡德萊克、雷伊·班戈、馬蒂亞斯·奧特、彼得·鮑耶、菲爾·沃爾頓、瑪麗安娜·佩拉爾塔、佩皮恩·森德斯、馬克·諾丁漢、讓·皮埃爾·文森特、菲利普·泰利斯、瑞恩·湯森、英格麗·褒曼、穆罕默德·侯賽因SH、Jacob Groß、Tim Swalling、Bob Visser、Kev Adamson、Adir Amsalem、Aleksey Kulikov 和 Rodney Rehm 對本文的審閱，以及我們出色的社區分享了從性能優化工作中獲得的技術和經驗教訓，供大家使用. 你真的很牛逼！