- This topic has 7 replies, 3 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
November 11, 2020 at 7:20 am #1526947Marin
Hi,
I’m getting CLS issues in Search Console. After I have run test in Chrome Dev Tools I found out those divs are causing problems. May I kindly ask you to have a look?
div.summary.entry-summary
div.woocommerce-product-gallery__image.flex-active-slideNovember 11, 2020 at 8:27 am #1527053LeoStaffCustomer SupportHi there,
This is the result I see from page speed insight:
https://www.screencast.com/t/G2n6AzC9AI’m guessing that the product image is being lazy-loaded by WP Rocket.
Can you try to exclude it?
WP Rocket’s support team should be able to help if you aren’t sure.
November 13, 2020 at 3:51 am #1529560MarinIt seems that main woo picture and galley pictures are not lazy loaded according to WpRocket support. They gave me next advice:
Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
I’m not quite sure how to achieve this đ
November 13, 2020 at 7:06 am #1529994DavidStaffCustomer SupportHi there,
i ran a Pagespeed Insights test on the link you provided, the top two elements were the main product image and the first gallery thumbnail.
This a function of the Wooocommerce plugin not GP.
The Main Image does have Width and Height Attributes, so there is no reason that the lazy loading should not work.
The Thumbnails however do not and again this is something we cannot fix as its the responsibility of Woocommerce. This did prompt me to follow up with woo. You can see my GitHub comment here:https://github.com/woocommerce/woocommerce/issues/25461#issuecomment-726815087
November 13, 2020 at 1:00 pm #1530328MarinThanks for urging WC to take care of this issue. Hope they’ll move this issue from low to high priorities soon
November 14, 2020 at 4:49 am #1530858DavidStaffCustomer SupportYou’re welcome. Lets Hope!
December 17, 2020 at 8:30 am #1584622MarinWP Rocket brings solution to this issue with version 3.8.
Here is excerpt from release notes:
2) Adding Missing Width And Height Attributes On Images
You can now make the most out of width and height attributes on images by merely selecting the new âAdd missing image dimensionsâ option.
⥠Adding the missing image attributes is the most effective way to improve the Cumulative Layout Shift metric, one of the Core Web Vitals. Does it ring a bell, right?December 18, 2020 at 2:25 am #1585516DavidStaffCustomer SupportWow – thats kinda cool – thanks for sharing!
-
AuthorPosts
- You must be logged in to reply to this topic.