Page Speed Insight shows differ screenshots in mobile version

Can someone explain, why page speed insight shows different screenshots on each picture? Is this something related to CLS Metric, in which our website is failing the assessment? I’ve already tested it with a website with a worse score than ours, and there the screenshots are correctly represented. Thank you in advance.

One blurry image isn’t much to go on, but I’d guess that you’ve got some late-loading CSS (that hides/relocates some of the early view) or perhaps some late-loading javascript (same thing). So what you’re seeing is how your page looked at various points in time, before everything was loaded and rendered. Without one blurry screenshot, it’s hard to say whether there’s anything here that’s a problem. It’d be interesting to see the actual page.

As @Cathy_Sarisky mentioned, there’s not enough to go on here. Sharing the URL would be great.

It’s likely related to CLS and what seems to be a menu. CLS (cumulative layout shift) measures how much things shift their location on the page. It looks like your menu is initially present and then hidden. This could occur because the JS (javascript) that hides it only loads after the initial page render. The way to fix it is to hide the menu by default and then use JS to show it.

thank you for the feedback. this is the website:

Thank you for your feedback. I really appreciate it :100:

Thanks for sharing.

It looks like this site is built with Next. Perhaps you’re running it with Ghost headlessly? Regardless, your pagespeed issues will need to be fixed in Next, which will make the debugging process a bit more difficult.

1 Like

Thank you, Ryan. This was really helpful, and I will forward it to our developer team. :love_you_gesture:

1 Like