CSS の配信を最適化する

このルールは、レンダリングをブロックする外部スタイルシートがページに含まれていて、画面へのコンテンツの描画を遅延させていることを PageSpeed Insights が検出した場合にトリガーされます。

概要

ブラウザでは外部CSSファイルのダウンロードと処理が完了するまでコンテンツを画面に描画するのをブロックします。これによって、外部CSSファイルが多いと、コンテンツを画面に表示するのにかかる時間が増えます。

推奨される解決方法

外部 CSS リソースが小さい場合は、HTML ドキュメントに直接挿入できます。これをインライン化といいます。小さい CSS をこのようにインライン化すると、ブラウザはページのレンダリングを続けることができます。なお、CSS ファイルが大きい場合、CSS を完全にインライン化すると、PageSpeed Insights から、ページのスクロールせずに見える範囲が大きすぎることを警告される場合があります(スクロールせずに見える範囲のコンテンツのサイズを減らすをご覧ください)。大きな CSS ファイルの場合は、スクロールせずに見える範囲のコンテンツのレンダリングに必要な CSS を特定してインライン化し、残りのスタイルの読み込みはスクロールせずに見える範囲のコンテンツの後まで遅らせる必要があります。

小さな CSS ファイルのインライン化の例

次のような HTML ドキュメントがあるとします:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

リソースの small.css は次のとおりです:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

次のように重要な CSS をインライン化できます:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'small.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>
  </body>
</html>

ページが読み込まれた後で元の small.css が読み込まれます。javascript ですべての <style> 要素と <link> 要素をドキュメントに挿入することで、CSS ルールの適用順序は維持されます。

大きなデータ URI をインライン化しない

CSS ファイルにデータ URI をインライン化するときは注意してください。CSS で小さなデータ URI を選択的に使用する一方で、大きなデータ URI をインライン化すると、スクロールせずに見える範囲の CSS のサイズが大きくなり、ページのレンダリング時間が遅くなる場合があります。

CSS 属性をインライン化しない

コードの不要な重複につながる場合があるため、HTML 要素に CSS 属性(< p style=...> など)をインライン化するのはできるだけ避けてください。また、HTML 要素への CSS のインライン化は、Content Security Policy(CSP)によってデフォルトでブロックされます。