如何推遲載入大型 CSS 檔案以優化網站效能？

透過延遲載入大型 CSS 檔案來增強 CSS 交付

Google 的開發人員文件建議優化 CSS 交付以提高網站效能。建議的策略之一是在頭部內嵌關鍵 CSS，同時在頁面載入後載入原始較大的 CSS 檔案。

頁面載入後載入大型 CSS 文件

提供的範例有效地處理了內聯一個小的 CSS 文件，但留下瞭如何處理更大的 CSS 文件的問題。

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

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

只需在$(document).ready() 或window.onload函數中呼叫此函數即可實現大型CSS 檔案的延遲載入。

另一種選擇是在瀏覽器中停用 JavaScript 並觀察由此產生的行為。透過這樣做，您可以驗證 CSS 是否已非同步加載，從而提高網站的整體效能。

請記住，進行快速 Google 搜尋通常可以提供有關程式設計挑戰的寶貴見解。例如，查詢「post load css」會產生有用的結果，例如回應中提到的結果。

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