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

大きな CSS ファイルの読み込みを延期して CSS 配信を強化する

Google の開発者向けドキュメントでは、Web サイトのパフォーマンスを向上させるために CSS 配信を最適化することを推奨しています。推奨される戦略の 1 つは、ページ オンロード後に元の大きな 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 ファイルの遅延読み込みを実現できます。

もう 1 つの代替方法は、ブラウザで JavaScript を無効にして観察することです。結果として生じる動作。そうすることで、CSS が非同期で読み込まれていることを確認でき、ウェブサイト全体のパフォーマンスが向上します。

Google 検索を簡単に実行すると、プログラミングの課題に関する貴重な洞察が得られることがよくあることを覚えておいてください。たとえば、クエリ「postload css」は、応答で言及されているような有用な結果を返します。

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