What is lazy-loading?Lazy-loading is a technique where elements on a webpage aren’t loaded until they are needed. In other words, images, contact forms, and videos that are below the fold are cached by your browser, so it knows where each will go, but they will not start loading until the user scrolls down to reveal them. This allows the elements that are immediately required (i.e. above the fold) to load uninterrupted by lower-priority elements. You’ve probably come across it before as many large websites and social media platforms use this technique. It speeds up the initial load time of a webpage so that users aren’t left with a blank or unresponsive page for long, and it also denotes that more content is loading by way of a placeholder image. Placeholder images are often a low-resolution or blurred version of the image, or a “loading” icon.
Reasons to use lazy-loading
Faster webpagesAs we’ve mentioned already, lazy-loading offers enormous speed benefits for webpages. Deferring the loading of certain on-page content makes the page itself responsive much faster. It’s especially beneficial for webpages that contain many images or other “heavy” elements further down the page. Consider a blog page which has a contact form at the bottom. The main focus of the page is the blog article itself, and users will want that to load as quickly as possible. If the page were to load in its entirety (including the contact form) during the initial load, this would delay the appearance of the content. With lazy loading, the blog article can load incredibly quickly, and the “heavy” contact form will only be triggered when it’s required – once the user has finished reading the article and scrolls down to leave a comment or get in touch.
Improved user experience (and data saving)With increased speed comes a better user experience. A page that loads its visible content and becomes responsive quickly is more enjoyable to use. We’ve all experienced clunky websites that take ages to become responsive because they’re loading every single element on the page all at once – whether we want it or not. Lazy-loading prevents this from happening, only loading the elements we need, making for a faster and more responsive web experience. For a business’s website, a better user experience translates to more conversions and more returning visitors. Lazy-loading is also kinder on a user’s data plan. If a user doesn’t need to see the entire webpage, it won’t be loaded, thus saving your precious mobile data.
SEOAs with all things that are good for users, it’s also, by extension, good for SEO. Search engines rank websites that offer a good user experience more highly so people keep using them to search. Think about it, if Google, for example, consistently returns fast and responsive websites for your search queries, you’re going to trust and keep using Google for your internet searches instead of going to an alternative search engine. Speed has been a key ranking factor for a number of years, and lazy-loading provides a way for even the biggest webpages to seem lightning-fast for users and search engines.
Reasons not to lazy-loadIt appears so far that lazy-loading can do no wrong, but we’d be doing you a disservice if we didn’t consider the other side. Lazy-loading isn’t a fool-proof answer to every website’s speed issues; it comes with some caveats.
Bugs on older browsersFor users on an older browser (or even with a poor internet connection), lazy-loading can actually be a hindrance. For example, the loading of elements further down the page may not be triggered as quickly on an older browser. Therefore, users may have to wait a couple of seconds each time they scroll down for the rest of the page to load, making for a sluggish, clunky experience.
How to implement lazy-loadingThere are a number of plugins and apps that can handle the lazy-loading for you via your CMS. If your website uses one of the larger providers, such as WordPress, Shopify, or Squarespace, then you have plenty of options to choose from, some free and some for a minimal cost. Each one offers a number of different functions and customisation options, so it’s best to try some out and see which is right for your website. Here are some examples:
- Smush (WordPress)
- Lazy Load (WordPress)
- LiteSpeed Cache (WordPress)
- AiSpeed (Shopify)
- Lazy Load (Squarespace)