CSS 配信の最適化: CSS 読み込みの遅延について

CSS 配信を最適化する場合、ページの読み込み後に大きな CSS ファイルの読み込みを延期すると、ページのパフォーマンスが大幅に向上します。 Google 開発者が提供する例では、重要なスタイル設定のために小さな CSS ファイルをインライン化する方法を示していますが、大きな CSS ファイルをどのように延期するかという問題は未解決のままです。

オンロード後の元の CSS ファイルへのアクセス

ページが読み込まれるまで大きな CSS ファイルの読み込みを遅らせるには、次の jQuery コード スニペットを利用できます:

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

この関数は、HTML ヘッド内にリンク タグを動的に作成し、href 属性を目的の CSS ファイルに設定します。スタイル シートをアクティブにするには、$(document).ready() または window.onload イベント ハンドラー内の関数を呼び出すだけです。

遅延結果の検証

検証するにはページの読み込み後に CSS ファイルが実際に読み込まれる場合は、ブラウザで JavaScript を無効にすることができます。 CSS ファイルがページに表示されない場合は、CSS ファイルが動的に読み込まれていることが確認されます。さらに、Google PageSpeed Insights などのツールを使用してパフォーマンスの向上をテストし、ページの読み込み時間への影響を定量化することをお勧めします。

この手法を採用することで、CSS 配信を最適化し、ウェブ全体のパフォーマンスを向上させることができます。ページ。大きな CSS ファイルの読み込みを延期すると、ページが迅速にレンダリングされ、よりスムーズなユーザー エクスペリエンスが提供されます。