Web サイトのパフォーマンスを向上させるために、大きな CSS ファイルの読み込みを延期するにはどうすればよいですか?

CSS 配信の最適化: 大きな CSS ファイルの読み込みを延期する

Web サイトのパフォーマンスを最適化するための一般的な手法の 1 つは、大きな CSS ファイルの読み込みを延期することです。ページの最初のコンテンツが読み込まれるまで CSS ファイルを保存します。この戦略は、ページのレンダリング時間を短縮し、体感的なパフォーマンスを向上させるのに役立ちます。

jQuery による遅延読み込み

jQuery の使用に慣れている場合は、次のコード スニペット:

<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 ファイルは読み込まれません。したがって、重要な CSS を HTML 内にインライン化するか、代替の最適化手法を検討することが重要です。

以上がWeb サイトのパフォーマンスを向上させるために、大きな CSS ファイルの読み込みを延期するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。