-
I tested my site with Pagespeed Insights and received this error:
Avoid large layout shifts 3 elements found.
I used Smush Pro and Litespeed Cache. I disabled lazy-load on both and all CSS settings in Litespeed Cache, but I still encountered the error.
What could I do now to solve this? -
Hi there,
see here:
https://app.screencast.com/Br2AFheEgSxCl
Your logo is being lazy loaded, and the lazy loader is using a Square Placeholder Image, which is terrible and the developer really should fix that, as what happens is the browser saves too tall a space for the actual image.
You should report that issue to the lazy loader developer.
In the meant time check the lazy loader settings, they generally provide a field to exclude images with a specific CSS Class use:
is-logo-image -
Thanks, David. I have successfully resolved the issue with the logo. However, Google continues to display this message. How to solve these?
-
Hi there,
It’s still the logo causing that CLS.
It seems to still be lazy-loaded with a square placeholder showing while the image is being loaded.
Could you double check if where really able to exclude the logo from that feature?
-
I have checked and removed the lazy-load of the logo from Litespeed Cache. You can see here.
I also disabled lazy-load on Smush Pro and WordPress core.
Can you help me check more closely what the cause is? You can access the website with private information. -
I’m not getting any CLS anymore: https://share.zight.com/7Kun6EJK – this just confirms that the issue is from the optimization(lazy-loading) – could you try retesting?
-
Yes, all is good. Thanks, Fernando. Could you tell me what you did to get that result?
-
I thought everything was fine but now when I test it again it still has the same error. Can you check again for me?
-
I didn’t do anything. I just tested again with your setup where the logo isn’t lazy-loaded.
I can see that you’ve activated lazy-loading again, and the logo is again lazy-loaded which caused the CLS issue again.
As mentioned, you need to ensure that the logo isn’t lazy-loaded.
-
How can I check if lazy-loading is disabled on the logo? Because I turned off all other lazy loading features, leaving only Litespeed cache.
-
If you Right Click > Inspect the logo, and check the HTML in the browser dev tools you will see this:
https://app.screencast.com/NrLoVeRghczWW
There is the
data-attribute that the lazy loader uses to store the image URL
And thelazyloadedclass that gets added once the lazy loader had loaded it.I also see in the HTML comments ( after the footer ) that the site us running a Hummingbird cache….
-
Thanks, David. I completely deleted Hummingbird Cache and everything is fine now.
-
Glad to hear that!
- You must be logged in to reply to this topic.