如何避免鏈接關鍵請求
已發表: 2023-08-03每次運行 PageSpeed Insights 測試時，您是否都會收到“避免鏈接關鍵請求”警告？
嗯，今天就到此結束。
閱讀本指南後，您將了解有關關鍵請求的所有信息、鏈接它們如何影響您的性能，以及最重要的是 - 如何修復“避免鏈接關鍵請求”警告。
- 什麼被視為關鍵請求？
- “避免鏈接關鍵請求”是什麼意思
- 鏈接關鍵請求如何影響您的性能
- 如何避免在 WordPress 上鍊接關鍵請求
- 獎勵：修復“避免鏈接關鍵請求”的其他最佳實踐
請繼續閱讀。
什麼被視為關鍵請求？
關鍵請求是渲染網頁初始視圖所必需的資源。 換句話說 - 首屏加載的所有內容。
例如，當我加載 NitroPack 的主頁時，我在筆記本電腦上看到的內容如下：
所有首屏元素都被認為至關重要，因為根據它們的加載速度，用戶可以獲得良好的體驗或立即跳出。
避免鏈接關鍵請求是什麼意思？
簡而言之，“避免鏈接關鍵請求”警告意味著渲染頁面所需的關鍵資源太大。
就鏈接部分而言，關鍵請求鍊是一系列相互依賴的請求，對於渲染頁面至關重要。 解析和執行請求的順序由關鍵渲染路徑 (CRP) 確定。
關鍵渲染路徑是指 Web 瀏覽器將 HTML、CSS 和 JavaScript 代碼轉換為用戶屏幕上的視覺表示形式所採取的步驟序列。
當瀏覽器開始解析代碼時，它會根據分配的優先級處理關鍵請求：
現在您已經了解了 CRP 是什麼以及瀏覽器如何分配優先級，讓我們回到“關鍵請求鏈”的定義。
由於它是一系列相互依賴的請求，加載大型的、未優化的關鍵請求將不可避免地導致更長的關鍵鏈，從而減慢頁面加載速度。
為了說明這個說法，我們來看下面的例子：
想像一個簡單的網頁，其中包含以下資源：
- index.html –定義頁面結構的主要 HTML 文件。
- styles.css –定義頁面的視覺外觀和佈局。
- main.js –包含向網頁添加交互性和功能的腳本。
- logo.png（圖像文件）
考慮這樣一種情況：每個資源都是長關鍵請求鏈的一部分。 例如，假設 HTML 文件引用了多個 CSS 和 JavaScript 文件，而每個文件又引用了其他資源，從而形成了依賴鏈。
在這種情況下，加載鏈中任何一個資源的延遲都會對關鍵路徑延遲和頁面的整體性能產生級聯影響。
說到網絡性能，讓我們看看哪些指標將受到鏈接關鍵請求的最大影響......
鏈接關鍵請求如何影響您的性能
鏈越長，瀏覽器渲染顯示內容所需的資源所需的時間就越長。
就網絡性能指標而言，這意味著首次內容繪製 (FCP) 和最大內容繪製 (LCP) 較差。
首次內容繪製 (FCP) 失敗
FCP 測量瀏覽器在頁面上可視化第一段 DOM 內容（例如圖像、SVG、非空白畫布元素）所需的時間。
這些元素可能看起來微不足道，但它們對於網站的用戶體驗至關重要。 他們告訴訪問者他們的輸入正在處理並且網站正在加載。 如果頁面在加載前保持空白幾秒鐘，用戶不知道是否發生了某些事情。
為了保證瀏覽器能夠盡快渲染第一段 DOM 內容，關鍵請求鏈必須短而輕。 否則，訪問者因黑屏和 FCP 失敗而退出的可能性會更高。
未通過最大內容油漆 (LCP)
LCP 測量頁面上最大的首屏元素加載所需的時間。
它是三個核心 Web 生命 (CWV) 之一，這是一組以用戶為中心的指標，用於衡量網站的加載時間、視覺穩定性和交互性。 它們也是Google 排名因素。
因此，由於加載長關鍵請求鏈而導致 LCP 分數較低不僅意味著您未達到某些性能指標，而且還意味著：
- 降低通過 CWV 的機會
- 損害您網站的排名
- 提供糟糕的用戶體驗
避免這一切的最可靠方法是通過優化資源的數量和規模來縮短關鍵路徑。
這是如何做到的......
如何避免鏈接關鍵請求（在 WordPress 上）
如果有一個解決“避免鏈接關鍵請求”的單一策略，那麼它將消除渲染阻塞資源。
渲染阻塞資源是當瀏覽器遇到它們時，必須先下載、解析並執行它們，然後再執行其他操作（包括渲染）的文件。
最常被標記為“渲染阻塞”的罪魁禍首是未優化的 CSS 和 JavaScript 文件。
以下技巧將幫助您成功處理這兩個問題：
刪除未使用的 CSS
術語“未使用的 CSS”是指當前頁面上未使用的 CSS 規則。
這些規則使文件變得比必要的大，使您的代碼膨脹，並創建很長的關鍵請求鏈。 因此，您的文件和頁面需要永遠加載。
如果您願意微調代碼，則可以使用 PurifyCSS 等在線工具。
輸入頁面的 URL，該工具會自動刪除不必要的代碼。 然後，您可以下載“純化的”CSS 並將其上傳到您的網站上：
重要提示：更改代碼會隱藏破壞網站設計和功能的風險。 如果您以前沒有技術經驗，請聯繫網絡開發人員或安裝一個會自動為您完成此操作的插件。
單擊按鈕即可刪除未使用的 CSS。 安裝 NitroPack 並自動優化您的網站 →
延遲 JavaScript
推遲 JavaScript 文件允許您僅在必要時加載它們，因此瀏覽器可以首先專注於提供最關鍵的內容（首屏）。
您可以使用async延遲加載 JS 文件 並推遲 屬性。
- 異步
異步加載意味著腳本將在後台獲取，同時頁面的 HTML 解析和渲染繼續進行。
下載腳本後，它會暫停 HTML 解析，立即執行腳本，然後恢復解析。 因此，具有 async 屬性的腳本的執行順序可能無法預測，因為它們可能在不同時間完成加載。
async屬性非常適合您不想阻止頁面加載和呈現的第三方腳本。
- 推遲
defer屬性與 async 一樣，也是異步加載腳本，但執行方式有所不同。
具有 defer 屬性的腳本將在 HTML 解析繼續時在後台下載，但腳本執行將推遲到 HTML 解析完成後。 使用 defer 的腳本的執行順序按照它們在 HTML 中出現的順序進行維護。
當您想要保持腳本在 HTML 中出現的執行順序時，請使用defer屬性。
代碼壓縮和縮小
關鍵請求鏈優化的另一層是減少資源的整體大小，因為這將有助於瀏覽器更快地下載、解析和渲染它們。
實現這一目標的方法是壓縮和縮小文件。
應用壓縮將重寫文件的二進制代碼並使用比原始更少的位對信息進行編碼。
最流行的壓縮工具是 gzip。 Gzipping 的工作原理是查找重複的字符串並將其替換為指向該字符串的第一個實例的指針。 好處是指針比文本佔用更少的空間。
另一方面，縮小會刪除不必要的代碼元素，例如註釋、換行符或空格：
來源： KeyCDN
通過修剪代碼，您可以縮短關鍵請求，從而提高網站速度。
在線有大量免費工具可以幫助您優化代碼大小。 使用它們將要求您輸入代碼，然後復制縮小/壓縮版本並將其粘貼回您的網站。 這裡有一些建議：
- CSS納米
- 頂級 JavaScript 壓縮器
- 代碼美化
修復“避免鏈接關鍵請求”的其他最佳實踐
字體子集化
處理完網站的 CSS 和 JavaScript 資源後，下一個最佳優化對象就是網絡字體。
最容易被忽視的是，網絡字體通常是大文件，需要一段時間才能加載，甚至會阻止文本的渲染。
為了避免這種情況，您需要減小它們的大小，以便瀏覽器可以立即加載它們。
輸入字體子集。
字體子集是一種優化技術，可以從字體中刪除未使用的字形（字符）以大幅減小其大小。
例如，考慮一下您的主頁使用了多少個獨特的字形。 我們敢打賭，他們不會超過 100 個。
從這個角度來看，Font Awesome 是第二大最常用的字體（佔所有網站的 7%），有 26,107 個字符。
資料來源：網絡年鑑
想像一下，通過僅加載特定頁面絕對必要的內容，您可以為瀏覽器和訪問者節省多少時間。
有一些在線工具可以幫助您應用字體子集。 您需要上傳字體文件並選擇要刪除的字形。 然後，返回您的站點並上傳子集文件。
此外，您需要確保每次更新內容時都完成該過程。
重要提示：通過在線工具對字體文件進行子集化可以隱藏優化後頁面上丟失字符的風險。 如果您以前沒有使用過字體，我們強烈建議您聯繫網絡性能專家或安裝一個可以自動為您完成此操作的插件。
無風險地對字體進行子集化。 通過安裝 NitroPack 將其尺寸減小多達 70% →
預加載密鑰請求
使用鏈接 rel=preload 屬性來預加載關鍵請求是另一種優化策略，它將改進您的 FCP 和 LCP，並縮短關鍵路徑。
要確定最關鍵的請求，請通過 PageSpeed Insights 運行您的網站並檢查“預加載密鑰請求”警告：
然後，轉到您的代碼並將鏈接 rel=preload標記添加到特定資源：
不要忘記包含as屬性，以便瀏覽器可以根據預取資源的類型設置預取資源的優先級，並確定它是否已存在於緩存中。
其他資源：檢查 as 值的完整列表。
如何避免使用 NitroPack 鏈接關鍵請求
如果您沒有配備合適的工具，優化關鍵請求鏈可能是一項乏味的任務。
如您所知，在某些情況下，對代碼進行微調可能會適得其反並破壞網站的功能和設計。
但修復單個 PSI 警告不應該是一件令人頭疼的事情。
或者至少 NitroPack 不是這樣。
NitroPack 是一款一體化速度優化工具，可通過應用以下功能來提高您網站的性能：
- 刪除未使用的 CSS
- 延遲 JavaScript
- 字體子集化
以及 32 多種其他經過驗證的優化技術。
使用 NitroPack，無需編碼或以前的技術經驗即可提高網站的性能。
聽起來好得令人難以置信？
讓我們看一下我們客戶的一個網站，其中包含和不包含 NitroPack。
以下是不使用 NitroPack 時的結果：
移動設備上的性能得分為 41，鏈數為 47，關鍵路徑延遲為 3,781 毫秒。
不帶硝基包
以下是 NitroPack 的結果：
95 性能得分，1 條鏈，關鍵路徑延遲縮短 2 倍以上：
帶硝基包
您還可以體驗這一點以及許多其他性能改進。 立即安裝 NitroPack，讓我們為您的網站提供閃電般的速度。