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 webpages
As 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.
SEO
As 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-load
It 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 browsers
For 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.
Content that’s needed but not loaded
If lazy-loading is used too frivolously, content that’s above the fold may not load until the javascript is executed (i.e. the user scrolls a little). The result is a webpage that appears even less responsive than if lazy-loading were avoided altogether. It’s also important to recognise the difference between how your site looks on a mobile device compared with on a desktop computer. Certain elements that are below the fold on mobile may be above the fold on desktop, or vice versa, and wrongfully lazy-loading content that’s required immediately makes for a bad user experience.
This can also affect the way search engines crawl your site. Important content can be missed by a search engine crawler if it’s lazy-loaded incorrectly, harming the ranking potential of that page. Only apply lazy-loading to items that are below the fold on all devices.
Alternative methods may be more effective
Depending on the contents and purpose of a webpage, you may see greater speed benefits from alternative methods to lazy-loading. For example, if you’re lazy-loading a particular piece of JavaScript, then once the user scrolls down to it, the browser must send a HTTP request to fetch this element. A large number of HTTP requests can affect the speed, latency and responsiveness of a page.
Alternatively, by minifying and compressing this script, and bundling it together with other scripts on the page, it can all be loaded quickly during the initial load of the webpage. This would remove any latency issues, reduce the number of HTTP requests made, and can allow all of these scripts to be cached by a browser, saving even more time for returning visitors to your site.
How to implement lazy-loading
There 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)
There are also ways to add lazy-loading manually into the code of your website, but unless you have a developer on-hand, it’s far easier to use a plugin.
Lazy-loading is undoubtedly a great way to increase the speed of your website, but it’s important to know when to use it. Applying it to the right pages, such as those with lots of images, will be more beneficial than a sweeping “apply to all” approach. Overall, lazy-loading is a win-win – users enjoy a faster, more responsive website, and your website attracts more users, retains them better, and encourages more conversions.
Page speed optimisations are just some of the technical SEO services we offer here at Yellowball. Get in touch with us today to find out how we can add value to your website and help you achieve your wider business goals.
