ウェブページの表示速度を改善するために気をつけなくてはいけないこと

ウェブページの表示が遅くなってしまう原因の一つに「JavaScriptの読み込み」があります。ブラウザはダウンロードしたhtmlドキュメントを上から順番に解釈して描画していくのですが、途中で「script」タグに出会うとJavaScriptの読み込み・実行が終わるまでその場所で解釈を一旦ストップしてしまいます。ページの表示速度に影響を与えずにJavaScriptを読み込むにはどうすれば良いのかについてfly.ioがまとめています。

Lighthouse: how to reduce render-blocking scripts
https://fly.io/articles/lighthouse-how-to-reduce-render-blocking-scripts/

scriptタグが外部のJavaScriptを読み込むのかインラインで記述されているJavaScriptを実行するのかに関わらず、両方のケースにおいてブラウザはhtmlの解釈を停止してしまいます。外部のJavaScriptファイルを読み込む場合はその通信時間中もhtmlの解釈が停止したままになってしまうため特に深刻な問題が発生します。下の図はhtmlの途中にscriptタグを挿入した場合の動作の様子です。ブラウザはscriptタグを読み込むとそこでhtmlの解釈を停止し、JavaScriptファイルをダウンロードして完全に実行が完了するまで再開しません。

この待ち時間を減らすための設定が「async」「defer」などです。

ページを表示する時に、どのタイミングで実行しても良いようなJavaScriptには、読み込む際のscriptタグに「async」属性を指定することで非同期に読み込むことができ、読み込んでいる間の待ち時間にブラウザはhtmlの解釈を進めることができます。下の図は「async」を設定した場合の動作の様子です。ブラウザがscriptタグを読み込んでも、JavaScriptファイルのダウンロードが終わるまではhtmlの解釈を続けます。JavaScriptファイルがダウンロードされたらhtmlの解釈を停止してJavaScriptを実行しますが、htmlの解釈を停止する時間を短くすることができています。

ただし、非同期の読み込みにおいては実行順序が保証されず、より後ろに記載されているJavaScriptが先に実行される可能性がある点には注意が必要です。サードパーティー製のJavaScriptや他のファイルに依存しないJavaScriptには「async」属性を付けておくのが良さそうです。なお、「async」は以下のように使用します。

<script src="app.js" async></script>

また、scriptタグに「defer」属性を指定すると、そのscriptはhtmlの解釈が完全に終わってから実行されます。htmlの解釈をストップさせない上に、asyncとは違ってscriptタグが記載されていた順番通りに実行できるという利点もあります。

したがって、htmlの解釈が完了してから実行したい場合の他に、script間で依存関係がある場合にも「defer」属性が有効に機能します。なお、「defer」は以下のように使用します。

<script src="app.js" defer></script>

これら2つの要素はscriptタグがhtmlドキュメントの途中で出てくる場合には適切ですが、scriptタグがhtmlドキュメントの最後に書かれている場合にはあまり効果がありません。ブラウザはhtmlドキュメントを上から順番に読んでいくため、最後に記載されているscriptを読む頃にはコンテンツの大部分が既に解釈されているためです。

さらに、「Intersection Observer API」というAPIを使用する遅延読み込み方法もあります。このAPIを使用すると特定の要素が画面内に入ってきたタイミングでJavaScriptファイルを読み込むことが可能になり、JavaScriptをより適切なタイミングで実行できるようになります。ただしChromeなど一部のブラウザにしか対応していない点には注意が必要です。

ウェブサイトのパフォーマンスはLighthouseというツールを使用することで簡単に計測できます。どのように改善すればページの読込速度が上がるのかなどをまとめたレポートも作成してくれるので、自分のページの読込速度が気になる人にオススメです。

Webページの読み込み速度やアクセシビリティを自動でチェックしてくれるChrome拡張「Lighthouse」 - GIGAZINE