このページは Cloud Translation API によって翻訳されました。

CSS の配信を最適化する

<ph type="x-smartling-placeholder">で確認できます。このルールは、ページにレンダリングブロック外部リンクが含まれていることを PageSpeed Insights が検出した場合にトリガーされます最初のレンダリングまでの時間が長くなります。

概要

ブラウザは、コンテンツをレンダリングする前に、そのコンテンツのスタイルとレイアウトの情報をすべて処理する必要があります。クリックします。そのため、ブラウザで外部スタイルシートが読み込まれるまでレンダリングはブロックされます。ダウンロードと処理が行われるため、ラウンドトリップが複数回必要になり、最初のレンダリングに遅れが生じる可能性があります。 <ph type="x-smartling-placeholder"></ph>をご覧ください。レンダリングツリーの構築、レイアウト、ペイントをご覧ください。とレンダリング CSS のブロックに関する記事をご覧ください。

推奨事項

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

小さな CSS ファイルをインライン化する例
サイズの大きいデータ URI をインライン化しない
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>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

この変換には、クリティカルな CSS と非クリティカルな CSS の判断も含まれます。クリティカル CSS のインライン化と、重要でない CSS の読み込みの遅延自動的に作成されるように PageSpeed 最適化モジュール: nginx、apache、IIS、ATS、Open Lightspeed で prioritize_critical_css フィルタを使用します。

関連ドキュメント: loadCSS 非同期で読み込むのに便利な関数を使用します。重大、重要な CSS をウェブページから抽出するツールです。

スクロールせずに見える範囲のコンテンツのスタイル設定に必要な重要なスタイルがインライン化され、すぐにドキュメントに適用されます。small.css 全体は、ページが最初に表示された後で読み込まれます。読み込みが終了すると、重要なコンテンツの最初のレンダリングをブロックすることなく、スタイルがページに適用されます。

まもなく、ウェブプラットフォームでは、JavaScript に頼ることなく HTML Imports を使用して、レンダリングブロック以外の方法でスタイルシートを読み込めるようになります。

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

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

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

HTML 要素での CSS 属性のインライン化（例:<p style=...> など）は、コードの不要な重複につながることが多いため、できるだけ避けてください。さらに、HTML 要素に対するインライン CSS は、デフォルトでコンテンツセキュリティポリシー（CSP）。

フィードバック

このページは役に立ちましたか？

</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">で確認できます。

</ph> <ph type="x-smartling-placeholder">