web-dev-qa-db-ja.com

Pagespeed Insightsは、Google Analyticsがページ読み込みのメインスレッドをブロックしていると報告しています

私はページの速度を追跡しています。これは、90％以上を常に達成できることの証明の1つです。

私の主な問題はGoogle Analyticsです。以下の例では、Googleタグマネージャーを介して読み込まれているため、画面上部にGTMスニペットが1つしかありません。ただし、ページ速度の分析から、GA（およびGTM）最大の遅延。

GAによってページの読み込みが遅くなるのを防ぐ方法はありますか？GTMスクリプトを非同期として設定する必要があります（分析データを見逃す可能性がある場合））？

sp

google-analyticsjavascriptpage-speedgoogle-tag-managergoogle-pagespeed
4
RemarkLima

Conorsの回答に同意しません。

これら2つの方法を比較してみましょう：GTMの場合、ヘッドタグに必要です

<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->

ボディタグ内

<script async>(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-XXXXXXX');</script>

「async」を使用してそのスクリプトをロードします（Googleは通知しません）

Analytics.jsの場合は、bodyタグでのみ必要です

<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.Push(arguments);}gtag('js', new Date()); gtag('config', 'UA-56544056-1');</script>

ここでも「非同期」はパフォーマンスを向上させます。

次に、Google Pagespeed Insightで両方のオプションをテストします。2番目の方法を選択すると、結果が良くなります。最初の方法ではJavaScriptからのトラフィックが少なくなるため、混乱を招きます。Pag​​espeedInsightでより多くのポイントが得られるはずです。それと、GoogleがGTMを推進しているという事実を考えると、最初の方法を選択することによる低い結果は、Googleが意図したものではないと思います。しかし、ページのパフォーマンスを測定する他のツールがあります...

他のユーザーがこの発見を確認できるかどうか疑問に思っています。

乾杯、マティアス

1
Mathias Grimm

私は間違いなくGTM非同期の読み込みをお勧めします。とにかく1秒未満で読み込まれる可能性があるため、多くのイベントを見逃すことはありません。 Googleの分析ドキュメントでは、非同期で読み込むことを推奨しています。タグマネージャーも同じだと思います。私のサイトでは、非同期で読み込んでいますが、正常に動作し、ページ読み込みイベントが正常に取得されます。

1
Conor Grocock