如何消除渲染阻塞資源 | WP愛好者

已發表: 2021-12-10

如果您聽到有關您網站加載速度的投訴或希望更快地加載您的網頁並改善您的用戶體驗，您可能需要考慮如何消除渲染阻塞資源。

無論出於何種原因，網站出現在訪問者面前的速度有多快都會影響用戶體驗並導致您的企業錯失客戶連接。 用戶的網站體驗主要取決於關鍵的渲染路徑和在渲染過程中管理網站加載的腳本。

什麼是渲染？

所有網站都遵循用戶查看其內容並與之交互的路徑。 加載網站的路徑稱為關鍵渲染​​路徑。 該路徑描述了每個站點為訪問者及其瀏覽器收集和構建數據的步驟。

瀏覽器在渲染之前做什麼

firefox 桌面瀏覽器圖片
FireFox 桌面瀏覽器

輸入網站 URL 會觸發以下過程：

  1. 當用戶請求特定 URL 時，導航完成。
    1. 發生 DNS 查找，其中服務器提供 IP 地址
    2. 瀏覽器和網站服務器執行 TCP 握手以建立連接
    3. 安全連接請求獲得 TLS 協商或第二次握手交換
  2. 瀏覽器收到響應，並獲取網站的代碼
    1. 在 TCP 慢啟動中接收到第一個數據包以調節網絡流量
    2. 用戶向服務器發送確認 (ACK) 以建立連接限制和發送速率。
  3. 瀏覽器解析信息並將數據轉換為 CSS 對像模型 (CSSOM) 和文檔對像模型 (DOM)。
    1. 構建 DOM 樹（站點和頁面結構）
    2. 預加載掃描程序收集外部資源，例如腳本和圖像。
    3. CSSOM 被構建（樣式樹）
    4. JavaScript 在 CSSOM 構建時被編譯
    5. 可訪問性對像模型 (AOM) 是為輔助設備解釋內容而構建的。
  4. 使用之前創建的 CSSOM 和 DOM 樹進行渲染。

渲染頁面時會發生什麼？

FireFox 瀏覽器檢查工具的圖片
FireFox 瀏覽器檢查工具

網站通過代碼設計呈現，以完成網站的佈局、樣式、繪畫，有時甚至是合成。 CSS 對像模型 (CSSOM) 和文檔對像模型 (DOM)

風格

DOM 和 CSSOM 組合成一個渲染樹，然後開始構建。 渲染樹組織站點和每個唯一節點的可見節點、內容和計算樣式。

佈局

佈局是架構遇到構造的步驟，為頁面創建一個結構來顯示渲染樹中所有節點的寬度、高度和位置。 每個對象的大小和位置都已確定。

網站以盒子結構佈局。 這些框可以調整為無限數量的不同視口大小。 當盒子結構改變尺寸時，這稱為回流。

繪製：首次繪製和首次內容繪製 (FCP)

網站瀏覽器對頁面進行任何渲染的那一刻稱為“首次繪製”。 First Paint 可以是純色背景色，僅取決於頁面的代碼。

首次內容繪製 (FCP) 是指網站訪問者可以查看您頁面上的內容（文本、圖像、視頻等）的可測量時刻。 FCP 測量從頁面加載開始到呈現任何內容的時間點。

First Paint 和 FCP 與快速加載頁面或快速性能不同，但是當網站訪問者感知到快速加載頁面時，用戶體驗變得更加積極。 微調您的 First Paints、加載時間和站點性能可以改善用戶對加載時間的感知。

GTmetrix 中 WP Buffs 速度性能報告的圖像
WP Buffs 在 GTmetrix 中加速性能報告

合成

網頁使用對象重疊的層來組織結構。 合成是頁面計算事物順序以正確呈現它們的地方。

回流觸發重新合成，因為對象定位在回流中經常發生變化。

什麼是渲染阻塞資源

會減慢、延遲或阻止瀏覽器在網站上呈現內容的腳本、樣式表和 HTML 導入是呈現阻塞資源。 當人們提到渲染阻塞資源時，他們通常指的是：

  • CSS
  • <head> 部分中的 JavaScript
  • 從服務器或內容交付網絡加載的字體
  • HTML 導入（舊頁面）

