No matter the purpose of your website, slow web pages will turn visitors away, right away.
Why might a web page take a long time to load? One possible reason is the page size — more specifically, the amount of content on a web page and the file sizes of each piece of content. Lots of images, videos, and other media can throttle page speed and send frustrated visitors elsewhere.
Fortunately, there’s a solution that doesn’t require cutting content. It’s called lazy loading. Lazy loading improves your site performance, limits bandwidth usage, and even gives your site’s SEO a boost.
In this post, I’ll explain lazy loading and its counterpart, eager loading. We’ll also discuss why lazy loading might be a great feature on your website, and how to add it to your pages.
What is lazy loading?
Lazy loading is a technique used by web pages to optimize load time. With lazy loading, a web page loads only required content at first, and waits to load any remaining page content until the user needs it. Lazy loading reduces the time it takes for a web page to open because the browser only loads a fraction of the content on the page at a time.
The process is called "lazy" because it delays loading until needed — the same way someone might put off a task. But in this case, laziness is a great thing.
You’ve likely seen lazy loading before. Let’s go to Google Images for an example. If I search for photos of dachshunds (as I do regularly), Google will come up with a bunch of images for me on a single results page.
Loading all of these images on the page at once wouldn’t make sense, since I probably won’t scroll too far down before I find an image I like and leave. Why waste precious loading time and data on dachshunds I'll never see?
Google Images implements lazy loading instead. For hidden content, it loads placeholder images to substitute the actual images. These placeholders take much less time to load than fully rendered content. The real images quickly load when their placeholder comes into view (i.e., when I scroll down).
On-demand loading techniques like this are used all over the web. Visit some of your favorite image-heavy sites – chances are, they use this technique. While lazy loading is most commonly used on images, it can be applied to any page element, including text, videos, or other embedded content.
What is eager loading?
Eager loading is the opposite of lazy loading. With eager loading, a web page loads all of its content immediately. Eager loading lets the browser store all contents of the web page in its cache, which can be helpful if visitors return to the page. However, this method can be slow to load larger web page files.
Pages with less data on them tend to employ eager loading. Take your average Wikipedia page: these articles are dominated by text, which takes up much less file space than images. Therefore, Wikipedia chooses eager loading over lazy loading for its page content.
Now that we know the difference between these loading methods, let’s discuss which option is best for your website.
Lazy Loading vs. Eager Loading
Eager loading generates all web page content as soon as possible, while lazy loading delays the display of non-essential content. Lazy loading is a great option for large page files with more content. However, simpler pages with a set amount of text and few images and/or videos should apply eager loading.
When to Use Lazy Loading
Lazy loading is great for long web pages with lots of heavyweight content (like images, gifs, and videos) that are non-essential to the user experience on first load.
There are no strict guidelines for what pages need lazy loading, but you can test your site’s performance and user engagement with and without lazy loading to make this call. Depending on the results, other measures to increase load time might be better worth your own time.
Applying lazy loading to your page content has many potential advantages:
- It helps your page load faster. This improves the visitor experience, increases the number of engaged visitors and conversions, and helps your SEO.
- It reduces data usage since the browser loads a fraction of the total page content per visit. This saves on data costs for both you and for your visitors: You’ll pay less for loading fewer items, and your users won’t need as much data to load your webpages.
- It saves energy needed to load content, which preserves battery life. It also keeps computers from overheating and sounding like jet engines.
- It keeps visitors on your page if you continue to offer relevant content. A prime example of this is infinite scroll. Social media sites do this all the time to hold our attention.
When to Use Eager Loading
Lazy loading can give your site some major advantages, but not always. Sometimes it’s better to opt for the old-school all-at-once loading approach of eager loading. These cases include:
All Content Displayed "Above the Fold”
The fold is the bottom of the web browser window. Since the space above the fold shows on page load, content in this area should be immediately visible to users. The fold is located in different places for different screen and window sizes, so view your website on different devices and use your best judgment to determine where on the page to start lazy-loading the content.
When Resources Need to Load in the Background
Any special code or media that runs in the background of your page should fall under eager loading. An example of this is web applications, which need most or all functionality fully loaded before running.
If Your Web Page Has Minimal Heavyweight Content
Don’t use lazy loading if you don’t need it. There are a few reasons why too much lazy loading might detract from your site:
- Too much dynamic loading on your page causes interruptions and disrupts your visitors’ experience.
- Hiding a lot of content might actually work against SEO. If certain content isn’t displayed, there’s a chance it won’t be indexed by search engines. To make sure your website is properly read by Google, see their guide for lazy-loaded content.
- Lazy loading involves modifying your website’s code. You’ll need resources and/or time to make these changes and test them.
To summarize, if a page is short and/or contains mainly lightweight content (i.e. text-dominant with minimal images/videos), it’s best to avoid over-engineering with lazy loading. My Sausage Dog Blog will work just fine without it.
How to Implement Lazy Loading for Your Images
There are different ways to add lazy loading to your site, depending on whether you want to interact directly with your website’s code. Some browsers might also apply lazy loading your web pages automatically.
Use an Add-On
For a quick-and-easy option, search for a reputable and well-maintained add-on for your content management system or website builder. For example, WordPress has several plugins for lazy-loading images that will do much of the work for you. Other CMS platforms offer plugins/modules/extensions for the same purpose.
Use the HTML "loading" Attribute
You can toggle loading procedures with each image on a web page with the “loading” attribute. To specify the loading setting of an <img>, add the attribute to the tag as follows:
// lazy-loads an image
<img src="image.png" loading="lazy" alt="..." />
// eager-loads an image
<img src="image.png" loading="eager" alt="..." />
// defers to the loading behavior of the browser (the same has having no “load” attribute)
<img src="image.png" loading="eager" alt="..." />
Lazy loading is a great option for improving page performance and keeping visitors on your site. If you choose lazy loading, be sure to test your site with this new feature before launching it. Any bugs might prevent your hidden content from showing at all, and no content is worse than slow content. If done right, though, lazy loading will take your pages from lag-about to brag-about.
