PageSpeed Insights が提案する、速度改善のための重要なポイント #JavaScript

レンダリングを妨げる JavaScript を削除する

小さな JavaScript をインライン化する

外部スクリプトが小さい場合は、HTML ドキュメントに直接含めることができます。小さなファイルをこのようにインライン化すると、ブラウザではページの表示を続けることができます。

JavaScript の読み込みを遅らせる

html

<script async src="my.js">

JavaScript リソースで document.write を使用している場合は、非同期の読み込みを安全に使用できません。document.write を使用するスクリプトは、別の方法を使用するように書き直すことをおすすめします。

また、JavaScript を非同期的に読み込む際に、ページで互いに依存している複数のスクリプトを読み込む場合は、アプリケーションで適切な依存関係の順序でスクリプトを読み込むように注意を払う必要があります。

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

外部 CSS リソースが小さい場合は、HTML ドキュメントに直接挿入できます。これをインライン化といいます。小さい CSS をこのようにインライン化すると、ブラウザはページのレンダリングを続けることができます。

html

<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;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
  </body>
</html>

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

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

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery