web-dev-qa-db-ja.com

CSS配信の最適化：CSSの読み込みを延期する方法は？

私は開発者向けのGoogleドキュメントに従ってCSS配信を最適化しようとしていますhttps://developers.google.com/speed/docs/ insights/OptimizeCSSDelivery＃example

小さなCSSファイルのインライン化の例でわかるように、重要なCSSは頭にインライン化され、元のsmall.cssはページのオンロード後にロードされます。

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

この例に関する私の質問：

ページのオンロード後に大きなcssファイルをロードする方法は？

javascripthtmlcssgoogle-pagespeeddeferred-loading
58
RafaSashi

JQueryの使用を気にしない場合は、次の簡単なコードスニペットを使用してください。 （そうでない場合はコメントし、pure-jsの例を作成します

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

$(document).ready()またはwindow.onload関数でこれを呼び出すだけで準備完了です。

＃2で試してみませんか？ブラウザでJavascriptを無効にして確認してください！

ところで、シンプルなグーグル検索であなたがどれだけ遠くまで行けるかは驚くべきことです。クエリ"post load css"の場合、これは4番目のヒットでした... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

47
Fred

Fredが提供する関数を少し変更して、jQueryをより効率的かつ無料にする。私は自分のウェブサイトの本番環境でこの機能を使用しています

        // to defer the loading of stylesheets
        // just add it right before the </body> tag
        // and before any javaScript file inclusion (for performance)  
        function loadStyleSheet(src){
            if (document.createStyleSheet) document.createStyleSheet(src);
            else {
                var stylesheet = document.createElement('link');
                stylesheet.href = src;
                stylesheet.rel = 'stylesheet';
                stylesheet.type = 'text/css';
                document.getElementsByTagName('head')[0].appendChild(stylesheet);
            }
        }
34
Salvi Pascual

フレッドの答えに加えて：

jQueryとNoscriptを使用したソリューション

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        if($("body").size()>0){
                if (document.createStyleSheet){
                    document.createStyleSheet('style.css');
                }
                else {
                    $("head").append($("<link rel='stylesheet' 
                    href='style.css' 
                    type='text/css' media='screen' />"));
                }
            }
        });
    </script>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

from http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

純粋なJavascriptとNoscriptを使用する

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    <script type="text/javascript">
          var stylesheet = document.createElement('link');
          stylesheet.href = 'style.css';
          stylesheet.rel = 'stylesheet';
          stylesheet.type = 'text/css';
          document.getElementsByTagName('head')[0].appendChild(stylesheet);
    </script>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
10
RafaSashi

このスニペットを試してください

author は、GoogleのPageSpeedチームによって公開されたと主張します

<script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'yourCSSfile.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
              webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>
9
Raja Khoury

警告：cssファイル内のbody{background-image: url("http://example.com/image.jpg");}は、cssファイルのレンダリングをブロックし続けます。

上記のすべてのソリューションを試しても、PageSpeed Insightsからレンダーブロックの警告が表示される場合は、CSSファイルにこのスタイルルールがある可能性があります。数時間のテストの後、このルールが、PageSpeedのインサイトでレンダリングをブロックするリソースとしてフラグを立てるCSSのALLを決定するものであることがわかりました。同じ問題が 前に説明した であることがわかりました。

body{background-image: url(...)がすべてのcssファイルに対してこれを行う理由はわかりませんが、ボタン、アイコンなどのファイルには異なる画像リソースがあります。

このルールを.cssファイルから移動してインラインスタイルに配置することでこれを修正しました。残念ながら、すべてのHTMLレイアウトでインポートされる1つのcssファイルではなく、CSSプランを破ってルールをすべてのレイアウトHTMLファイルに配置する必要がありますが、PageSpeedインサイトの90年代と緑色はそれに値します。

2
Accountant م