Popular Posts Widget AJAX loaded, Image causing large Layout Shift

  • Resolved Carsten Meiselbach

    (@carstenmeiselbach)


    3 years, 11 months ago

    Hello & thanks for your great plugin.

    I’m using it for showing top posts in a widget including an thumbnail image. The Widget itself is AJAX loaded. The images are lazy loaded.

    Problem: layout shift happening at a higher rate which results into a negative Google CLS value.

    Without the thumbnail image it’s running fine. I already tried several things including putting the CSS code in the head.

    Do you have some suggestions here?

    Best regards,

    Carsten

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @carstenmeiselbach,

    The layout shifting is happening for two reasons:

    • Thumbnails being lazy loaded (although WPP renders its img tags with width & height attribute which should reduce the shifting), and
    • WPP loading its widget via AJAX: you have an empty container at first, then when the AJAX request is completed WPP injects the list into the page, causing a layout shift.

    You can disable both WPP’s image lazy loading and the loading of widgets via AJAX (Settings > WordPress Popular Posts > Tools) and that should help, or at least WPP will no longer be contributing to the problem. Note that since you’re using a caching plugin on this site (WP Rocket to be more precise) then doing this would also mean that your popular posts list will remain static for as long as WP Rocket caches your site’s pages (hours, a full day, etc) because it would no longer be loaded via AJAX.

    So, your choices are:

    • A static popular posts list that will update only when WP Rocket updates its page cache, or
    • A dynamic popular posts list & some layout shifting.

    Can’t have both. Pick your poison ??

    Plugin Author Hector Cabrera

    (@hcabrera)

    As an aside, if you’re using another plugin to lazy load images (WP Rocket?) you’ll want to disable WPP’s image lazy loading to prevent potential conflicts (having two scripts trying to do the same thing usually lead to unexpected behaviors / issues.)

    Thread Starter Carsten Meiselbach

    (@carstenmeiselbach)

    Hola Héctor,

    thanks for your feedback.

    Lazy loaded conflicts wasn’t my case here. I’ll disabled your setting, my WP Rocket is also disabled for this. Instead, I’m sing the Lazy Loader-Plugin from Florian Brinkmann, MarcDK, which is running fine for all my needs.

    I now find a solution for me.

    An inproper CSS setting for inner

    • items with overflow:auto was resulting into an incorrect box sizing. Concerning the empty container .wpp-widget-placeholder with undefined height: i added a min-height for .popular-posts and this way, the shifting is now at bearly nothing and not an issue for Google’s CLS assessment anymore!

      Since it’s not a good option to directly place the top post widget (without AJAX) and using very short page caching time, my given solution runs fine.

      Overall i try to keep requests also for other things like comments low when I’m using AJAX requests for this.

      So overall I could avoid using some of the named poison options here ??

      Best regards & keep healthy,

      Carsten

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Popular Posts Widget AJAX loaded, Image causing large Layout Shift’ is closed to new replies.