如何推遲載入大型 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="%22+src+%22%20/>%22));%0A%20%20%20%20%7D%0A%7D;

%E5%8F%AA%E9%9C%80%E5%9C%A8%24(document).ready()%20%E6%88%96window.onload%E5%87%BD%E6%95%B8%E4%B8%AD%E5%91%BC%E5%8F%AB%E6%AD%A4%E5%87%BD%E6%95%B8%E5%8D%B3%E5%8F%AF%E5%AF%A6%E7%8F%BE%E5%A4%A7%E5%9E%8BCSS%20%E6%AA%94%E6%A1%88%E7%9A%84%E5%BB%B6%E9%81%B2%E8%BC%89%E5%85%A5%E3%80%82%20

%E5%8F%A6%E4%B8%80%E7%A8%AE%E9%81%B8%E6%93%87%E6%98%AF%E5%9C%A8%E7%80%8F%E8%A6%BD%E5%99%A8%E4%B8%AD%E5%81%9C%E7%94%A8%20JavaScript%20%E4%B8%A6%E8%A7%80%E5%AF%9F%E7%94%B1%E6%AD%A4%E7%94%A2%E7%94%9F%E7%9A%84%E8%A1%8C%E7%82%BA%E3%80%82%E9%80%8F%E9%81%8E%E9%80%99%E6%A8%A3%E5%81%9A%EF%BC%8C%E6%82%A8%E5%8F%AF%E4%BB%A5%E9%A9%97%E8%AD%89%20CSS%20%E6%98%AF%E5%90%A6%E5%B7%B2%E9%9D%9E%E5%90%8C%E6%AD%A5%E5%8A%A0%E8%BC%89%EF%BC%8C%E5%BE%9E%E8%80%8C%E6%8F%90%E9%AB%98%E7%B6%B2%E7%AB%99%E7%9A%84%E6%95%B4%E9%AB%94%E6%95%88%E8%83%BD%E3%80%82%20

%E8%AB%8B%E8%A8%98%E4%BD%8F%EF%BC%8C%E9%80%B2%E8%A1%8C%E5%BF%AB%E9%80%9F%20Google%20%E6%90%9C%E5%B0%8B%E9%80%9A%E5%B8%B8%E5%8F%AF%E4%BB%A5%E6%8F%90%E4%BE%9B%E6%9C%89%E9%97%9C%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88%E6%8C%91%E6%88%B0%E7%9A%84%E5%AF%B6%E8%B2%B4%E8%A6%8B%E8%A7%A3%E3%80%82%E4%BE%8B%E5%A6%82%EF%BC%8C%E6%9F%A5%E8%A9%A2%E3%80%8Cpost%20load%20css%E3%80%8D%E6%9C%83%E7%94%A2%E7%94%9F%E6%9C%89%E7%94%A8%E7%9A%84%E7%B5%90%E6%9E%9C%EF%BC%8C%E4%BE%8B%E5%A6%82%E5%9B%9E%E6%87%89%E4%B8%AD%E6%8F%90%E5%88%B0%E7%9A%84%E7%B5%90%E6%9E%9C%E3%80%82%20

">

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