Archived topic
How to avoid large layout shifts Dispatch Theme (GTMetrix)?
11 replies · Started by Charbel on January 20, 2021
Hello Team,
How can I avoid the large layout shifts with Dispatch Theme reported by GTMetrix report?
https://gtmetrix.com/reports/charbelnemnom.com/U7OfpJ63/
I have seen @David's recommendation here, but this does not apply in my case: https://generatepress.com/forums/topic/avoid-large-layout-shifts/
I want to mention that I am using WP Rocket and Combine CSS files is already turned OFF. I don't use that option.
Your help is highly appreciated!
Many Thanks!
-Charbel
Hi there,
the two major issues with cache plugins are:
1. Critical CSS - checking the source code of your site, i can see this is enabled in WP Rocket.
2. Lazy Loading of images - the first WPSP post in the header element is being lazyloaded.
Try disabling both these options to see which one is causing the main issue.
Thank You @David for your quick response, much appreciated!
I have disabled LazyLoad for images only in WP Rocket and cleared the cache.
https://gtmetrix.com/reports/charbelnemnom.com/MxYzEnMJ/
Its look like it's resolved. Can you confirm it from your side please?
LazyLoad is already part of WordPress 5.5+, so I still get benefit by disabling it in WP Rocket.
https://wp-rocket.me/blog/lazy-loading-wordpress-5-5/
They said that we can disable the LazyLoad option in WP Rocket if you want to use WordPress’ native image lazy-loading. However, many major browsers don’t support the new loading attribute yet. Plus, WordPress focuses its implementation only on images. If your website includes many images, videos, and embeds, WP Rocket’s LazyLoad is still the better overall option.
Many Thanks @David!
Looks good to me - so we know its the lazy loader.
In WP Rocket you have the option to exclude images based on a CSS Class. Try adding: wp-post-image that is a specific class on the WPSP image in the hero.
Thank You @David,
Do you mean to exclude wp-post-image in WP Rocket exclude section and then enable LazyLoad option in WP Rocket, or keep LazyLoad disabled?
Do you mean to exclude wp-post-image in WP Rocket exclude section and then enable LazyLoad option in WP Rocket
Thats correct.
Thank you @David, I have done that.
It looks like that we solved this issue by enabling LazyLoad for all images and excluding wp-post-image from LazyLoad.
The strange thing that sometimes GTmetrix is still complaining about large layout shifts.
No large layout shifts: https://gtmetrix.com/reports/charbelnemnom.com/ARWIz4E4/
Avoid large layout shifts: https://gtmetrix.com/reports/charbelnemnom.com/S6mM0Hgg/
Many Thanks!!!
Looks like something is still interfering with the loading of that image.
Can you try disabling the lazy loading option again.
Thank you @David,
I have disabled that option again in WP Rocket.
Could you please check and confirm?
No large layout shifts: https://gtmetrix.com/reports/charbelnemnom.com/fF1QUaRm/ and her: https://gtmetrix.com/reports/charbelnemnom.com/FO23eD9v/
Many Thanks!
Looks good to me - and it also fixes another issue which was the Image wasn't displaying on Safari browser .... it is now :)
Many Thanks @David, much appreciated!
You're welcome
