LCP and CLS issues

Hi there,

the main issue looks to be the minified CSS delivery that the Nitro plugin is generating.
The header elements background images are set by CSS - and this CSS looks like it is deferred by Nitro.

This is also happening with the styles that set the SVG sizes.... on initial load they have no styles so are filling their container.

I would suggest speaking with Nitro on how to set up their optimized CSS delivery so these elements aren't affected.

Thanks David.
Do you know how I would find the selector?
This was their response: " if you wish to include the element that holds the site logo in the critical CSS, simply inspect the site, locate the selector and add it in the field. do the same with the page hero as well."

Cheers,

Dave

Various classes:

site logo(s): is-logo-image
Header Elements: page-hero
GB SVG icons: gb-icon

However the SVG icon class is for the <span> wrapper so that probably wouldn't work.

You may want to try: svg as thats the image element tag.... if not then you would need to edit the SVG HTML and include a class in it - for example i added svg-image as a class to this.

<svg class="svg-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <g id="Layer_1"> ..... more code here

thanks David. I will give it a shot targetting just "svg" and see if that works. If not I will give the svg's their own class.

cheers,

Dave

You're welcome