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 😛
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.)
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
