Sites with a ton of images can take forever to load. For every image, that’s another HTTP request, and more time your users have to wait in frustration while pages load slowly.
So what’s the solution? Lazy loading.
Lazy loading can significantly speed up image-heavy sites and takes no time at all to enable on your site.
In a nutshell, it forces images to load only when they are “above the fold” – in other words, only images that come into view in a user’s browser will load.
So, if you have a page featuring 10 Fresh and Free Fullscreen WordPress Themes, only the first few images in the post will load and the others will load as the user scrolls down the page.
Native Lazy Loading Arrived with WordPress 5.5
Lazy loading is still a relatively new feature for WordPress.
It works by adding the attribute of “lazy” and setting the value to “loading” on your images, which is then processed by the browser on output.
If you have a lazy loading plugin that you’re loyal to or go through phases where you don’t want lazy load enabled at all, you’ll be pleased to hear you can disable it.
Some plugins do this automatically, however, if you need to do it manually, simply head to your functions.php file and add in the following:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
This will disable WordPress’s lazy loading feature, meaning that you will be able to use a plugin of your choice without the risk of conflict.
It’s only one line of code, but if you don’t feel comfortable adding it, you can download this simple plugin which will do it for you.
Is a Plugin Necessary Anymore?
You may be wondering whether to use a plugin at all now that WordPress offers native lazy loading.
Well read on, because there are actually a few reasons you might want to stick with a plugin:
Access to an Interface
A good lazy loading plugin such as Smush offers an interface with options to tweak specific settings, as well as the ability to turn lazy loading on and off at the touch of a button.
These options can range from the image types that will be lazy-loaded, to the pages that lazy loading applies to. If you want to change settings like these without a plugin, you’ll have to delve deep into the code and add these exceptions manually.
Browser Compatibility
Another great positive is that most plugins will work across all browsers. Safari is one of the main browsers that doesn’t support the loading attribute, therefore if you have a website with lots of images, you could see users from non-supported browsers bouncing. This is something you don’t need to worry about when using a plugin.
Extra Optimization
Most plugins offer much more than just lazy loading. Introducing an image optimization plugin to your website is possibly one of the best decisions you’ll ever make.
Plugins such as Smush can help you to ace Google’s image-related PageSpeed recommendations and give your site a boost of speed – lazy loading is just the beginning!
Are There Any Benefits to Native Lazy Loading?
On the surface, it may seem like a plugin will do everything native lazy loading can do, and more.
Whilst this is technically correct, the major difference is that most plugins will involve introducing a JavaScript library, which your site will be dependant on.
Native lazy loading is more simple and straightforward and doesn’t require much extra code.
Our image optimization plugin, Smush, actually offers its own version of native lazy loading.
It works on the same basis as WordPress’ but supports all the same image formats that Smush does.
Native lazy loading is perhaps something that can be used as a foundation for other developments in the future, but at least for now, plugins are the right fit for most sites.
If you do prefer the idea of a plugin to solve your lazy loading needs, we’ve put together a collection of free lazy loading plugins.
-
Smush Image Optimization
Smush is the most popular all-in-one image optimization plugin for a reason. We include everything you need to make your images load faster.
Lazy loading is available on both the free version of Smush and the turbo-charged Smush Pro, that comes complete with the Smush Pro CDN, and unlike native lazy loading, is compatible with all browsers.
To activate lazy loading with Smush, we’ve made the process super-duper simple. All you need to do is go to the Lazy Loading section in Smush and push the Activate button. That’s it.
You can further adjust your settings once lazy loading is activated, but it isn’t necessary. Smush and Smush Pro’s default settings are all you need to see a major performance improvement.
-
a3 Lazy Load
A3 Lazy load is a popular plugin for lazy loading images, iframes, videos, and other elements on your site.
It has lots of settings so you can customize how you want the assets on your site to be loaded.
It is also tested to be 100% compatible with popular plugins like WooCommerce, Advanced Custom Fields, and a variety of CDNs.
-
Crazy Lazy
Here’s another ultra lean lazy loading plugin that just works. No complicated configuration required.
Depending on the theme or the usage of jQuery, Crazy Lazy optionally will utilize a modified version of the jQuery plugin Unveil.js or the native JavaScript library lazyload.js.
-
Lazy Load for Videos
Not all lazy loading plugins work with video, which is a shame because videos can add more bulk to your web page file size than images.
Lazy Load for Videos can help you lazy load videos hosted on Vimeo or YouTube. It loads a placeholder image and only loads the full video and video player if a visitor clicks on it.
This is essential if your site has a lot of videos and you choose a lightweight plugin that doesn’t include lazy loading for video.
More About Lazy Loading
Using a plugin is the easiest way to add lazy loading to your site, but it isn’t the only way. You can also use JavaScript on your site if you want a leaner solution.
If you want to learn more, check out How to Defer Offscreen Images in WordPress With Lazy Loading for a full breakdown of how lazy loading works and how to recreate the technique on your site.
If you want to learn more about WordPress’ own lazy loading feature, check out the announcement.
The easiest way to get started with lazy loading is with Smush free or Smush Pro.
Smush Pro adds other features that can help you with other Google PageSpeed Insights opportunities. It can help you serve images in next-gen formats by converting your images to WebP files and properly size images by scaling your images with the Smush Pro CDN. Smush Pro is even compatible with the popular WP Retina 2x plugin, so you can lazy load those huge Retina images without slowing down WordPress.
Try Smush Pro free for 7 days and see how much of a difference it can make for your site.
Source: premium.wpmudev.org
