web-dev-qa-db-fra.com

Pagespeed Insights signale que Google Analytics bloque le thread principal lors du chargement de la page

Je poursuis la vitesse de la page, en partie comme preuve que l'obtention de 90% + est toujours réalisable.

Mon principal problème est maintenant Google Analytics. Dans l'exemple ci-dessous, il est chargé via Google Tag Manager, il n'y a donc qu'un extrait de code GTM en haut de l'écran.Cependant, la vitesse de la page semble indiquer qu'elle est GA (et GTM) provoquant le plus grand retard.

Existe-t-il un moyen d'empêcher GA de ralentir le chargement de la page? Le script GTM doit-il être défini comme asynchrone (étant donné que nous pouvons manquer certaines données analytiques)?

sp

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

Je ne suis pas d'accord avec la réponse de Conors.

Comparons ces deux méthodes: Pour GTM, vous avez besoin dans le head-tag

<!-- 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) -->

et dans le body-tag

<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>

Utilisez "async" pour charger ce script (Google ne vous le dit pas)

Pour Analytics.js, vous n'avez besoin que dans la balise 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>

"async" augmente également les performances.

Testez maintenant les deux options avec Google Pagespeed Insight et les résultats seront meilleurs si vous choisissez la deuxième méthode. C'est déroutant, car la première méthode entraîne moins de trafic de Javascript, ce qui devrait vous donner plus de points dans Pagespeed Insight. Compte tenu de cela et du fait que Google pousse GTM, je suppose que le résultat inférieur en choisissant la première méthode n'est pas prévu par Google. Mais il existe d'autres outils pour mesurer les performances des pages ...

Je me demande si d'autres utilisateurs peuvent confirmer cette conclusion.

À la vôtre, Mathias

1
Mathias Grimm

Je recommanderais certainement de charger GTM async, il est probable qu'il soit chargé en moins d'une seconde, de sorte que vous ne manquerez pas beaucoup d'événements. Dans la documentation analytique de Google, ils recommandent de le charger en mode asynchrone. Je pense que le gestionnaire de balises est le même. Sur mon site, je le charge en mode asynchrone, et cela fonctionne bien, je reçois bien les événements de chargement de page.

1
Conor Grocock