排除會妨礙顯示的資源

Lighthouse 報告的「Opportunity」部分會列出阻礙您網頁第一次繪製的所有網址。我們的目標是內嵌重要資源、延遲非關鍵資源,並移除未使用的任何資源,藉此減少這些轉譯網址封鎖網址的影響。

Lighthouse 消防轉譯資源稽核程序的螢幕截圖

哪些網址會被標記為禁止轉譯資源?

Lighthouse 標記有兩種會封鎖的轉譯網址:指令碼和樣式表。

符合下列條件的 <script> 標記:

  • 位於文件的 <head> 中。
  • 沒有 defer 屬性。
  • 沒有 async 屬性。

符合下列條件的 <link rel="stylesheet"> 標記:

  • 沒有 disabled 屬性。如果有這項屬性,瀏覽器不會下載樣式表。
  • 缺少與使用者裝置具體相符的 media 屬性。系統會將 media="all" 視為禁止轉譯。

如何找出重要資源

減少轉譯資源所造成的影響的第一步,就是找出重要性高低。使用 Chrome 開發人員工具的「涵蓋率」分頁找出不重要的 CSS 和 JS。載入或執行頁面時,分頁會顯示程式碼已使用多少 (相對於載入量):

Chrome 開發人員工具:涵蓋率分頁
Chrome 開發人員工具:涵蓋率分頁。

透過只運送所需的程式碼和樣式,您可以縮減網頁的大小。按一下網址即可在「來源」面板中檢查該檔案, CSS 檔案和 JavaScript 檔案中程式碼的樣式會以兩種顏色標示:

  • 綠色 (重要):繪製時所需的樣式,以及網頁核心功能不可或缺的程式碼。
  • 紅色 (非重大):適用於無法立即顯示內容的樣式;網頁的核心功能未使用程式碼。

如何排除會妨礙轉譯的指令碼

找到重要程式碼後,請將該程式碼從禁止轉譯網址移至 HTML 網頁的內嵌 script 標記。網頁載入時,網頁會取得處理網頁核心功能所需的內容。

如果轉譯封鎖網址中有不重要的程式碼,您可以將其保留在網址內,然後使用 asyncdefer 屬性標記網址 (另請參閱「使用 JavaScript 加入互動性」)。

請移除完全未使用的程式碼 (請參閱移除未使用的程式碼)。

如何移除禁止轉譯樣式表

<script> 標記的內嵌程式碼類似,第一次繪製時在 HTML 網頁 head<style> 區塊內需要的內嵌重要樣式。然後使用 preload 連結,以非同步方式載入其餘樣式 (請參閱「延遲未使用的 CSS」)。

考慮使用重要工具,自動執行「不需捲動位置」CSS 的擷取及內嵌程序。

排除禁止轉譯樣式的另一種方法,是將這些樣式分割成不同的檔案,並依媒體查詢進行整理。接著為每個樣式表連結加入媒體屬性。載入網頁時,瀏覽器只會封鎖第一個繪圖,以擷取符合使用者裝置的樣式表 (請參閱「轉譯封鎖 CSS」)。

最後,建議您壓縮 CSS,以移除多餘的空白字元或字元 (請參閱「壓縮 CSS」)。如此可確保您傳送最小的套裝組合給您的使用者。

堆疊專屬指南

AMP

使用 AMP 最佳化工具等工具,在伺服器端轉譯 AMP 版面配置

Drupal

建議您使用模組來內嵌重要的 CSS 和 JavaScript,或是透過進階 CSS/JS 匯總模組等 JavaScript 以非同步方式載入素材資源。

Joomla

有些 Joomla 外掛程式可協助您內嵌重要的資產延遲較不重要的資源

WordPress

有些 WordPress 外掛程式可協助您內嵌重要的素材資源,或延遲較不重要的資源

資源