WordPress CMS 系統使您能夠讓您使用的和主題來建置您的網站。但是，這可能表示您網站有很多腳本會減慢其加載時間，並非所有的腳本都需要立即加載，有些腳本實際上可以阻止訪問者盡快看到您的內容。如果你曾經通過 Google PageSpeed Insights 檢測過 WordPress 網站響應速度，那麼 Google 可能已經告訴您，您需要消除 WordPress 網站上的渲染阻止資源。
渲染是瀏覽器首先在螢幕上渲染頁面所執行的一系列任務，即下載、處理並將 HTML、CSS 和 JavaScript 程式碼轉換為實際像素並將它們繪製在螢幕上。而優化渲染是最小化瀏覽器執行序列的每個步驟所花費的時間的過程，優先顯示與當前用戶操作相關的內容。
這裡有兩個問題是您必須了解的：
- 首先什麼是渲染阻塞資源？
- 如何消除 WordPress 上的渲染阻塞資源？
這些文件稱為阻止渲染的JavaScript和CSS，在這我們將向您展示渲染阻止資源是什麼，以及 WordPress 網站如何刪除渲染阻止資源提高網站速度。
什麼是渲染資源？
為了了解什麼是渲染阻塞資源以及它們為什麼會影響您網站的加載時間，我們需要從基本了解 Web 瀏覽器如何渲染網頁開始。
頁面渲染引擎的基本操作，從一個網頁的 Url 開始，根據 Url 所對應的網頁各項資源，輸出可視化的結果的過程。 repaint (重繪)和 reflow (回流)是影響渲染速度的兩個因素。
頁面渲染引擎的基本操作，簡單而言是從一個網頁的Url開始，根據Url所對應的網頁各項資源，輸出可視化的結果的過程：
基本流程可大致分為：
- Compute Style：根據Url讀取解析 Html、Css 文件，根據 Html 代碼形成 Dom（文本對像模型）Tree，根據 Css 形成 Css Rule Tree（Css規則樹）。
- Construct Frames：在 Dom Tree 和 Css Rule Tree 之上，創建一顆由一組待生成對象組成的 Rendering Tree （渲染樹）。
- Layout：計算每個 Element（對象）的位置，定位坐標和大小，是否換行，各種 position、overflow、z-index 屬性…。
- Painting：將 Rendering Tree（渲染樹）上的元素展現在瀏覽器上，形成可視化結果。
當網站在瀏覽器中加載時，會調用網站中的腳本多當腳本隊列很長時，訪問者可能需要一段時間才能訪問您站點。換句話說，這些加載腳本會減慢您的網頁速度，無法讓訪問者立刻就能看到網站內容。
渲染阻止資源通常是位於站點前端的 Javascript 和 CSS 文件，這些文件阻止在加載這些文件之前下載站點的其他資源。簡單來說：當您在網站上安裝新主題或插件時，它會將 JavaScript 和 CSS 文件注入網站的前端。雖然 JavaScript 和 CSS 文件是最常見的渲染阻塞資源，但網站部分的其他類型的文件也可能導致這個問題，例如字體和 HTML 導入。因此，如果想在加載速度提高，就必須從網站上刪除這些渲染阻塞文件。
為什麼渲染阻塞資源對網站性能不利？
阻止渲染的 JavaScript 和 CSS 腳本會減慢您的網頁速度，網站速度在您網站的許多方面都發揮著作用，包括搜索引擎優化(SEO)…等等。當您的網站加載緩慢時，可能會讓訪客直接關閉網頁，並且不太可能在搜索引擎結果中排名靠前。 WordPress 網站運行緩慢的原因。
當然，網站速度不僅僅受渲染阻止腳本的影響，確保網站的程式碼儘量乾淨與少來提高整體速度。確保網站首先加載必要的腳本，讓訪客首次查看頁面時看起來正確且可用。
如果您從網站中消除這些渲染阻塞資源，它將最小化站點的關鍵渲染路徑並使您的網站加載速度比以前更快。
如何檢查網站是否有渲染阻止資源？
使用Google PageSpeed Insights，可以輕鬆了解網站是否有渲染阻止資源，輸入您網站的網址，然後點擊“分析”。
一旦它完成對網站的分析，Google 將為您提供所有可能的建議，以提高您的網站加載速度。如果看到“排除禁止轉譯的資源”的建議，這表示網站存在此問題。
如果您沒有看到建議，則不必做任何事情，因為您的網站沒有這個問題。如果點擊“瞭解如何排除會妨礙顯示的資源”的建議，它將向您顯示導致問題的特定文件。這可能是發現您的網站渲染阻塞問題的最簡單、最快的方法。
如何檢查網站是否有渲染阻止資源？
使用 WordPress 架站具有很大的優勢，您可以利用插件來完成想在 WordPress 網站上運行任何功能。無論是想更改部落格的外觀，添加特定小部件，還是提高網站性能…等。當然，要消除渲染阻塞資源，只需使用插件即可做到這一點。
以下是消除渲染阻塞中最好的 WordPress 插件：
LiteSpeed Cache
LiteSpeed Cache for WordPress (LSCWP) 是一款一體化站點加速插件，具有獨有的服務器級緩存和一系列優化功能。
LSCWP 支持 WordPress Multisite，並與最流行的插件兼容，包括 WooCommerce、bbPress 和 Yoast SEO。
TAKI Cloud 提供 Litespeed Web Server 的 WodPress主機。除了搭配 Litespeed Cache 更可以透過這外掛管理 TAKI Cloud WordPress主機 提供具有內置快取功能(memcached 與 Redis)，加上 TAKI Cloud 是 QUIC.cloud 台灣 CDN 節點供應商讓您的網站效能倍增，網站速度飛快。
推薦：WordPress優化-利用 LiteSpeed Cache 優化 PageSpeed 和 GTmetrix 到90+分
W3 Total Cache
W3 Total Cache 是最受歡迎的免費 WordPress 快取外掛之一。這個外掛非常適合那些想要嘗試各種類型的網頁快取的人。它提供了一切，從網頁快取到片段快取。當然 W3 Total Cache 設定較為複雜，但是快取方式較多樣化，適合老手對於WordPress做細部調整。
通過Google pagespeed insight ，找出導致渲染阻塞問題的文件，從 WordPress 儀表板上”運行性能“->”最小化“，滾動到 JS 部分，並將 Beforeembed 類型選擇為“使用 “defer” 進行非阻塞”。
之後，單擊“添加樣式表”並複制貼上來自 Google 頁面洞察力的 CSS 樣式表 URL，這些 URL 存在渲染阻塞問題。
WP Super Cache
WP Super Cache 有一種獨特的方式來快取網站。它的 網頁快取 系統分為三個類別：Expert、Simple和WP-cache 快取。設定較為簡易，適合新手。Simple 使用 PHP 來提供靜態文件。Expert 需要 Apache mod_rewrite 與 編輯 .htaccess，Expert 模式需要具有一定的程式語言基礎並暸解網頁原理再來做設定，才不會導致網站嚴重問題。
WP Rocket
WP Rocket 在 2014 年創立，每年都會被許多 WordPress 專家推薦，更是許多人心目中優質的快取外掛。最強調的特色就是 「Simplicity First」，他們將許多繁瑣的步驟製作成一鍵完成，讓使用者可以輕鬆提升網頁速度。雖說這是一個這麼受歡迎的網站，但是缺點就是需要付費，一年費用是49元美金…
WP Rocket 要渲染阻塞資源，您必須在WordPress網站上安裝和激活WP Rocket，之後，轉到”設置“->”WP火箭“，然後單擊“文件優化”。之後，可以再次在 Google 頁面洞察力上執行網站測試，您將看到您不再收到“排除禁止轉譯的資源”的建議。
結論
以上是WordPress網站怎麼刪除渲染阻止資源提高網站速度的全部內容，雖然渲染阻塞問題並不是唯一一個網站加載慢的因素，但同它對任何網站的速度表現都起著重要的作用。如果不想涉足技術領域，毫無疑問，LiteSpeed Cache 或 WP Rocket 是最好的選擇。
希望這篇文章能解決你的所有疑惑，幫助解決你的問題。
