A few weeks ago, it was announced that Google Chrome started supporting the new loading attribute, which allows websites to have their images and iframes lazy-loaded without any custom JavaScript. Support for the feature will most likely be extended to further browsers soon, but you can already use it today without any negative impact for browsers where it isn’t supported yet.
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?
Lazy-loading has for a long time not been a switch you can just toggle to make it work. It was not a browser feature, so it typically required loading and running custom JavaScript logic to make it work. Unfortunately, JavaScript itself is an expensive resource, so lazy-loading as it’s been done so far might in certain cases actually have a negative impact on performance (e.g. if a page doesn’t contain any images or only contains a single image that’s immediately visible). Furthermore, if a user had disabled JavaScript in their browsers, lazy-loading wouldn’t work at all.
The “Native” bit means that lazy-loading is now natively supported by browsers. Your website doesn’t need to load custom JavaScript anymore to make use of it. Your images just need to include the new 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 attribute yet. While this fallback mechanism also includes custom JavaScript, the solution has a minimal impact on page load time. The actual lazy-loading JavaScript file is only loaded if needed, so users on browsers with 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' );Code language: JavaScript (javascript)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! 🙂
Leave a Reply