有很多 CSS 和 JavaScript 不是渲染阻塞的，並且對於在頂部附近加載至關重要。 優先考慮樣式表，以確保任何網站訪問者都能看到預期的內容，而不是無樣式的內容或什麼也沒有。

什麼是阻止渲染的 JavaScript 和 CSS？

在渲染過程中，您的瀏覽器首先通過運行 <head> 中的信息來加載網站信息，包括每個腳本。 在頁面在瀏覽器中可見之前，所有腳本都需要按順序運行並完全處理。

腳本構建到隊列中，因此 <head> 中的腳本順序在開發過程中至關重要。 根據代碼的不同，它可能會減慢或阻止您的網站完全加載，這些就是我們所說的阻止渲染的 CSS 和 JavaScript。

WordPress 網站上的腳本可能來自主題、自定義作品或為各種功能添加的插件。

圖像是渲染塊資源嗎？

如果您想知道圖像是否是渲染阻塞資源，它們不是。 圖片的大小仍然會導致您的頁面出現負載問題，但它不應阻礙渲染。

為什麼要消除渲染阻塞資源？

GT Metrix 中 WP Buffs 瀑布報告的圖像展示了 elimante 渲染阻塞資源的示例
WP Buffs 瀑布報告

渲染阻止腳本會減慢頁面加載時間並破壞訪問者的網站體驗。 如果您的網站體驗不佳，則認為網站速度緩慢可能會導致訪問者流失。 訪問者保留率低會影響您的搜索引擎結果並降低您的結果列表。

較低的搜索引擎優化 (SEO) 排名意味著訪問者的減少和潛在業務的損失。 排名下降會減少您的訪問者數量，而糟糕的網站會降低您的訪問者保留率； 渲染阻塞資源可能是一個大問題。

如果您的網站的目標是獲得較高的 Google PageSpeed 分數，那麼了解您的渲染阻止資源是實現該目標的關鍵。

如何消除渲染阻塞資源

認真對待您網站的 SEO 排名和用戶體驗意味著您的網站需要處理或刪除渲染阻止資源。 如果您不是從頭開始構建您的網站，請開始測試您的網站的渲染阻止資源。

一旦確定了這些渲染阻止資源，您將選擇解決問題並改進站點功能的方法。

測試您的網站是否具有渲染阻止資源

Google PageSpeed Insights 報告測試渲染阻止資源的圖片。
WP Buffs 的 Google PageSpeed 報告

在您的網站上運行評估以發現任何渲染阻止資源（試試 Google PageSpeed Insights）永遠不會有壞處。 如果您已盡最大努力進行了優化，正在遵循最佳實踐但仍然遇到問題，或者不知道從哪裡開始，頁面評估器可以成為有用的指南。

消除渲染阻塞 JavaScript 和 CSS 的方法

WordPress 允許您以幾種不同的方式管理妨礙網站呈現的任何資源。 WordPress 將使您能夠使用代碼、標籤、文件組織和優化以及插件來組織您的渲染阻止腳本和鏈接。

專業開發人員還可以創建自定義插件或主題，將這些流程構建到代碼中。

使用代碼刪除渲染阻止 Javascript

通過代碼解決渲染阻塞資源的三種方法是：

  1. 將 <script> 和 <link> 的標籤移動到 HTML 代碼的底部
  2. 為非關鍵腳本的標籤添加 async 或 defer 屬性。
  3. 刪除未使用的 JavaScript 代碼。

WordPress 加載一個 jQuery Migrate 文件以提供與插件和主題使用的舊版本 jQuery 的兼容性。 如果您的網站上沒有任何東西需要它運行，您可以使用一段代碼或插件來阻止 WordPress 加載此 jQuery Migrate 文件。

消除渲染阻塞樣式表

樣式表的性質使它們本質上是渲染阻塞資源。 您可以通過以下方式在您的網站上解決此問題：

  1. 按媒體類型（移動設備、平板電腦、桌面設備等）拆分 CSS
  2. 優化關鍵渲染路徑
  3. 合併 CSS 文件

