Lighthouse 報告的「Opportunity」部分會列出阻礙您網頁第一次繪製的所有網址。我們的目標是內嵌重要資源、延遲非關鍵資源,並移除未使用的任何資源,藉此減少這些轉譯網址封鎖網址的影響。
![Lighthouse 消防轉譯資源稽核程序的螢幕截圖](https://developer.chrome.com/static/docs/lighthouse/performance/render-blocking-resources/image/a-screenshot-the-lightho-5778b55a95aeb.png?authuser=1&hl=zh-tw)
哪些網址會被標記為禁止轉譯資源?
Lighthouse 標記有兩種會封鎖的轉譯網址:指令碼和樣式表。
符合下列條件的 <script>
標記:
- 位於文件的
<head>
中。 - 沒有
defer
屬性。 - 沒有
async
屬性。
符合下列條件的 <link rel="stylesheet">
標記:
- 沒有
disabled
屬性。如果有這項屬性,瀏覽器不會下載樣式表。 - 缺少與使用者裝置具體相符的
media
屬性。系統會將media="all"
視為禁止轉譯。
如何找出重要資源
減少轉譯資源所造成的影響的第一步,就是找出重要性高低。使用 Chrome 開發人員工具的「涵蓋率」分頁找出不重要的 CSS 和 JS。載入或執行頁面時,分頁會顯示程式碼已使用多少 (相對於載入量):
![Chrome 開發人員工具:涵蓋率分頁](https://developer.chrome.com/static/docs/lighthouse/performance/render-blocking-resources/image/chrome-devtools-coverage-60f77a25e4012.png?authuser=1&hl=zh-tw)
透過只運送所需的程式碼和樣式,您可以縮減網頁的大小。按一下網址即可在「來源」面板中檢查該檔案, CSS 檔案和 JavaScript 檔案中程式碼的樣式會以兩種顏色標示:
- 綠色 (重要):繪製時所需的樣式,以及網頁核心功能不可或缺的程式碼。
- 紅色 (非重大):適用於無法立即顯示內容的樣式;網頁的核心功能未使用程式碼。
如何排除會妨礙轉譯的指令碼
找到重要程式碼後,請將該程式碼從禁止轉譯網址移至 HTML 網頁的內嵌 script
標記。網頁載入時,網頁會取得處理網頁核心功能所需的內容。
如果轉譯封鎖網址中有不重要的程式碼,您可以將其保留在網址內,然後使用 async
或 defer
屬性標記網址 (另請參閱「使用 JavaScript 加入互動性」)。
請移除完全未使用的程式碼 (請參閱移除未使用的程式碼)。
如何移除禁止轉譯樣式表
與 <script>
標記的內嵌程式碼類似,第一次繪製時在 HTML 網頁 head
的 <style>
區塊內需要的內嵌重要樣式。然後使用 preload
連結,以非同步方式載入其餘樣式 (請參閱「延遲未使用的 CSS」)。
考慮使用重要工具,自動執行「不需捲動位置」CSS 的擷取及內嵌程序。
排除禁止轉譯樣式的另一種方法,是將這些樣式分割成不同的檔案,並依媒體查詢進行整理。接著為每個樣式表連結加入媒體屬性。載入網頁時,瀏覽器只會封鎖第一個繪圖,以擷取符合使用者裝置的樣式表 (請參閱「轉譯封鎖 CSS」)。
最後,建議您壓縮 CSS,以移除多餘的空白字元或字元 (請參閱「壓縮 CSS」)。如此可確保您傳送最小的套裝組合給您的使用者。
堆疊專屬指南
AMP
使用 AMP 最佳化工具等工具,在伺服器端轉譯 AMP 版面配置。
Drupal
建議您使用模組來內嵌重要的 CSS 和 JavaScript,或是透過進階 CSS/JS 匯總模組等 JavaScript 以非同步方式載入素材資源。
Joomla
有些 Joomla 外掛程式可協助您內嵌重要的資產或延遲較不重要的資源。
WordPress
有些 WordPress 外掛程式可協助您內嵌重要的素材資源,或延遲較不重要的資源。