What is Lazy Loading & How to Add it to Your Photography Site

Speeding up your site can make a huge difference in user experience and conversions, but making a media-rich site load quickly can be a challenge. This is where lazy loading comes in. Learning how lazy loading works and how to add it to your site can make a huge difference, but it’s remarkably easy to do. In this guide, you’ll learn:

• What is lazy loading
• Why it’s important to implement
• How lazy loading impacts SEO
• How to add it to your site easily

What is Lazy Loading?

On a webpage without lazy loading enabled, your web browser typically downloads the entire contents of the page, rendering it all at once, from the top of the page to the bottom. If you only needed to read the first paragraph or look at the first image, all that extra data and rendering time is wasted. This can waste your user’s resources, as well as unnecessarily increase the load on your web page's server.

Instead, consider how a page loads with lazy loading enabled. Any heavy resources on the page, like a video, image, gallery, or other sizable assets, are instead replaced with a placeholder - typically a much lower resolution, more heavily compressed image. Then, when the user browses the page and comes across that asset, a request is sent to the server and the full-size version is loaded.

The advantage of this is especially clear on content-rich, long webpages. In these instances, the initial load may only be five percent of the page’s full size. A lazy loaded page lets your users start browsing faster, even on a slow or mobile connection, while still having some context for what they’re looking at, thanks to the placeholder images.

Why It’s Important to Implement

Lazy loading gives users the full-fledged, rich experience they expect out of a modern webpage, on any connection. Dynamically loading content lets you build bigger individual pages, reducing friction for the end-user. When each additional click is a chance to lose their interest, this can be a huge difference-maker for retention.

On the business side, building a site with lazy loading will let you keep bandwidth and server costs down. Serving up a fraction of the webpage for each request will greatly reduce peak loads on your server, as well as save on wasted bandwidth sending out content that will never be seen.

How Lazy Loading Impacts SEO

Lazy loading also gives your website a very real advantage in SEO. Lazy loading is so important to SEO that Google’s Lighthouse optimization report specifically lists the potential savings of deferring the load of offscreen images (by lazy loading) as one of their performance metrics. By decreasing the “time to interactive”, a key metric for performance, you can potentially improve your SEO ranking just by making your site load faster with lazy loading. Lazy loading can also positively impact some of the other performance metrics, making it a great feature to add.

One thing to watch when using lazy loading is the impact on indexing. Sometimes, the search engine will not crawl a lazy loaded page correctly. This means they’ll miss key information about your site, harming your rank. This doesn’t mean you should avoid using lazy loading, however. Instead, you should make sure that you follow the recommended procedures for lazy loading from Google. They say you should have all relevant content visible in the viewport, but it’s easier to use a pre-built solution for lazy loading, and avoid having to mess around with the nuts and bolts of this type of coding.

How to Easily Add Lazy Loading to Your Website

Lazy loading is now built into Chromium-based browsers like Chrome and Brave, as well as Firefox. To add native lazy loading, the attribute “loading=lazy” to any images or iframes. Having to go in and tweak every image with this attribute can be a pain, however. Instead, look to plugins to help out.

If you’re running WordPress, consider Google’s Native Lazyload plugin. This plugin will make the process much easier. After activation, the loading attribute will automatically be added to all your img and iframe tags. As you can see, that’s a way easier way of activating lazy loading, but it comes with the downside of only supporting lazy loading on browsers that natively support that tag.

To address a wider range of browsers, consider running a WordPress plugin built specifically for lazy loading, like a3 Lazy Load or the creatively named Lazy Load. The nice thing about running one of these plugins is that they offer broader support for browsers, retaining much of WordPress’s native behavior.

If you’re looking for the easiest possible solution for your photography portfolios, consider NextGEN Pro. The mosaic gallery option automatically lazy loads content, helping users start enjoying your photos faster than ever. With NextGEN Pro, it’s as simple as clicking a button to build a fast, well-optimized, good-looking gallery.

Whichever your choice of implementation, it’s important to use lazy loading when building media-rich pages. Saving your user’s experience, improving your SEO, and reducing your website costs can all be done with just one simple action, making the choice to use lazy loading a simple one. For more tutorials and guides on optimizing your WordPress site, make sure to follow us on Twitter and Facebook for more updates!