みなさんこんにちは。今回はサードパーティーのJavaScriptを高速化する方法について紹介します。
はじめに
例えば Google Adsense や Google Analytics など第三者（サードパーティー）のスクリプトを head タグに埋め込んだりした経験はあるでしょうか。まさにその自分ではない第三者が開発したスクリプトのことをサードパーティーのスクリプトといいます。サードパーティーのスクリプトは未知なるスクリプトであり、場合によってはパフォーマンスに大きな影響をもたらします。
文字で説明するのには少し難しいかもしれません。実例で見ていきましょう。以下は筆者のサイトで読み込まれるリクエストになっています。 CSS や JavaScript が読み込まれていることが分かります。ここでサードパーティーとして、Google AdSense （ adsbygoogle.js )や Value Commerce ( mylinkbox.js ) の JavaScript が読み込まれています。
一方で、以下は筆者のLighthouseで計測したクリティカルなリクエストの一覧（初回画面描画に必要なリソース）ですが、先ほどのスクリーンショットに記載されていたスクリプトは表示されていません。なぜでしょうか？実はページ表示とは別に非同期（別の時間軸）で読み込ませているからです。非同期で読み込むことによって初回の画面描画をふさぐことがないため、通信量は変わりませんが、ユーザへの画面の反応を早くさせることができます。これがサードパーティーのスクリプトの非同期読み込みという技術になります。
非同期読みこみをさせる方法
非同期読み込みを指定する方法は簡単です。まずみなさんは JavaScript を埋め込むときに以下のようなコードを記載していることと思います。
<script type="text/javascript" src="third_party_script.js"></script>このスクリプトタグに 非同期 を示す async を追加すればよいです。具体的にはこのように書きます。
<script async type="text/javascript" src="third_party_script.js"></script>この方法は特にサードパーティーのスクリプトには有効な手段になります。アクセス解析や広告などは自分たちのコードとは独立して実行することが可能だからです。独立という言葉が難しいかもしれませんが、互いに影響を及ぼさないということです。逆に影響を及ぼすコードとは、A → B の順で読み込まねばならないコードが該当し、AのあとにBのスクリプトを読み込まねばならないため、これは非同期にさせることはできません。
なぜこれだけで表示が高速化されるのか不思議かもしれませんね。逆に async がない場合は何が起きるのかをイメージするとわかりやすいです。async がない場合は、そのスクリプトをダウンロード・実行するまで画面の描画が停止されます。つまり、Google Analytics のスクリプトであれば、Google のサーバにアクセスして、ダウンロード、実行までを待たねばならないため、場合によっては画面表示までの時間を大幅にブロックすることになります。
類似するdefer という属性もあります。しかしサードパーティーにおいては独立したコードであることがほとんどであるため、この記事では紹介しません。詳細を知りたい方は 検索をかけてください。
まとめ
今回はサードパーティーのスクリプトの非同期読み込みの話でした。ただキーワードを付与しただけかと思われるかもしれませんが、これが実に強力な機能になっています。ぜひ自身のサイトを確認しています。丁寧なサイトであれば、スクリプトをコピーさせる段階で付与している場合があります。気づかぬうちに付いていたというケースも多々あることでしょう。
それでは次の記事でお会いしましょう👋