See why WordPress is adding native lazy load form images and what it means for our site speed and the plugins we already use to do it.
What is Lazy Load?
Site images cause poor page load speed more than any other site element.
READ: Why Image Reduction and Optimization is the Quickest Way to a Fast Site
One way to combat that issue is to delay the loading of the image if it is “below the fold” so that it doesn’t load until a site visitor scrolls down to that section of the page or post.
Lazy load can also delay loading of videos if they are embedded using an iframe.
READ: Embed a YouTube or Facebook Video as iFrame for Faster Page Load
So, lazy load is most definitely something we want to use to help speed up our sites.
That’s why the best caching plugins offer it.
A Brief on Lazy Load in WordPress
Because so many optimization plugins do lazy loading differently, in 2018 a Trac ticket was created in the WordPress dev forum to standardize lazy loading by rolling that function into the WordPress core.
Since then, Lazy Load was released as a Feature Plugin in Sept 2019, so folks could test it.
Featured Plugins are a precursor to new functions rolling into the WordPress core so they can work the bugs out and give plugin developers who may be affected by it a chance to test and adjust before it rolls out to the majority of WordPress site owners.
Now, the WP devs believe their version of lazy load functionality is ready to release to the general public in the WordPress 5.4 update, which is scheduled to roll out at the end of March 2020.
It’s a Different Kind of Lazy Load
The way WordPress wants to do lazy load is very different than how it’s done now with premium caching plugins.
The WP way is browser dependent, meaning it doesn’t use Javascript.
That’s a significant change.
The WP devs believe that using JS is a very inefficient way to do it as it literally rewrites the post/page code to achieve lazy load.
They want to streamline the process and make it happen in the browser, not on the site.
The browser will look at the view port of the device the site visitor is using and determine where the “fold” is (what you can see before scrolling) and just not load images below that.
The images will load as the site visitor scrolls to that part of the page.
This is very similar to the way the Chrome browser intends to support lazy load natively too.
Lack of Wide Browser Support
Here’s the rub.
Not all browsers support this type of lazy loading.
At the time WordPress will release lazy load into the core, only a few browsers can support it, including:
- Chrome
- Opera
- Edge
- Android
While Chrome is the dominant browser with over 50% of all internet users, that still leaves out too many of our site visitors.
I’m thinking of the huge chunk of iPhone users who still rely on Safari as their native browser.
Here’s another rub.
The delay image load may cause latency issues.
This means that the visitor scrolls to a section of the page that has another image and then has to wait for that image to load before scrolling further.
That could be especially problematic on a slow mobile connection.
Lazy Load Plugin Detection
The new WP lazy load feature is supposed to auto detect if you already have a plugin doing lazy load for you.
In that case, it will automatically turn itself off.
And in case it doesn’t detect your plugin properly, or you just don’t want to use it at all, it should have an opt-out feature in the Customizer.
This makes it an all-or-nothing feature.
Why Browser Lazy Load May Not Work Well
Here’s my concern with how both Chrome and WordPress want to implement lazy load.
Control image application.
We need an easy way to control which images are lazy loaded.
Some folks want to exclude their full-size images embedded in the content from lazy load.
They only want sidebar and footer, or other widget area images to be lazy loaded.
Control page application.
We also need to be able to control which pages/posts have lazy load turned on.
For instance, we need to be able to exclude carts, logins, and contact form pages from having lazy load as those may have images for payment or reCaptcha that need to load even if they are below the scroll.
Plugins allow us this type of granular control.
The WP and browser ways of doing it are all or nothing.
Control placeholder image.
While we want a lazy load feature to withhold loading an actual full image that is below the fold, we don’t want it to load nothing.
That would be bad for SEO.
What we need is a small file size placeholder that has all of the SEO information about our image to be loaded.
Search engine bots can’t tell the difference in that placeholder and the actual image.
They have no idea the real thing is not being rendered.
And that’s what all the Javascript rewriting on the site is for that current plugins are using.
A browser-level lazy load can’t do that for us, at least that I know of.
WordPress Lazy Load vs Plugins
The WordPress devs have built in filters for the way they want to do browser lazy loading.
This way plugin developers can override the default behavior.
Wait, what?
The third section of the WP Trac ticket clearly states why they believe lazy loading is not plugin territory.
And yet they don’t seem to be taking into consideration all the options and controls that current plugins offer with lazy loading.
And until they do, this may be a native option we are likely to just turn off and remain entirely reliant on the way plugins do it for us now.
Keeping an eye on it
I’m keeping my eye on this for us with WP and may even jump into the dev forums to bring it up, so that they make a way to have it as an option on a per page basis.
And, I’ll see how the plugins we use will change if this rolls into the WordPress core.
Be sure to subscribe to BlogAid News so you are sure to receive important breaking news and the Tips Tuesday weekly roundup of the site success info you need.
Care to Share?
Leave a Reply