A few weeks ago, it was announced that Google Chrome started supporting the new
If you have a WordPress site, our team at Google has just released a new plugin “Native Lazyload” which you can install, activate, and your site will support native lazy-loading instantly.
Wait, what is Lazy-Loading?
You might not be familiar with the idea of lazy-loading: It means that certain (typically large) resources on a website, such as images, are only loaded once the user scrolls close to them. For example, a page header image would probably be loaded right away because it’s immediately visible when accessing a webpage. However, images further down in the main content or the footer don’t need to be loaded immediately because the user wouldn’t initially see them anyway. The reason this is relevant is website performance.
Images are one of the most common sources for a slowly loading website. But that surely doesn’t mean we shouldn’t be using images on our websites, right?! What it does mean though is that we need to find ways to make these images available to website visitors in a way that doesn’t harm their experience by a sluggish load time. Lazy-loading is a straightforward way to tackle this problem, which has been used by websites for years – and yours probably should do too.
Without lazy-loading, all images on a webpage load instantly when someone visits it. As soon as you have a few images on your page, your page speed drops, since images (and other media files of any kind) usually are bigger in file size than other (mostly text-based) resources. With lazy-loading, only the images the visitor sees are loaded, which decreases the initial loading time significantly, making it less likely that a user gets frustrated by that and leaves your site. After all, everyone likes fast websites.
So why “Native” Lazy-Loading?
loading attribute, and preferably set a value of “lazy”, and the browser will take care of the rest – if it supports the attribute yet. In case a visitor uses a browser that doesn’t support it yet, the image would just load immediately like without lazy-loading, the attribute be ignored. In other words, the
loading attribute is a progressive enhancement. Think about it: That means that slowly, as more browsers add support for it, your website’s performance will magically improve without your intervention!
Okay, what does the WordPress plugin do then?
The WordPress plugin is very minimal: Its main functionality is to ensure as many images on your website as it can reasonably cover include the
loading attribute with a value of “lazy”. The plugin doesn’t provide any UI or options, it just works after you have activated it.
A secondary function is to provide a fallback mechanism for browsers that don’t support the
loading support aren’t negatively affected.
The plugin includes this fallback to make sure every visitor of your sites benefits from images and iframes being lazy-loaded. However, if you want to strictly focus on the experience of those users where the native mechanism is already supported, or if you’re simply a purist, the fallback mechanism can be disabled with a single line of code:
add_filter( 'native_lazyload_fallback_script_enabled', '__return_false' );
How do I get the plugin?
The easiest way is probably to install it right from your WordPress admin dashboard. Go to Plugins > Add New, and search for “native lazyload”. You should find the plugin “Native Lazyload” by Google somewhere on top of the search results list. Click “Install”, then “Activate”, and your images and iframes should be lazy-loaded!
Alternatively, you can manually download and install the plugin from wordpress.org, or if you are a developer, there’s also a GitHub repository (make sure to read the readme if installing from there), which is of course open to contributions.
Let’s make the web faster, one image at a time! Well, that didn’t really convey the right message – let’s do all images at once! 🙂