Lazy Loading, issues with CLS and your default placeholder image
-
The default placeholder
srcthat is set on lazyloaded images is a base64 encoded image. This image is square and forces the image into a square aspect ratio while the source image is loaded. This causes Cumulative Layout Shift (CLS) on every single image that is not square.CLS is a core “web vital” as set by Google. They have made it into a ranking signal. This means every single one of your users is negatively impacted by using lazy loading via your plugin. Countless sites.
On the latest version of your plugin (3.8.4 at time of writing), in
core/modules/class-lazy.phpline 467 you have the line:Helpers\Parser::add_attribute( $new_image, 'src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' );This forces the square base64 encoded image in as a placeholder. I recommend a couple things from here:
First, your team needs to understand the google web vitals, specifically CLS.
Then the best service you could give your users is to allow the natural width and height on the
imgtag to take over. Anything impacting those dimensions unnaturally will most likely negatively impact CLS, which could impact search engine ranking scores. So if you want to use a base64 image, you need a method of creating a placeholder that is at the very least the same aspect ratio of the source image, but should really be the same dimensions all together. It will need testing to ensure no CLS.However, in my case, I spent a good amount of time tracking this all down, to that one line of code. And for me, no base64 placeholder image makes my site work much more smoothly, and removes CLS for every single image that was lazy loaded, which can compound on pages with lots of image, resulting in a very poor CLS score.
So, I could very easily comment out the line of code, and the problem is “fixed”. But as a potential stop-gap that is backwards-compatible and would help other users, update the line of code with a filter on the placeholder src like so:
Helpers\Parser::add_attribute( $new_image, 'src', apply_filters( 'wp_smush_lazy_load_placeholder_src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' ) );This means in my theme, I can add the following to not use your base64 image:
add_filter('wp_smush_lazy_load_placeholder_src', function($src) { return ''; });The only enhancement to this filter would be to pass any image info to the filter (mainly width and height) so the user could dynamically determine what placeholder to use, if desired.
And just to note, I’m not the only user noticing this issue, as there are closed topics from a month and a year ago. This is an issue, you need to deal with it, and you need to promote good patterns for your users. I’d imagine most users will not notice and just carry on with CLS all over their site. Please, help those people out, and fix the CLS issues in your base plugin.
– https://www.ads-software.com/support/topic/lazy-loading-leads-to-cls/
– https://www.ads-software.com/support/topic/preventing-lazyload-reflow/
-
Skipping images negates the point of using the plugin in the first place. This is a non-solution.
The webvitals doc states:
To ensure
width and height attributes can be set, each image should use the same aspect ratio.
Your default placeholder src image is breaking this. It’s not the same dimension as the image that will load unless it’s a square image.
The point I’m continuing to try to make is that out of the box, lazyloading with your plugin causes CLS, and CLS is now a ranking factor for google. There isn’t much more to be said.
While I appreciate your time here and thank you for the plugin, you are skirting around the core issue, as it was not addressed in the other threads trying to bring this up. There just has to be a better way than with the default base64 image. My CLS scores improve ACROSS MY WHOLE SITE (millions of visits/month) by commenting out that line of code mentioned in my first response. You have to realize something is very, very wrong if this is the case.
If I have to continue to make an edit to the plugin source code – I’ll be looking for other lazyloading solutions, or roll my own.
I’d also be happy to discuss options with your team further to find a real solution.
It took me a while to come to the conclusion that WPMU Smush was causing me some major formatting issues and performance issues for Woocommerce Archive pages where I have Featured Imaged Thumbnail set to a non square image. My site has all portrait aspect ratio images, Magazine Covers. The discussion here is over my head, all I can say is that when I disabled Lazy Loading in Smush on my Archive Pages, all my problems went away.
- The topic ‘Lazy Loading, issues with CLS and your default placeholder image’ is closed to new replies.
