CSS 配信の最適化: CSS 読み込みの遅延手法を理解する

Web サイトのパフォーマンスを向上させるために、開発者は CSS 配信を最適化することがよくあります。 Google Developers ドキュメントで言及されている戦略の 1 つは、ページが読み込まれるまで元の CSS ファイルの読み込みを延期しながら、重要な CSS を

ただし、ページの読み込み後に大きな CSS ファイルをどのように読み込むことができるかという疑問が残ります。

解決策: 大きな CSS ファイルの読み込みを延期する

大きな CSS ファイルの読み込みを延期するには、次のような単純な jQuery コード スニペットを利用できます。 if (document.createStyleSheet){ document.createStyleSheet(src); } それ以外 { $("head").append($("")); } };

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

このメソッドが機能することを確認するには、ブラウザーで JavaScript を無効にして、ページを再読み込みしてみてください。スタイルシートが適用された状態でページが引き続き正しく読み込まれる場合は、CSS 読み込みの延期が成功したことを示しています。

CSS 読み込みを延期するには、次のような代替方法があります。