Hi
I just uploaded my new website and tested it with PageSpeed Insights and it was pretty depressing, red or orange everywhere.
Well, I started trying to get the cumulative layout shift down because it’s probably the one that bothers me the most but I can’t really get it to work. I’m using Sourcer as a banner and trying to get the browser to understand how tall the image is.
So I’m trying to set the aspect ratio but it doesn’t make much difference. Is there any more magic needed to make it work?
(style=“aspect-ratio: 1.6;” in custom attributes)
Try adding width and height into the custom attributes box for the default image e.g. width=“600” height=“400”
You may need to check the box for ‘always make 100% width’ (not at my computer to check the wording for this but it is something like this).
I have a faint memory of already doing that but I’ll try again but the 100% is not an option because it think it will chop my images and that’s not ok here (not sure here but have a faint memory of that too)
But why then does not (for example) aspect-ratio 320/200; work? That should give the browser what it needs.
I might add that the scaling as such with Screrer work like a charm, rescaling in realtime on both down- and upscaling the window.
And a follow up question; is there a better (i.e faster) way of doing the banner image?
and one more follow up question; should it be without the “style…” thing i.e.
does width=“600” height=“400” work “as it is”?
Am out and about so just a quick answer. You don’t need the style bit - just add the width and height with values (and no units).
The 100% thing won’t cause any cropping. It will just make sure that the image fills the space and not show at the dimensions you are providing.
ok that was an improvement but now the image did not scale anymore above 600x375. It scales down from that but not up.
Desktop is now ok
Mobile is zero on layout shift but still bad on FCP and LCP
So I changed to width=“1200” height=“750” and that was the trick, the bad FCP and LCP is now gone too.
without the “100%…” FCP and LCP went back to old bad numbers.
(Both width=600 height=375 and
width=“600” height=“375” give the same code
and end up in the right place in the src tag)
Thanks