WebPerformance

async script をより早く実行させる

投稿日:

1. はじめに

async/defer なしの script」と「defer つきの script」は、記述した順番で実行されますが、「async つきの script」はどのような順番で実行されるか分かりません(そういう仕様です)。

「実行順序が分からない」と聞くとネガティブな印象を受けますが、この特徴によるメリットもあります。それは「<link rel=preload>」で script ファイルを先読みさせた場合、順番を気にすることなく実行できる点です。先読みしなかった場合と比較して、実行タイミングが早くなります。

2. async script をより早く実行させる

ということで、async な script を早めに実行させるには「<link rel=preload>」で先読みさせます。

例えば、以下のように main.js という JavaScript ファイルを async つきで読み込んでいたとします。

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

この場合、このファイル名を指定した <link rel=preload> タグを <head> タグ内に記述します。

こんな感じです。なるべく上の方がよいです。

<link rel="preload" href="./main.js" as="script">

これで、この JavaScript ファイルを早めに読み込んでくれ(このファイルの優先度が変わります)、実行タイミングも早くなります。

Chrome DevTools の [Performance]パネルを使って、この動作を解析した画面がこちらです。

preload した script は早い段階でダウンロードされます

preload した script は早い段階で読み込まれていることが分かります。async の script は実行順序の制限がないため、実行タイミングも早くなります。

補足

「async/defer なしの script」と「defer つきの script」も preload で読み込ませ、全体の処理の工程が早く進めば、結果的に「async/defer なしの script」と「defer つきの script」もより早く実行されるということはありえると思います。

3. おわりに

今後、Chrome に「Priority Hints」という仕様が実装されるらしいのですが、そうなった場合は <link rel=preload> タグを追加しなくても、<img>タグに importance="high" という属性を指定するだけで実行タイミングを早めることができるそうです。

4. 参考

📂-WebPerformance

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Vitals

Webページの高速化とSEOの関係

Webページの高速化とSEOの関係について書きます。

Web Vitals

PageSpeed Insightsによる「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」について

PageSpeed Insights などで指摘される「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」についてです。

Web Vitals

ファーストビュー上のアニメーションGIFはMP4に変換して使うことを検討する

ファーストビュー上のアニメーションGIFはMP4に変換して使うことを検討しましょう

Web Vitals

Lighthouse が指摘する「Serves images with low resolution」について

Lighthouse が指摘する「Serves images with low resolution」について。