提升 Web 效能：前端開發人員指南

大家好！自從我上次寫部落格以來已經有一段時間了，我承認，這讓我有點難過。現實是，有太多東西需要學習，有時感覺永遠沒有足夠的時間深入了解所有內容。我在跟誰開玩笑？事實是，我最近拖延得很厲害。

但最近，我一直在探索網路效能——這對於任何前端開發人員來說都是一個至關重要的主題——我很高興分享我所學到的東西。 效能最佳化 是其中之一，如果做得正確，可以使用戶體驗您的網站或網路應用程式的方式發生巨大變化。它不僅可以改善用戶體驗，還可以提高搜尋引擎優化，甚至可以影響轉換率。

那麼，讓我們開始吧！

為什麼網路效能很重要

在當今快節奏的世界中，使用者希望網站能夠快速載入並流暢互動。如果您的網站速度很慢，用戶就會離開——就這麼簡單。研究表明，即使是幾秒鐘的延遲也會導致更高的跳出率和更低的參與。作為前端開發人員，我們有責任確保我們的應用程式不僅看起來不錯，而且在各種條件下都表現良好。

在衡量效能方面，Google 通常被認為是黃金標準。 Google 提供了一組稱為 Core Web Vitals 的關鍵指標，可協助開發人員追蹤並提高其網站的效能。讓我們來分解一下：

根據主Google這些事情對表現很重要

• FCP（首次內容繪製）
• LCP（最大內容油漆）
• CLS（累積版面偏移）
• TTI（互動時間）
• INP（與下一個繪畫的交互）

讓我們更仔細地探索它們

FCP（首次內容繪製）

測量內容： FCP 測量使用者導航到您的頁面後第一個內容（文字、圖像等）出現在螢幕上所需的時間。這是一個關鍵指標，因為它向用戶提供頁面正在加載的回饋。 FCP越快，使用者體驗就越好。

如何改善 FCP：

最小化渲染阻塞資源：減少或消除阻塞頁面渲染的資源，例如同步 JavaScript 或 CSS。使用 取得關鍵資源。

延遲非關鍵 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 Workers： 將繁重的非 UI 阻塞任務卸載給 Web Workers，以保持主執行緒回應。
延後長任務： 將長 JavaScript 任務分割為更小的任務，以避免阻塞主執行緒太久。
預先載入關鍵資源：確保預先載入互動所需的基本資源（腳本、樣式），以避免 TTI 延遲。
優化 CSS 和 JavaScript： 縮小、壓縮基本程式碼並確定其優先順序。使用樹搖動來消除死程式碼並確保更快的腳本執行。使用GZIP或BROTLI壓縮機制

INP（與下一個繪畫的交互）

測量內容： INP 是一個相對較新的指標，它追蹤頁面回應使用者互動（如點擊按鈕、捲動或鍵入）並相應更新 UI 所需的時間。它有助於衡量初始負載之外的整體互動性，確保您的應用程式在整個使用者會話期間保持敏捷。

如何提升INP：

減少輸入延遲：避免阻塞主執行緒的長 JavaScript 任務，確保快速處理使用者輸入（點擊、按鍵）。

優先輸入回應性：使用 requestAnimationFrame 或 requestIdleCallback 在空閒時間處理非緊急工作，讓主執行緒保持開放狀態以進行互動處理。

使用去抖動和限制：處理頻繁的使用者互動（如捲動或打字）時，對事件處理程序進行去抖動或限制以防止 UI 變得無回應。

延遲載入非關鍵程式碼：將非關鍵功能的載入延後到初始互動之後。
例如，您可以使用 React.lazy() 和 Suspense 在 React 中延遲載入元件。

透過遵循這些策略，您可以顯著改善這些關鍵指標並提供更快、更靈敏的使用者體驗。這些優化（尤其是一起應用程式時）有助於確保您的網站不僅通過 Google 的 Core Web Vitals 測試，而且為您的用戶提供卓越的體驗

我希望您發現此部落格有用，並且您能夠從中獲得一些關鍵見解，以幫助您制定下一個績效改進策略。

更多關於效能、網路安全、React、Angular、Vue 的精彩部落格請繼續關注我

以上是提升 Web 效能：前端開發人員指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！