- This topic has 11 replies, 2 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
January 20, 2021 at 11:34 pm #1627241Charbel
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!
-CharbelJanuary 21, 2021 at 2:06 am #1627361DavidStaffCustomer SupportHi 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.
January 21, 2021 at 2:20 am #1627376CharbelThank 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!
January 21, 2021 at 3:35 am #1627479DavidStaffCustomer SupportLooks 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.January 21, 2021 at 3:40 am #1627486CharbelThank 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?January 21, 2021 at 4:05 am #1627522DavidStaffCustomer SupportDo you mean to exclude wp-post-image in WP Rocket exclude section and then enable LazyLoad option in WP Rocket
Thats correct.
January 21, 2021 at 4:12 am #1627532CharbelThank 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!!!
January 21, 2021 at 6:00 am #1627634DavidStaffCustomer SupportLooks like something is still interfering with the loading of that image.
Can you try disabling the lazy loading option again.January 21, 2021 at 6:06 am #1627643CharbelThank 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!
January 21, 2021 at 6:52 am #1627881DavidStaffCustomer SupportLooks good to me – and it also fixes another issue which was the Image wasn’t displaying on Safari browser …. it is now 🙂
January 21, 2021 at 7:03 am #1627910CharbelMany Thanks @David, much appreciated!
January 21, 2021 at 7:27 am #1627953DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.