總覽
瀏覽器必須先處理目前網頁的所有樣式和版面配置資訊,才能轉譯內容。因此,瀏覽器在下載及處理外部樣式表之前會封鎖轉譯,而這可能需要多次往返,並延遲首次轉譯的時間。如要進一步瞭解重要的算繪路徑,請參閱「 算繪樹狀結構建構、版面配置和繪製」一文;如要進一步瞭解重要的算繪路徑,以及「算繪封鎖 CSS」,請參閱相關提示,瞭解如何解除封鎖轉譯及改善 CSS 傳遞。建議
如果外部 CSS 資源很小,您可以直接將這些資源插入 HTML 文件中,這種做法稱為內嵌。以這種方式嵌入小型 CSS,瀏覽器就能繼續轉譯網頁。請注意,如果 CSS 檔案很大,完全嵌入 CSS 可能會使 PageSpeed Insights 透過優先處理要顯示的內容發出警告,指出網頁的不需捲動位置部分過大。如果是大型 CSS 檔案,你必須找出轉譯不需捲動位置內容所需的 CSS 並內嵌,然後延後載入其餘樣式,直到不需捲動位置的內容結束為止。內嵌小型 CSS 檔案的範例
如果 HTML 文件看起來像這樣:<html> <head> <link rel="stylesheet" href="small.css"> </head> <body> <div class="blue"> Hello, world! </div> </body> </html>資源
small.css
如下所示:
.yellow {background-color: yellow;} .blue {color: blue;} .big { font-size: 8em; } .bold { font-weight: bold; }接著即可內嵌重要的 CSS,如下所示:
<html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> <noscript id="deferred-styles"> <link rel="stylesheet" type="text/css" href="small.css"/> </noscript> <script> var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles); </script> </body> </html>
啟用「prioritize_Critical_css」prioritize_critical_css篩選器後,您可以透過 nginx、Apache、IIS、ATS 和 Open Lightspeed 適用的 PageSpeed 最佳化模組執行這項轉換作業,包括判斷重要/非關鍵 CSS、納入重要的 CSS,以及延遲載入不重要的 CSS。
另請參閱 loadCSS 函式,瞭解如何以非同步方式載入 CSS。此函式可與 Critical 中寫入的重要 CSS 工具搭配使用,讓您從網頁中擷取重要 CSS。
設定不需捲動位置內容樣式所需的重要樣式,系統會內嵌並立即套用至文件,系統完成網頁的初始繪製後,就會載入完整的 small.css。網頁載入完畢後,系統會將其樣式套用至頁面,而不會封鎖重要內容的初始轉譯。
請注意,網路平台即將支援以非轉譯方式載入樣式表,而不必使用 HTML 匯入功能執行 JavaScript。
不內嵌大型資料 URI
內嵌 CSS 檔案中的資料 URI 時,請務必謹慎。雖然在 CSS 中選擇性使用小型資料 URI 可能很合理,但內嵌大型資料 URI 可能會導致不需捲動位置的 CSS 規模變大,進而拖慢網頁轉譯時間。
請勿內嵌 CSS 屬性
在 HTML 元素中內嵌 CSS 屬性 (例如<p style=...>
) 應盡量避免,因為這樣常會導致不必要的程式碼重複。此外,內容安全政策 (CSP) 已預設封鎖在 HTML 元素中內嵌 CSS。
意見回饋
本頁內容對你是否有幫助?