Did you know that 47% of users expect a page to load in less than 2 seconds?
For a variety of reasons, page speed is critical in today’s digital marketing world. Users who are unable to access your site, or who become frustrated in the process, are more likely to abandon your brand for their blog post or product and look elsewhere.
A 500-millisecond delay in connection speed can result in an increase in “peak frustration” of more than 26 percent and an 8-percent decrease in engagement. Moz defines ideal page load time as 0-4 seconds, and it has been discovered that pages that load in under one-second convert at a rate that is approximately 2.5 times higher than pages that load slower than five seconds or more.
The takeaway is obvious. For most people, the amount of time it takes to get to your website is their first experience with your brand. Saddling them with slow page speed is a surefire way to start the relationship off on the wrong foot. You even risk turning off repeat users and customers from converting again.
That’s where lazy loading comes in. Lazy loading is one of a number of crucial page speed optimizations you can make to increase performance and give yourself the best chance of converting new users.
Let’s talk about it!
What exactly is lazy loading?
In a nutshell, lazy loading allows you to postpone slow-loading page elements until after your page has been rendered. It’s a method of ensuring that a user “gets” to your site (and doesn’t leave) before doing the heavy lifting of loading some of the larger, non-critical, below-the-fold elements on your web page.
The goal here is to shorten the critical rendering path or the amount of time it takes the user to reach the page’s Largest Contentful Paint (LCP). Largest Contentful Paint is a euphemism for load speed. It’s also an important way of saying it because it reflects Google’s understanding of load speed.
Largest Contentful Pain denotes the point in the page load timeline when the main content of the page has most likely loaded. LCP has always been an important factor in page speed and user experience. It’s even more important now that Google’s Core Web Vitals have been released.
Core Web Vitals, which Google introduced in May 2020, can be thought of as the baseline requirements for a site’s technical health; indicators that Google uses to evaluate a page’s UX (user experience). They are part of a larger algorithm update known as the Page Experience Update, which will make user experience and website performance important ranking factors in May of next year.
Speed has been a critical Google ranking factor for some time, but the release of Core Web Vitals and the pre-announcement of the Page Experience Update represent landmark shifts in the role page speed will play in obtaining organic traffic in the future.
The last two Core Web Vitals components, First Input Delay (FID) and Cumulative Layout Shift (CLS) deal with how a user interacts with a page once they’ve arrived at it. For our purposes, the first component, Largest Contentful Paint, is where lazy loading can really shine. By deferring non-critical element load times until after a user has “reached” your web page, you give yourself a much better chance of keeping—and not just keeping, but converting—that user.
How to Clarify As to if Your Website Requires Lazy Loading
If your site is slow, it does not necessarily necessitate the use of lazy loading. Running your site through a page speed performance tool like PageSpeed Insights or GTmetrix is a better approach to page speed optimization.
There, you’ll find a number of recommendations that may or may not include implementing lazy loading for images, but will undoubtedly include other aspects of page speed optimization such as:
Activating Gzip compression
JavaScript, CSS, and HTML minification
lowering redirects
Getting rid of render-blocking JavaScript
Using browser caching
Increasing the server response time
Making use of a content distribution network (CDN)
Image and video optimization
The goal here is to prioritize the items that will give your site the best chance of increasing page speed, or the greatest overall “gains.” If you see the suggestion “defer offscreen images,” this is where lazy loading for images comes into play.
You can also use the new Core Web Vitals report in Search Console to get a bird’s eye view of which pages on your site have LCP issues.
Google defines a “good” LCP as four seconds or shorter:
Again, just because a page’s LCP is longer than 4 seconds does not necessitate the use of lazy loading. However, this report can point out areas of your site where performance is particularly slow; from there, you can use some of the speed tools we just discussed to run diagnostics on individual pages and see if “deferring offscreen images” indicates the need for lazy loading.
How to Make Lazy Loading Work
If you’re attempting to implement lazy loading on your own, here’s our first piece of advice: don’t!
If you’re a seasoned developer, this is an exception. Alternatively, if you’re a novice developer with the skills to implement lazy loading on a staging site and compare your new speed scores to your live site. You can and should feel empowered in these situations to take lazy loading into your own hands.
There are a number of useful plugins for WordPress users that aid in lazy loading implementation, the most notable of which are Lazy Load and Smush. Smush, in particular, is an all-in-one image optimization solution that includes image compression, lazy loading, and next-generation image conversion crucial to image SEO.
However, depending on your content management system (CMS)—whether WordPress, Shopify, Bigcommerce, or Webflow—lazy loading may not be as simple as installing a plugin. Shopify, for example, recommends its own lazy loading implementation, whereas Bigcommerce has third-party plugins that support lazy loading on popular themes such as Stencil and Blueprint.
If all of this is confusing, let us return to our original point: unless you’re confident in your development skills, don’t waste your time and resources attempting to implement lazy loading yourself. Instead, hire a professional developer, such as those at LOCALiQ —who can confidently and safely lazy load images on your site (and help you out with other site speed optimizations while they are at it).
If it means saving an extra two seconds on your site or web page, and if you’re completely confident in doing it yourself, give lazy loading the resources it deserves by outsourcing the task to a professional developer.
It’s likely that it will more than pay for itself in higher conversion rates and revenue down the road.
How important is lazy loading to your website?
The takeaway is that you shouldn’t feel obligated to spend your or your developer’s time implementing lazy loading if it isn’t a potentially high-yield action item identified in your PageSpeed Insights and GTMetrix reports. There is a long list of other site speed improvements you can and should prioritize based on the amount of load time saved (repeated again: Gzip compression, minifying JavaScript, CSS, and HTML, removing render-blocking JavaScript, leveraging browser caching, improving server response time, and more).
If, on the other hand, you have a visually appealing website with a lot of images, and you notice a lot of slow LCP pages in your Core Web Vitals report in Search Console, take the time to run diagnostics with a site speed performance tool. For sites and pages with larger elements below the fold, lazy loading can significantly improve load times. Implementing lazy loading is a no-brainer for sites like these.
Also, don’t overlook the importance of hiring a development and design professional who can safely implement lazy loading without disrupting your current environment (and while helping you with other site speed improvements along the way).