使用 WordPress 和可視化構建器，您可能無法直接控制頁面的構建方式，但有一些方法可以解決任何問題。

使用 WordPress 插件或擴展解決呈現阻塞問題

WordPress 插件和擴展用於組織頁面上的腳本。 插件將遍歷您頁面的 <script> 和 <link> 標記，並根據特定準則應用 defer 或 async 屬性。

我們已經完成並測試了一系列適用於 WordPress 的插件，並繼續在博客上分享我們最喜歡的用於速度優化的插件等有用的東西。

讓 WordPress 專業人員為您消除渲染阻塞資源

一些插件需要自定義，雖然看起來很簡單，但如果設置不正確，最終可能無法正常工作。 向 WordPress 專業人士尋求幫助並不可恥，而且 WP Buffs 有幾位專家可以優化您的網站。

優化渲染的最佳實踐

  1. 捆綁您的渲染阻塞資源以減少它們對頁面加載的影響。
  2. 減小資源的大小，從而減少要加載的字節數。
  3. 推遲非渲染阻塞資源的下載。
  4. 不要使用 @import 規則添加 CSS，因為它是外部加載。
  5. 使用旨在緩存腳本並優化 JavaScript 和 CSS 的 WordPress 插件。
  6. 在本地加載自定義字體。
  7. 識別關鍵和非關鍵 CSS 和 JavaScript。
  8. 使用 async 或 defer 屬性標記非關鍵​​的渲染阻塞代碼。
  9. 應刪除未使用的代碼。

消除頭痛并讓 WordPress 專業人士幫助

WP Buffs 消除渲染阻塞資源的速度優化服務頁面圖片
消除渲染阻塞資源的速度優化服務，由 WP Buffs

WP Buffs 擅長優化 WordPress 網站和提高頁面性能。 我們了解為什麼績效對您的業務很重要，以及需要關注哪些領域才能產生最顯著的影響。

改善您網站的性能和訪問者體驗不僅僅是阻止渲染的資源。 WP Buffs 可以查看您的網站和地址：

  • 圖像尺寸
  • 圖像質量和交付格式
  • 頁面長度和動態內容百分比
  • 構建不良的主題
  • 導致延遲的不必要腳本
  • 構建不佳的插件
  • 未使用的外部腳本
  • 過時的軟件
  • 有限的網絡託管計劃無法充分支持網站的需求

WordPress 可以是一個相當容易建立網站的平台，但最大化用戶體驗需要訓練有素的專業人士，或者通常是優秀的服務提供商。

經常問的問題

  • 什麼是“消除渲染阻塞資源”？

    • 網站使用腳本和鏈接來訪問文件和代碼以在瀏覽器中構建網站。 有時腳本和鏈接需要一段時間才能加載並阻止網站的其他部分呈現給網站訪問者。 消除渲染阻塞資源意味著解決減緩或阻止網站正確加載的腳本、鏈接、字體和文件。

  • 如何修復渲染阻塞資源？

    • 有不同的方法來修復渲染阻塞資源，您選擇的武器將取決於您需要解決的問題。 找出哪些腳本和鏈接對加載您的頁面至關重要，然後將其他腳本和鏈接推遲到需要時。 代碼優先級可以通過代碼或插件來完成。

  • 如何擺脫網站上的渲染阻止資源？

    • 如果您使用的是 WordPress，最簡單的方法是使用高質量的插件來管理您的腳本和外部負載，方法是評估哪些是關鍵的，哪些可以推遲到渲染過程的後期。 插件無需手動評估代碼並為手動組織的每個腳本分配標籤（這仍然是可能的和鼓勵的），插件會自動為您處理。

  • 如何在沒有插件的情況下修復/消除渲染阻塞資源？

    • 如果您不打算向您的網站添加另一個插件，或者插件不適合您，那麼還有其他方法可以修復渲染阻塞資源。 您可以手動優化代碼中的任何腳本和鏈接，以確保它們以有效的順序加載，或者推遲加載該腳本，直到必要的功能完成之後。