什麼是渲染阻塞資源以及如何修復渲染阻塞問題

已發表: 2018-02-28

渲染阻塞資源是網站加載緩慢的最常見原因之一。 如果您的網站速度不夠快，您不僅會損害訪問者的用戶體驗，還會損害您的搜索引擎排名。 壞消息是，如果您的網站運行緩慢，您將失去客戶和收入。

但是，也有好消息——您可以通過消除渲染阻塞資源來提高網站速度。 在本文中，我們將解釋渲染阻塞資源如何影響您的加載時間，並向您展示如何修復它們。

什麼是渲染阻塞資源？

最常見的渲染阻止資源是位於網頁頭部的 JavaScript 和 CSS 文件。 它們加載在折疊區域（或您在向下滾動以查看其餘內容之前通常在網站上看到的區域）上方，並且是 Web 瀏覽器使用的關鍵渲染路徑的一部分。

用外行的話來說，這意味著需要發生某些事件才能讓您的瀏覽器正確顯示（呈現）任何網頁的初始視圖。 以下是基本渲染路徑如何工作的示例：

  • 瀏覽器下載一個網頁，該網頁由一個包含網頁結構的 HTML 文件組成
  • 然後瀏覽器讀取 HTML 並註意到 3 個附加文件：一個 css 文件、一個 javascript 文件和一個圖像
  • 瀏覽器會先下載圖片
  • 然後瀏覽器意識到如果不獲取 CSS 和 JavaScript，它就無法繼續顯示頁面
  • 瀏覽器下載 CSS 文件並讀取它以確保沒有調用其他內容
  • 瀏覽器下載 JavaScript 文件並讀取它以確保沒有調用其他內容
  • 瀏覽器終於可以顯示網頁了

當瀏覽器忙於加載和讀取每個 CSS 和 JavaScript 文件時，您的訪問者正盯著一個空白屏幕，等待您的網站加載。 如果您使用 WordPress 之類的 CMS，您的瀏覽器可能會忙碌一段時間，因為它不僅需要加載主題的樣式和腳本文件，還需要加載 WordPress 本身附帶的腳本和样式文件以及您正在使用的所有插件和小部件隨附的那些。

在優化您的網站速度時，您列表中的第一個任務應該是減少用戶查看您的內容並與之交互所需的時間。 最簡單的方法是優化您的關鍵渲染路徑。

如何修復渲染阻塞問題

既然您知道了導致渲染阻塞問題的原因以及它們如何影響您網站的速度，那麼讓我們來談談如何解決這些問題。

渲染阻塞 CSS

有三種方法可以解決渲染阻塞 CSS 問題：

  • 正確調用你的 CSS 文件——你的 CSS 文件應該像這樣鏈接到你的 HTML 文件中： <link rel="style.css" href=“style.css">而不是依賴於使用@import方法。 @import方法通常會在您的常規樣式表的頂部附近，並導致瀏覽器在讀取 CSS 文件的其餘部分之前返回並找到導入的文件，並在渲染您的網頁時導致更大的延遲
  • 減少關鍵路徑中 CSS 文件的數量——如果可能，將所有不同的 CSS 文件合併為一個，並從 HTML 中刪除對這些文件的調用

渲染阻止 JavaScript

要刪除阻止渲染的 JavaScript，您需要知道加載了多少 JavaScript 文件以及它們在 HTML 中的什麼位置調用。 找出這一點的一個好方法是使用 Google PageSpeed Insights 工具。 當總部位於澳大利亞的清潔公司 This Is Neat Cleaning 構建他們的網站時，他們使用 Google 的 PageSpeed Insights 作為基準，測試各種場景以找出他們對移動設備和桌面設備的確切需求。

從測試中可以明顯看出，將大多數腳本插入 HTML 文件的底部會產生最好的結果。 主要原因是將腳本移動到頁面底部刪除了阻止 javascript 阻礙用戶體驗的渲染。 由於關鍵 CSS 仍在首屏加載，用戶仍然可以從根本上使用該網站，而交互和功能仍在後台加載。

使用插件

當然，與 WordPress 相關的任何內容一樣，您可以使用插件來修復渲染阻塞問題。 由於總活躍安裝量超過一百萬，This is Neat Cleaning 將使用 W3 Total Cache 進行緩存、縮小和性能優化是理所當然的。

以下是使用 W3 Total Cache 修復渲染阻塞問題的方法。

在您的 WordPress 儀表板中，轉到性能 > 設置並向下滾動到縮小部分。 選中啟用複選框，然後從縮小模式旁邊的下拉菜單中選擇手動。 保存設置。 然後，您需要添加要縮小的所有腳本和样式。

要找出阻止呈現的腳本和样式表的位置，請轉到 Google Page Speed Insights Tool 並分析您的網站。 然後，查看建議選項卡並找到以下部分：消除首屏內容中的渲染阻塞 JavaScript 和 CSS 。 單擊顯示如何修復並選擇和復製文件的 URL。

返回您的 WordPress 儀表板並導航到W3 Total Cache > Performance > Minify 。 向下滾動到 JavaScript 部分，並在區域中的操作下確保嵌入類型設置為非阻塞，使用 defer為<head>部分。 然後，單擊添加腳本按鈕並粘貼您從 Google PageSpeed 工具複製的 URL。

添加完所有腳本文件後，向下滾動到CSS部分，單擊添加樣式表並添加從 Google PageSpeed Insights 複製過來的樣式表文件的 URL。

完成後，單擊保存設置並清除緩存按鈕。

最後的想法

在網站速度方面，渲染阻止資源可能會造成嚴重破壞。 幸運的是，有幾種方法可以解決這些問題，因此請使用此處提供的提示來提高您網站的速度並確保您的訪問者獲得最佳的用戶體驗。