Lighthouse 報表的「Opportunities」部分會列出所有阻礙網頁首次顯示畫面的網址。目標是透過內嵌重要資源、延後非重要資源，以及移除所有未使用的資源，減少這些轉譯阻斷網址的影響。
哪些網址會被標示為會妨礙顯示的資源？
Lighthouse 標記兩種會妨礙顯示的網址類型：指令碼和樣式表。
<script> 代碼：
- 位於文件的
<head>中。 - 沒有
defer屬性， - 沒有
async屬性。
<link rel="stylesheet"> 代碼：
- 沒有
disabled屬性，當這個屬性存在時，瀏覽器就不會下載樣式表。 - 沒有與使用者裝置具體相符的
media屬性。media="all"會造成轉譯阻斷。
如何找出重要資源
為了減少轉譯阻斷資源的影響，第一步是找出哪些資源至關重要，哪些則不重要。使用 Chrome 開發人員工具中的「Coverage」分頁，找出不重要的 CSS 和 JS。載入或執行網頁時，分頁會顯示已使用的程式碼數量，以及已載入的程式碼數量：
您可以只傳送所需的程式碼和樣式，藉此縮減網頁大小。按一下網址，即可在「來源」面板中檢查該檔案。CSS 檔案中的樣式和 JavaScript 檔案中的程式碼會以兩種顏色標示：
- 綠色 (重要)：首次繪製時所需的樣式；這是網頁核心功能的關鍵程式碼。
- 紅色 (非必要)：套用於內容的樣式不會立即顯示；網頁核心功能中不會使用程式碼。
如何排除禁止轉譯的指令碼
找出重要程式碼後，請將該程式碼從會禁止轉譯的網址移至 HTML 網頁中內嵌的 script 標記。網頁載入時，系統會提供處理網頁核心功能所需的資源。
如果轉譯阻斷網址中含有非必要的程式碼，您可以保留該程式碼，然後使用 async 或 defer 屬性標示網址 (另請參閱「使用 JavaScript 新增互動功能」)。
請務必移除完全沒有使用的程式碼 (請參閱「移除未使用的程式碼」)。
如何停用會妨礙顯示的樣式表
與在 <script> 標記中內嵌程式碼類似，在 HTML 網頁的 head 中，<style> 區塊內的內嵌重要樣式，可用於第一次繪製。然後使用 preload 連結以非同步方式載入其他樣式 (請參閱「延後未使用的 CSS」)。
建議您使用Critical 工具，自動執行擷取及內嵌「Above the Fold」CSS 的程序。
另一種消除轉譯阻斷樣式的做法，是將這些樣式分割為不同的檔案，並按照媒體查詢進行排序。接著，請在每個樣式表連結中新增媒體屬性。載入網頁時，瀏覽器只會封鎖第一次繪製，以便擷取與使用者裝置相符的樣式表單 (請參閱「遮蔽算繪 CSS」)。
最後，建議您壓縮 CSS，移除任何多餘的空白字元或字元 (請參閱「壓縮 CSS」)。這樣一來，您就能向使用者傳送最小的套件。
堆疊專屬指南
AMP
使用 AMP 最佳化工具或類似工具，在伺服器端轉譯 AMP 版面配置。
Drupal
建議你使用模組來內嵌重要的 CSS 和 JavaScript，並針對重要性較低的 CSS 或 JavaScript 使用延遲屬性。
Joomla
有些 Joomla 外掛程式能協助你內嵌重要的素材資源，或是延後載入較不重要的資源。
WordPress
有些 WordPress 外掛程式能協助你內嵌重要的素材資源或延後載入較不重要的資源。