Cumulative Layout Shift

  • ttttttttttttttttttttttttttt

    (@ttttttttttttttttttttttttttt)


    4 years, 5 months ago

    Google has a “new” section in Google search console called “core web vitals” and one of the issues they pick up is Cumulative Layout Shift.

    So here the rub.

    We use your plugin so that our pages load faster to create a better experience for visitors – awesome!!

    However, Google now determines that by using this plugin we create a Cumulative Layout Shift issue as the reader scrolls down the page.

    Google seems to be confused in what is a good experience for the customer, a faster loading page – a page that loads the images as a person scrolls down the page OR a page that loads all the images and has not “CLS” issue but takes much longer to load!

    So my question is – is there a way to address Googles issues so we can have a faster loading page AND avoid CLS issues?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter ttttttttttttttttttttttttttt

    (@ttttttttttttttttttttttttttt)

    clearly there is little support given its almost 6 days and nothing just silence

    Would you provide us with a link to the affected page? I can tell you what CLS is caused by. It is not as complicated as you believe in…

    If the lazy loader displays nothing in place of an image before it’s in the viewport, then this would trigger the CLS test to register as a shift on the page. For example, a carousel banner on the homepage. Upon first load, the banner isn’t rendered at all (content is bumped up to menu.) Of course, right away the plugin detects that the images in the banner are in the viewport, so its check triggers the images to load via ajax. This would register as a layout shift, e.g. the position or size of elements / height of the page changes during the page load or while you are browsing the page.

    If this is the case, then the solution would be for the lazy loader to display placeholder images of some sort in place of the original image being lazy-loaded. These images would be at the final output size of the image, so keep the layout constant. Problem is, this would have to happen prior to the page load, so it would have to be augmented server-side, or cached in advance in some way, so upon first load of the content, the images are ‘there’ and taking up the correct amount of space.

    If the page loads initially with no images, and the placeholders are added after with an AJAX call, the CLS will still register…

    I had already asked about adding a filter to handle the reflow issue (layout shift) long time ago but it went unnoticed.

    The proposed solution is mentioned there, this could be built into the plugin itself now that google page speed insights prioritises this. WP Lazy Load with CLS would be great for marketing this time ??

    https://www.ads-software.com/support/topic/improvement-prevent-reflow/

    • This reply was modified 4 years, 5 months ago by Pratham.

    In my experience, if used properly and as long as you have set image height and width in your WP theme correctly, A3 lazy load increases CLS only marginally (from 0 to 0,026 in my case). Yet, a possible workaround is to disable above the fold images (header logo and feature images, for example) lazy loading altogether. I’ll try, and I’ll give you my two cents after testing it.

    No way. I disabled lazyloading for feature images, logos, and so on. No change. Furthermore, I can’t identify where the CLS occurs. It’s probably too fast to tell it visually. It’s possibly something related to the sidebar (CLS is always 0 on mobile either you have enabled lazy loading or not; and I removed the sidebar on all my mobile templates). Some tests show CLS=0 also on desktops; yet, Google Pagespeed Insights always shows a CLS increase between 0.026 and 0.030 when A3 lazyLoad is activated on desktop. It’s a real headache…

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Cumulative Layout Shift’ is closed to new replies.