如何推遲大型 CSS 文件載入以提高網站效能？

優化CSS 交付：推遲大型CSS 文件加載

為了優化網站性能，一種常見的技術是推遲大型CSS 文件的加載CSS 文件，直到載入頁面的初始內容之後。此策略有助於減少頁面渲染時間並提高感知效能。

使用jQuery 延遲載入

如果您習慣使用jQuery，則可以使用以下方法實現延遲CSS 載入以下程式碼片段：

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

只需在$(document).ready() 事件處理程序中呼叫此函數即可推遲載入CSS 檔案。

替代方法

或者，如果您不想使用 jQuery，您可以手動建立連結元素並將其附加到文件頭。以下是範例：

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "large.css";
document.head.appendChild(link);

無 Javascript

請注意，在頁面載入後載入 CSS 檔案需要修改 HTML 程式碼。如果瀏覽器中禁用了 JavaScript，則不會載入延遲的 CSS 檔案。因此，在 HTML 中內嵌關鍵 CSS 或考慮替代優化技術至關重要。

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