GTM AND PERFORMANCE OF PAGESPEED

  • Hi,

    /* Google Tag Manager START */
add_action( 'wp_head','add_gtm_script_part' );
function add_gtm_script_part () { ?>
<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-543DQCK');</script>
<?php }

add_action( 'astra_body_top','add_gtm_noscript_part' );
function add_gtm_noscript_part () { ?>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-543DQCK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<?php }
/* Google Tag Manager END */

    The following codes to implement GTM causing site performance in in Google pagespeed,have there any smart way to do this?
    Thanks

Viewing 15 replies - 1 through 15 (of 16 total)

  • Which of the two are loaded? The noscript part is loading the code in the body part while the other part loads in the header part.

    What I do normally is create a child theme from my theme and modify the header.php directly, loading all Google, Facebook and other stuff right before the </head> tag.

    Have you checked only with PageSpeed? Have you tried other services like GTmetrix or webpagetest.org? They give you a more insightful feedback

    Thread Starter zo

    (@zotezo)

    Can we localize your Google Tag Manager script?

    What do you mean?

    Thread Starter zo

    (@zotezo)

    Hi,
    I have read one article that
    In 2020 Page Speed Insights user agents are: “Chrome-Lighthouse” for mobile and “Google Page Speed Insights” for desktop.

    <?php if (!isset($_SERVER[‘HTTP_USER_AGENT’]) || stripos($_SERVER[‘HTTP_USER_AGENT’], ‘Chrome-Lighthouse’) === false || stripos($_SERVER[‘HTTP_USER_AGENT’], ‘Google Page Speed Insights’) === false): ?>
    // your google analytics code and other external script you want to hide from PageSpeed Insights here
    <?php endif; ?>
    How to wrap my above code with this condition?

    /* Google Tag Manager START */
add_action( 'wp_head','add_gtm_script_part' );
function add_gtm_script_part () { ?>
<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-543DQCK');</script>
<?php }

add_action( 'astra_body_top','add_gtm_noscript_part' );
function add_gtm_noscript_part () { ?>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-543DQCK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<?php }
/* Google Tag Manager END */

    I′d test first which setting (script versus noscript) suit each test case (mobile versus desktop). Just add the <script> to test for both user agents and with <noscript> and see the results.

    Don′t get obsessed with reaching 100 in pagespeed, the important thing here is user experience.

    After that if you find a huge difference in time (not score) in any of the two we can give a try and modify php code.

    Thread Starter zo

    (@zotezo)

    Hi,
    In my case, Mobile page rank is below 50 though we are using google AMP plugins.
    We have tested that after deleting the whole code mobile page rank reached to 85
    But we can never avoid to use the third party script.

    Please help me to increase my page speed score in smartest way?

    Will this code really worth?

    <?php if (!isset($_SERVER[‘HTTP_USER_AGENT’]) || stripos($_SERVER[‘HTTP_USER_AGENT’], ‘Chrome-Lighthouse’) === false || stripos($_SERVER[‘HTTP_USER_AGENT’], ‘Google Page Speed Insights’) === false): ?>
// your google analytics code and other external script you want to hide from PageSpeed Insights here
<?php endif; ?>

    Thanks

    That code is cheating and only hiding the script from Pagespeed servers.

    You would have to put it in your header.php file of your theme right before <body> and copy inside the if sentence all the code you want to use for the rest of browsers.

    But the truth is that you haven′t actually test with GTMetrix or webpagetest.org how much this Javascript code is penalizing in the website performance.

    As I said, the important thing is UX (User eXperience)

    Thread Starter zo

    (@zotezo)

    Hi,
    PageSpeed Score in https://gtmetrix.com/
    (94%)
    YSlow Score
    (89%)
    Page Details
    Fully Loaded Time
    5.9s

    Leverage browser caching only issue with this-
    C (71)

    Leverage browser caching for the following cacheable resources:

    https://widgets.getsitecontrol.com/189686/script.js (5 seconds)
    https://v1.addthisedge.com/live/boost/ra-5d7601c5edd285a7/_ate.track.config_resp (58 seconds)
    https://static.hotjar.com/c/hotjar-1633014.js?sv=7 (1 minute)
    https://s7.addthis.com/js/300/addthis_widget.js (10 minutes)
    https://www.googletagmanager.com/gtm.js?id=GTM-543DQCK (15 minutes)
    https://www.google-analytics.com/analytics.js (2 hours)
    https://z.moatads.com/addthismoatframe568911941483/moatframe.js (3 hours 37 minutes)
    Only google page speed rank is showing low in mobile .
    Thanks

    If you check with webpagetest.org you will able to see also results for mobile browsers.

    You need to focus on first paint and when your site gets interactive, not the total load time, because normally javascript scripts are deferred and loaded after the rest (CSS, html, images).

    Thread Starter zo

    (@zotezo)

    Can you suggest anyone who will help me to fix this pagespeed issue or can you help me exactly what needs to be done.

    What exactly haven′t you understood? Have you tried to use webpagetest to check the mobile perfomance?

    I have told you where you have to add the php code you pasted in.

    Thread Starter zo

    (@zotezo)

    https://webpagetest.org/result/200607_7B_58b9f565d7f5e7754d884b9f1303115a/

    As you can see the speed in one of the mobile browsers is pretty similar:

    https://webpagetest.org/result/200607_WR_fca768faabc0dcaed3d8a378aa232c50/

    Thread Starter zo

    (@zotezo)

    We are using Astra theme.
    As google as recently introduce Core Web Vitals and our Rank is showing drastically changes in Mobile
    7,573 poor URLs,54 URLs need improvement,7,651 good URLs
    In desktop
    7,517 poor URLs,0 URLs need improvement,21 good URLs
    My Pagespeed score https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.zotezo.com%2F&tab=desktop
    on Mobile is 41 in Mobile and 86 in desktop
    Lighthouse Score-32
    https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.zotezo.com%2F#performance
    I am using google AMP plugins for Mobile.
    How to resolve the issue?
    How to increase google pagespeed insight rank nin mobile?

    Astra themes are normally responsive so using AMP plugins might make things worse. I would try without it first.

    Also I would try to disable CDN first. Cache, CDN and AMP should be the last resorts and not the first ones.

    I use plugins as asset clean up and defer javascript to try to cherry pick what you want to load (CSS and Javascript) on each page.

    Still as you can see from webpagetest, the loadting times are good. So if you want to trick Pagespeed you can try the PHP code in the header.php file of your theme or child theme.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘GTM AND PERFORMANCE OF PAGESPEED’ is closed to new replies.

Tags