Google Analyticsのスニペットの挿入位置と読み込み速度について

経緯

サイトの高速化について調べていた際に、ふとGoogle Analyticsのコードスニペットを置く位置によってサイトの読み込み速度が変わるのか気になったので調べることにした

環境

Windows 10 64bit
Visual Studio Code 1.66.1
Live Server 拡張機能 5.7.5
Chrome (Stable) 100.0.4896.88
ローカルマシンのこの環境で、Live Serverでたてたループバックサーバーにアクセスし、ChromeのDevToolのLightHouseで測定。
キャッシュ等が邪魔したりとかしないように、ゲストユーザーで行った。
また、ばらつきが予想されるので、各設定で3回ずつ以上行って平均をとった。

結果

実験するにあたり、①<head></head>内のサイト用のスクリプトファイルの上、②下、それから③<body></body>の一番最後の3パターンで試してみました。
結果はこちらです(すべて単位は秒)
そしてこの結果をまとめてみるとこうなります

結論

以上の結果から、<head>タグの一番最後のほうに置いておくのがいいことがわかりました。
ちなみに、実験に使ったGoogle Analyticsのコードはasyncを付与していました(これはもともとの仕様かもしれませんが)ので、そちらはぜひつけておきたいところです。
できれば、https://www.googletagmanager.comへのpreconnectもしておいたほうがいいかもしれません。
<link rel="preconnect" href="https://www.googletagmanager.com">
今回はここまでです。ぜひ参考にしてみてください(・ω・)

コメント