株式会社ズコーデザイン
かとう
BLOG
pagespeedinsightsで『レンダリングを妨げるリソースの除外』する #1
JavaScript(JS)を遅延ロードする
PageSpeed Insightsで指摘される『レンダリングを妨げるリソースの除外』を解消する方法を紹介します。
『レンダリング』とは『≒画像なども含めてページを表示する』ことをいいます。
ブラウザはレンダリングのために、HTMLを解析しDOMツリー(※1)を構築していきますが、その途中に<script>が見つかると、解析を中断し<script>(※2)を実行します。
なので、何も対策がされていない<script>の数だけHTMLの解析が中断され、レンダリングまでの時間がどんどん遅くなってしまいます。
※1 このとき構築したDOMツリーは、開発者ツールのElementsタブから確認することができます。
※2 src属性が付いている場合は、ファイルを読み込みます。
今回は、『レンダリングを妨げるリソースの除外』の中で<script>が原因になっている部分を解消していきます。
デフォルト(同期読み込み＋都度実行)
この状態では、先ほどの説明どおり、HTMLの解析を中断し/js/example.jsを読み込み、中に書かれているJavaScriptが実行されます。
async属性(非同期読み込み＋都度実行)
async属性を付けることで、非同期読み込みに変わり、HTMLの解析を中断しなくなります。
ただし、読み込みが完了すると実行してしまうので、そのタイミングでHTMLの解析が完了していないと、解析が中断されてしまいます。
また、複数のファイルを読み込んでいる場合、それぞれのタイミングで実行するため、<script>を記述(出現)した順番と実行される順番はバラバラになります。
なので、ライブラリなどの実行の順番が重要になるものは、下記のdefer属性を使います。
/js/example-1.js
defer属性(非同期読み込み＋遅延実行)
defer属性を付けることで、読み込みが完了しても、HTMLの解析が完了するまで実行しないので、解析が中断されることは無くなります。
実行の順番は<script>を記述(出現)した順番と同じになります。
それぞれのパターンで、読み込みと実行を図にすると以下のようになります。
それぞれのパターンで、読み込みと実行を図にすると以下のようになります。
非同期読み込みをすることで短縮されているのがイメージできたと思います。
その他(遅延読み込み＋都度実行)
非同期読み込みとは違いますが、ユーザがスクロールやキー操作など、アクションを起こすまで、読み込まない方法です。