Igor P.
What is Lazy Loading – 4 Ways to Add it to Your Photography Site
Whether you’re here because your website is slow and someone recommended you to add lazy loading, to speed up things. Or perhaps you like the fade in effect that lazy loading creates, and want to add it to your own site – you’re in the right place.
In this article, we’ll explain what lazy loading is, how it’s beneficial for your photography website, and how you can implement it on your own website.
What is lazy loading?
You probably noticed how some websites load more content as you scroll down the page. This is called lazy loading. It’s a technique that allows websites to serve images or videos when they are needed, instead of loading it all at once and making the user wait for the page to fully display.Here is an example on how it works in our Mono theme:
How does it help?
It makes your page load faster and provides a better user experience, especially on mobile devices. It also saves your server resources and bandwidth, as images are only served when they are needed.
What to consider before implementing lazy loading?
Please note that lazy loading doesn’t work with background images. It’s important that your WordPress theme serves images via <img> tags. That’s also good for your image SEO.
Our latest themes, all serve images via <img> tags, which is the best option for SEO and performance purposes.
How to implement lazy loading?
There are several ways you can implement lazy loading on your WordPress photography site. Here are 4 of them:
1. Use a WordPress plugin
There are tons of dedicated plugins that can add the lazy load functionality to your website. Here are the ones we’ve tested on multiple occasions and recommend our clients to use:
This is a simple to use, yet powerful plugin that can lazy load images, videos and iframes on your site. It has multiple features and is compatible with other popular plugins like WP Super Cache, WooCommerce, Imagify, Advanced Custom Fields, etc. It’s pretty easy to install and set up this plugin, as all the options are self explanatory.
A premium all in one performance plugin. It includes a wide range of powerful features to help you speed up your WordPress site, including the lazy load option. You can enable this feature in your WordPress admin by going to WP Rocket – Settings – Media – LazyLoad. You can also use WP Rocket to implement caching, minification and GZip compression.
If you don’t need the whole package of features that come with WP Rocket, you can download and use their standalone lazy load plugin available here.
Autoptimize is another powerful WordPress plugin that can make your website faster. It has several useful features such as: style and script minification and aggregation, image optimization and lazy loading.
To enable this option, login to your WordPress admin, go to Settings – Autoptimize – Images – Lazy load images.
2. Use native lazy loading
Native lazy loading is supported by Chrome 76 and later versions. This means that you can use the loading attribute to lazy load images without the need to write custom code.
This <img loading=lazy> attribute is supported by most popular browsers like Chrome, Firefox, Opera, Edge and is currently being implemented in Safari.
Here is an example of code meant to defer the loading of offscreen images: <img src="couple-eloping-in-mountains.png" loading="lazy" alt=”couple eloping in mountains" width="1500" height="700">
If you have coding skills you can add this attribute to your images manually. However, the easiest way is to use Google’s plugin which will do the job for you. You can download the plugin here or install it directly from your WordPress admin.
This option is useful if you’re using WordPress 5.4 or an older version.
3. Use WordPress core lazy loading
The WordPress team released native lazy-loading with the latest update. This means that you won’t need to install a plugin or implement this lazy loading manually. Simply update your WordPress to 5.5.
You can check for more info here and test the functionality here.
This is the exact same option as the one described above, the only difference is that you don’t have to use a separate plugin anymore (if you’re on WordPress 5.5).
Please note that native lazy loading is supported by major browsers except Safari and other mobile browsers. You can check the compatibility here.
4. Use a Flextheme
All our currently available Flexthemes have built-in lazy loading. You don’t have to implement anything. The theme does the job for you and serves your images as the user scrolls down the page.
You can find the Lazy Loading option via Flotheme > Generics > Miscellaneous > Enable lazy load for wp-content area, as shown here.
How to test lazy loading implementation?
If you’re wondering whether your site is lazy loading images properly, there are several ways to test it. The easiest way is to observe how images are displayed as you scroll down a page. If they appear gradually, it means that lazy loading works well.
Another way to test this is by opening the Developer tools in your browser (Right click while your website is open, choose the Inspect Element) and going to the Network tab. Inside that tab, select the Images filter and scroll down the web page you’re on. If the images do not appear at once, but one by one, this means that lazy loading is doing its job.
Conclusion
Since lazy loading has become a must-have performance improvement, there is no doubt that you should implement it on your photography website. If you choose to build your website with a Flextheme, lazy loading will be enabled by default so you don’t have to bother about it. If you’re curious to learn more about Flexthemes, their SEO options and performance, read this article.
