info@manfridayit.co.ukinfo@manfridayit.co.uk
message ManFridayITSend Message
LinkedIn ManFridayIT
phone ManFridayIT01332 949783

Failing Core Web Vitals with GA4

Following on from a piece of research on Google Analytics code slowing a client site down I carried out a year or so ago – I recently added GA4 to my site, I did some investigation of whether its introduction would affect site speed. I was in the process of a site re-design and the ‘Before’ analysis was done without any kind of Google Analytics on the website.

Lighthouse Grab Before GA4 Code Added

Lighthouse Grab After GA4 Code Added

LCP timelag with GA4

The Analytics code added over half a second onto LCP.

I tried putting the GA4 code in the footer, but the speed was still falling short; pre-loading the file and pre-connecting to the Google file locations took a bit off LCP but appeared to add it onto FCP. Deferring the file made no difference.

Lighthouse was giving a warning about the JavaScript file adding .15s onto page load time

After trying a combination of pre-load, pre-connect (to both Google Analytics & TagManager as the GA4 code calls files from both), defer, async, code in header, code in footer I decided to try another Analytics package, HotJar (the free version) but that gave about the same result delay-wise. (BTW HotJar offers the facility of a Heatmap, showing where on each page is the busiest for user interaction – GA used to offer this back in the day.)

Reverting to GA4 I put the following JavaScript in – the code basically defers the initiation of the GA4 script loading until the page visitor either :

1 – Scrolls the page. (scroll)

2 – Moves the mouse. (mousemove)

3 – Touches the screen. (touchstart)

4 – Or 2 seconds elapse. (DOMContentLoaded)

<javascript>
document.addEventListener(‘scroll’, initGTMOnEvent);
document.addEventListener(‘mousemove’, initGTMOnEvent);
document.addEventListener(‘touchstart’, initGTMOnEvent);
document.addEventListener(‘DOMContentLoaded’, () => { setTimeout(initGTM, 2000); });
function initGTMOnEvent (event) {
initGTM();
event.currentTarget.removeEventListener(event.type, initGTMOnEvent);
}
function initGTM () {
if (window.gtmDidInit) {
return false;
}
window.gtmDidInit = true;
const script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.onload = () => {
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag(‘js’, new Date());
gtag(‘config’, ‘YOUR-GA-ID’);
}
script.src = ‘https://www.googletagmanager.com/gtag/js?id=YOUR-GA-ID’;
script.defer = true;
document.getElementsByTagName(‘body’)[0].appendChild(script);
}
</javascript>

This resulted in the page load time reverting to around its original starting point.

Lighthouse Grab After GA4 Code + JS Deferral Code Added

Maybe .6 of a second isn’t a great deal on a relatively low traffic, non-transactional information/ lead generation site, but it can make a difference between passing and failing Core Web Vitals. By deferring the Analytics code for up to 2 seconds there is the risk of missing the odd quick bounce.

However, on a higher volume transactional site, .6 of a second speed increase can equate to a much lower abandonment rate and consequent sales increase.

As part of ManFridayIT’s SEO Services – Page Speed Increase is offered to improve your website’s performance.






Comments

  • You, sir, are awesome.

    It’s shocking that on one hand Google wants LCP < 2.5s, but on the other, GA4 can cause a floor on it that approaches 2.5s.

  • Your ideas absolutely shows this site could easily be one of the best in its niche

    Looking forward to further updates

    ManFridayIT welcomes a Reply or Comment

    Your email address will not be published. Required fields are marked *