When starting out as a website owner, you might encounter the term “lazy loading.” But what does it mean to lazy load something, and why is it important? In essence, it is a strategy used in computer programming that delays the loading of resources until they’re needed. In terms of your website, it implies waiting to load images until right before they are about to appear on the screen.
Nerd Vocabulary
This practice is critical for enhancing your website’s performance, especially if your site contains numerous high-resolution images. By implementing this strategy, you minimize the initial load time and save bandwidth, as images are only loaded as needed, reducing the overall amount of data that needs to be loaded on the page.
Google loves it when you lazy load images
Google Lighthouse, as a tool for enhancing web page performance and user experience, encourages the practice of lazy loading images. One of the key reasons Lighthouse advocates for this so strongly is because of its potential to improve page load speed, particularly for pages with a lot of images. When a web page is opened, the browser typically tries to download all resources, including images, at once. If there are many large images, this can lead to slow page load times. By only loading images as they’re needed, you reduce the initial demand on the network, allowing the page to load faster.
Moreover, the practice aligns with Lighthouse’s focus on the user experience. If a user never scrolls down far enough to view a certain image, their browser won’t waste resources downloading it. This is especially beneficial for users with slower internet connections or those using data plans with limited allowances, providing a smoother, more efficient browsing experience.
However, Google does not think you should lazy load all images
While Google Lighthouse generally recommends lazy loading for most images on a webpage, it does make an exception for images that appear in the viewport during the initial page load, often referred to as “above the fold” images. These images should not be lazy-loaded because they are essential for the initial rendering of the page. If these images were to be be delayed in loading, it could lead to a poor user experience, as users may see a blank space or placeholder where the image should be while it’s loading.
How to set up lazy loading
There are several ways to implement lazy loading for images on a website, each with their own benefits and considerations.
- Old way: The old way was to use JavaScript libraries, which provided easy-to-use methods for implementing lazy loading. These libraries would observe when an image enters the viewport and then update its source attribute to trigger the load. It’s best to stay away from this method these days because it slows down page load.
- Modern, developer way: A more modern and increasingly popular approach involves using the native ‘loading’ attribute with the value ‘lazy’ in the HTML image tag. This is now supported in many modern browsers, including Chrome, Edge, and Firefox.
- The easy, modern way: Lastly, for websites using a content management system such as WordPress, many plugins are available that can handle lazy loading without requiring you to write any code.
Let’s look at the 2 modern ways of setting up lazy loading.
If you can code: setting up lazy loading with HTML
It’s incredibly easy to set up lazy loading with some basic HTML. In fact, it might be one of the lowest lifts available to drastically improve your page’s speed. To set up lazy loading with HTML, you can use the loading attribute on your img tags. This is the simplest method, and it’s supported by most modern browsers. Here’s an example of how to implement it:
<img src="image.jpg" loading="lazy" alt="..." />The loading="lazy" attribute tells the browser to hold off on loading the image until it’s needed – which means your page loads much faster, initially.
If you can’t code, and are on WordPress
Okay, not everybody is a coder, and that’s fine. Luckily if you are on WordPress, there are pretty easy ways to set up lazy loading without having to get too nerdy. Our favorite approach is to use a plugin called Smush Pro, which has a “Lazy Load” feature that will automatically attempt to help your images load lazily.
Want to dive deeper?
Check out this in-depth video about lazy loading
Also, for more details on lazy loading and its implementation, refer to this Google Web Fundamentals article here.
