如何推遲載入大型 CSS 檔案以提高頁面效能？

最佳化CSS 傳遞：了解延遲CSS 載入

最佳化CSS 傳遞時，在頁面載入後延遲載入大型CSS 檔案可以顯著提高頁面效能。雖然 Google 開發人員提供的範例演示​​了內聯小型 CSS 檔案以實現關鍵樣式，但它留下瞭如何推遲較大 CSS 檔案的問題。

載入後訪問原始CSS 檔案

要將大型CSS 檔案的載入延後到頁面載入之後，我們可以使用以下jQuery 程式碼片段：

function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

此函數會在HTML 頭部動態建立一個連結標記，並在將href 屬性設定為所需的CSS 檔案。要啟動樣式表，只需呼叫 $(document).ready() 或 window.onload 事件處理程序中的函數即可。

驗證延遲結果

驗證如果頁面加載後 CSS 文件真正加載，您可以在瀏覽器中停用 JavaScript。如果 CSS 檔案沒有出現在頁面上，則確認它正在動態載入。此外，建議使用 Google PageSpeed Insights 等工具來測試效能改進，以量化對頁面載入時間的影響。

透過採用此技術，我們可以優化 CSS 交付並增強網路的整體效能頁面。延遲載入大型 CSS 檔案可以讓頁面快速渲染並提供更流暢的使用者體驗。

以上是如何推遲載入大型 CSS 檔案以提高頁面效能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！