GAのイベントを PSI Bot のみ発火させないとスコアが上がる
ユーザーのアクセス計測は通常通り可能
- 計測ツールのアクセス時にGAなどの計測ツールは不要なのでは
- PageSpeedの計測完了まで最小コンテンツのみ表示するやり方に多大なコストをかけたくない
上記2点の理由から GA の読み込みを Lighthouse のアクセス時はしない方針にしてみました。
以下で紹介する、計測ツールを入れたまま高速化する外部ツールもあるのですが
このシンプルな実装方法がベストだと考えてます。
Before After
これだけで（おそらく）デメリットはなくスコアが大きく上がります。
半年経過しましたが、ペナルティーもなくインデックス数は増加
GAの計測も全く問題ありません。
結論First：実装はこのような形
<% # Hack: Lighthouseの場合GAの計測をしなくても良いためタグを読み込まないように変更（PageSpeedスコアに大きな影響あり） %>
<% unless request.headers["User-Agent"].include?("Chrome-Lighthouse") %>
<script>
gtag('js', new Date());
gtag('config', 'UA-30999999-14');
gtag('config', 'AW-439999999');
</script>
<% if Rails.env.production? %>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KSKS98');</script>
<% end %>
<% end %>
GAの計測タグ系があるとそんなに遅くなるのか？
重要：体感値では全く速度は変わりません
Chromeのパフォーマンスタブで計測しても、読み込み速度 FCP LCP には大きな影響はありません。
ただ、PageSpeedの計測を行ったときに TBT （Blocking Time）だけが増加します。
しかし、ブラウザのパフォーマンスタブ、分析情報タブでいくらTBT（Blocking)を探しても
Lighthouseで指摘されているようなブロックはどこにも見当たりません
果たして、体感速度に影響のないスコアのためだけの改善は必要でしょうか？
おそらく ga() のメソッドの実行結果を lightshouse は待機していて
実際の表示速度に影響はないもののBlockされている判定をしてしまっているのではないかと思ってます。
GA,GTM タグあり
レンダリング：1.2秒
スコア70点
レンダリングはなんならタグがないより早い（3回計測）の中央値
スコアはTBTが上がってしまい70点台と大きく下がる
GA、GTMのタグなし
レンダリング：1.5秒
スコア90点台
GAやGTMのタグがあってもなくてもユーザの体感速度は変わらない
（むしろタグがない方がChromeのパフォーマンス計測では遅かった）
GAのタグとGTMのタグにより発生しているTBTがゼロになるのでスコアは上がる
別のアプローチも検討しました。
- web worker を用いて Thirdparty 系ライブラリを平行スレッドで読み込む
- Web WorkerはDOM APIにアクセスできないため不可能だった
- Party Town を用いて DOM アクセスを強制的に実行するのはありか？
- PageSpeed計測のためだけに、こういったBeta版ライブラリを導入するコストは高い ＋ 不安定
こういった外部ツールを利用することも考えたが
要は本来必要なファイルを遅延させたり
部分的に切り取ってレンダリングだけ優先させたりと
全てのコンテンツレンダリングをさせる前に評価させて
本当にユーザーが使うファイルは後からロードするという
”Googleを騙す” ことに変わりはないので
こういったツールを使うのも
Light house のアクセスだけGAを読み込まないことも
本質的には同じことをしているのではないだろうか
それであればこういったツールを使う方が煩雑でメンテナンスコストを上げるし
不要な js を追加で読むことにもなるので、本質的ではない。
ゆえにこういった対応が現状のウェブ業界におけるベストなのではと模索したがどうでしょうか。