Hi
So I got the results from page speed insight down but performance is still not “green”.
For some reason the google boot downloads the default image size (in my case 900px) for both mobile and desktop and of course then First/Largest Contentful Paints are bigger than they should be on mobile.
I use the Srcerer stack to deliver images and there are several smaller ones i.e. 320,450,600 that should be used instead. In real time it works fine i.e. I have a series of images that has their size written on them so I can see that the browser changes images on both up and downscaling my browser window.
But why does the google boot not use this? Any idea how to fix?
Erland
I think it is probably simulating a device with a 2x display and therefore returning the 900px version instead of the 450px one.
But the boot itself contradict that since it is claiming that I send to big images for what it needs. If it was simulating a 2x display it would be satisfied with the 900px image.
Below is two examples. The first is the banner at 100vw. This is the image that gets too high FCP and LCP for mobile. With desktop I can’t do much, it say the image is 1200 displyed at 1102, not much to do and I get low FCP,LCP and 98 performance. perfectly ok.
For mobile it should have used the 450 image and since it is not, performance goes down to 88 and both FCP and LCP goes red.
The second example is an image further down the page and it displayed at 40vw and both desktop and mobile images are too big. Since this is outside the first “window” seen I suppose it does not affect FCP and LCP but the problem is the same, wrong size used.
And here it invents a size (800x1067) that I don’t have at all so there is no way I could supply that.
-
banner 100vw
width=“1200” height=“900” fetchpriority=“high” loading=“eager”
(The fetchpriority=“high” loading=“eager” increased performance a bit)
PageSpeed Insights:
desktop: This image file is larger than it needs to be (1200x900) for its displayed dimensions (1102x827).
mobile: This image file is larger than it needs to be (800x600) for its displayed dimensions (392x294). -
drake 40vw
width=“900” height=“1200”
desktop: This image file is larger than it needs to be (900x597) for its displayed dimensions (491x326).
mobile: This image file is larger than it needs to be (800x1067) for its displayed dimensions (360x479).
(It also want me too “Reduce unused JavaScript” and the only script mentioned is the google tag manger that is used for google analytics … :-) )
There is so much to (not) understand here :-)
How does the src argument get its value in Screrer?
I have width=“1200”, default image set to 600 and still the scr that page speed list is 900px
src=“https://woodart.se/resurs/images/Banners-im/storfläta-900.jpg”
where does that come from?
