[Support request] Several Issues – Core Vitals

Hi there,

Can you set up a live link for your site so we can check w/ image is getting this flag and the CLS?

If it’s the logo. I believe there’s a fix applied for this on GP Premium 2.0.

Also, I cannot get GP Premium to update. The update keeps failing. I think I have the same issue with updating my GP Theme since it’s a child theme. I’m using Nitropak. There isn’t an option to quickly fix this like WP Rocket has btw. I tried switching to WP Rocket, but my speed scores are horrible with it.

Try downloading the plugin file and upload it manually. 🙂

Hi there,

GPP 2.0 should fix the missing width/height attributes – you can try disabling the cache/optimization plugin. Remove the mobile header logo, publish, the re-add the logo. This should ensure that any cached HTML gets updated… however that isn’t the cause of the CLS.

If you:
1. open the site in Chrome Incognito (no caching)
2. open the Developers Tools ( Right Click > Inspect )
3. Select the Mobile responsive view ( set that to Moto 4G as that what PSI uses).
4. Open the Performance Tab, and set the Network to Slow 3g – then hit the reload button in the Performance tab.

Whilst its reloading you will see the site loading slowly thanks the network – and you can see which elements are shifting.
Once the performance profile is completed it will provide you timeline film strip of the site as it loads.
It also marks out where the Layout Shift is occurring.

The issue i see is the nitro cached CSS files being loaded in an incorrect order as you will see the text loads, with the correct style, then it shifts to a different style and then reverts back again… all of those changes align with the loading pattern of the nitro CSS files.

I am not seeing the logo displayed in the PSI report as a CLS contributing Element:

https://www.screencast.com/t/WrOdPXuJ3a

If you ran the performance test you should have seen the shift in layout being caused by the text styling changing twice which in turn is what causes the above elements being moved.

Nitro is changing the loading order of CSS – its generally becuase of a Critical CSS or Optimized CSS option in the plugin – i am not familiar with that particular plugin. But what i can see is:

a. Some styles are being loaded in the head – which are applied before the page is rendererd.
b. Some styles are being combined and loaded inline in the Footer – which are applied after the page is rendered.

This is the main cause of CLS issues – as the browser is not getting the right CSS styles on first load.
You would need to speak to Nitros support on how to fix that.

Personally we only use Autoptimize on our sites with server side Page Caching Enabled.
On some builds i have used PerfMatters for disabling global running scripts on pages that are not required.

We see similar issues as this on WP Rocket and Litespeed Cache Plugin as well.
The majority of them are caused by those plugins automatically creating Critical CSS or Optimizing CSS delivery.

When i last checked your site the FCP and LCP times were around 1.2seconds which is ridiculously fast. Sometimes a small sacrifice to those times to eliminate another issue such as CLS is worth taking. I would work through the Nitro plugins options, disabling one at a time to see which is causing the CLS. The retest the site without that option enabled. You may find its a small increase in FCP/LCP times and zero CLS.

Problem with a lot of the additional features with optimization plugins is they only increase the perceived performance of the site – which is great if you just care about the initial load time – but the code they defer loading to achieve those times still has to be loaded – if like in this case its in the incorrect order you get CLS.