What Is Lazy Loading? Understanding Lazy Loading for SEO

Did you know that 47% of users expect a page to load in 2 seconds or less? 

Page speed is crucial in today’s digital marketing world for a number of reasons. Users that can’t get to your site, or that get frustrated by the process of doing so, have a high likelihood of abandoning your brand for their blog post or product and looking elsewhere. 

A connection speed delay of just 500 milliseconds can result in an increase in “peak frustration” of more than 26%, and a decrease in engagement of 8%. Moz pegs ideal page load time at 0-4 seconds, and found that pages that load in under one second convert at a rate around 2.5 times higher than pages that load slower than five seconds or more.

Goal Conversion Rates 15942.gif?l8YssSSQVHGt

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 is lazy loading?  

Lazy loading, in a nutshell, allows you to defer slow-loading page elements until after your page has rendered. It’s a way of making sure a user “gets” to your site (and doesn’t bounce) before doing the heavy work of loading some of the bigger, non-critical, below-the-fold elements on your web page. 

LMoYcydAaw18BByFgMZTNyj24JnalCvdMKOngiAvyiTTz2aTx9z6gpnR PibdAuX09SiMwcjAii8X Vdt6Fc4mF0TTLrlgtA1kscsIMOHecSUu1sTKLaSKIeuTYGELtOw3JLKR7V

The idea here is to shorten the length of the critical rendering path, or the length of time it takes the user to reach the page’s Largest Contentful Paint (LCP). Largest Contentful Paint is a fancy way of saying load speed. It’s also a crucial way of saying it, because it represents Google’s understanding of load speed.

Largest Contentful Pain marks the point in the page load timeline when the page’s main content has likely loaded. LCP has always been a crucial element of page speed and user experience. It’s even more so a factor now that Google has released its Core Web Vitals.

Google%27s%20page%20experience%20update%20core%20web%20vitals 0

You can think of Core Web Vitals, which Google introduced back in May 2020, as the baseline requirements for a site’s technical health; indicators Google uses to evaluate the UX (user experience) of a page. They are themselves part and parcel of a larger algorithm update, called the Page Experience Update, that will make user experience and website performance critical ranking factors in May of next year. 

Google%20page%20experience%20algorithm%20update%20core%20web%20vitals%20diagram 0

Google’s new technical requirements for healthy, rank-worthy UX. For more help with technical SEO, head to our post on how to do a technical SEO audit.

Speed has, for some time, been a critical Google ranking factor, but the release of Core Web Vitals and the pre-announcement of the Page Experience Update represent landmark shifts in roll page speed will play in getting organic traffic in the future. 

The latter two components of Core Web Vitals—First Input Delay (FID) and Cumulative Layout Shift (CLS)—have to do with how a user interacts with a page once they’ve reached it. For our purposes here, it’s the first component, Largest Contentful Paint, where lazy loading can really make an impact. By delaying load times of non-critical elements until after a user has “reached” your web page, you give yourself a far greater chance of keeping—and not only keeping, but converting—that user.  

How to tell if your site needs lazy loading

Your site being slow doesn’t necessarily mean you have to implement lazy loading. A better approach to page speed optimization is to run your site through a page speed performance tool like PageSpeed Insights or GTmetrix. 


A sample page speed assessment from PageSpeed insights.

There, you’ll get a number of recommendations that may or may not require implementing lazy loading for images, but will definitely include other elements of page speed optimization like: 

  • Enabling Gzip compression
  • Minifying JavaScript, CSS, and HTML
  • Reducing redirects
  • Removing render-blocking JavaScript
  • Leveraging browser caching
  • Improving server response time
  • Using a content distribution network (CDN)
  • Optimizing images and video

The idea here is to prioritize the items that give your site the best chance to increase page speed, or the greatest “gains” overall. 

If you happen to see the recommendation “defer offscreen images,” that’s where lazy loading for images comes into play. 

Offscreen Images.png?lWb1V

The “defer offscreen images” recommendation is a surefire sign you need lazy loading. 

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%20page%20experience%20template%20search%20console 0.png?PcfHTQ

Google defines a “good” LCP as four seconds or shorter: 

DM2kvJLuV3 HgvQOmororxmNEfSDum3GnFpFvMYD37pdzY3PCdIKFPp9L1inLSEIFev0yx1c  ImU2f8YXxe2HIeABszPjTnBDWmMywF2QQy 2haj7SGlMc33GBGHV6d6SlVHQa

Again, just because a given page’s LCP is longer than 4 seconds doesn’t necessarily mean you need to implement lazy loading. But this report can tip you off to the places on your site where performance is really slow; from there, using some of the speed tools we just discussed, you can run diagnostics on individual pages and see if “deferring offscreen images” signifies the need for lazy loading. 

How to implement lazy loading

If you’re trying to implement lazy loading by yourself, here’s our first tip: don’t do it!

The exception here is if you’re a seasoned developer. Or, if you’re an amateur developer with the chops to implement lazy loading on a staging site and split test your new speed scores against your live site. In these instances, you can and should feel empowered to take lazy loading into your own hands. 

For WordPress users, there are a number of handy plugins that help with lazy loading implementation, the most prominent among them being Lazy Load and Smush. Smush, specifically, is an all-in-one image optimization solution that gives you image compression, lazy loading, and next gen image conversion, all of which are crucial to image SEO

Screenshot 4

Smush for WordPress image optimization and lazy loading.

Depending upon your content management system (CMS), however—be it WordPress, Shopify, Bigcommerce, Webflow—lazy loading may not be as simple as implementing a plugin. Shopify, for instance, recommends its own lazy loading implementation; while Bigcommerce has its own third-party plugins that support lazy loading on common themes like Stencil and Blueprint. 

If all this seems over your head, let’s go back to our original sentiment: unless you’re confident in your development chops, don’t spend the time and resources trying to implement lazy loading yourself. Instead, hire a professional developer—like the ones over at LOCALiQ—who can safely and confidently lazy load images on your site (and help you out with other site speed optimizations while they are at it).

If it means giving your site or web page an extra two seconds of savings, and if you’re totally confident in doing it yourself, give lazy loading the resources it deserves but outsourcing the task to a professional developer.

Chances are, it will more than pay for itself in increased conversion rates and revenue down the line.  

How critical is lazy loading for your website? 

Here’s the takeaway: don’t feel like you need to spend yours or your developer’s time implementing lazy loading if it’s not a potentially high-yield action item found in your PageSpeed Insights and GTMetrix reports. There is a laundry list of other site speed improvements you can and should prioritize if they represent the greatest amount of load time savings (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 visual website with a lot of images, and if you find 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. Lazy loading can significantly improve load times for sites and pages with larger elements below the fold. For sites like these, implementing lazy loading is a no brainer.  

And remember, don’t sleep on hiring a development and design professional that can safely implement lazy loading without messing with your existing environment (and while helping you with other site speed improvements along the way). 


Source link

Digital Strategy Consultants (DSC) © 2019 - 2024 All Rights Reserved|About Us|Privacy Policy

Refund Policy|Terms & Condition|Blog|Sitemap