Lazy Loading: What It Is, Why It’s Important, And How To Make Sure Your Site Uses It
Your brand’s digital presence is more important than ever. One piece of having a solid digital presence is making sure your site captivates your users attention for as long as possible on desktop and mobile. How quickly your webpage loads has a direct impact on how long a user or customer stays on your website.
JUMP TO SECTION
Why Does Lazy Loading Matter
Slow loading speeds are already unpopular with consumers, especially on mobile. Webpages loading under a second are what everyone hopes for, and as that number climbs, people start bailing.
● 1-3 seconds increased bounce rate by 32%
● 1-5 seconds increased it by 90%
● 1-5 seconds increased it by 106%
● 1-10 seconds increased it by 123%
Google heavily factors in how long a page holds users’ attention, so high bounce rates will end up lowering your rank. The search monolith is also prioritizing loading speed in its ranking criteria more and more.
Google has considered load speed since 2010 on desktop searches, and in 2018 it expanded that to mobile too. Loading speed, along with interactivity and content stability, will become what Google calls its ‘Core Web Vitals,’ which will be key ranking metrics moving forward.
So having a blazing fast website will be key to ranking your website on Google. So what is slowing your website down? Text is already very light and doesn’t take up much space. It’s images and other media that are taking up the most room and killing your speed.
Lazy loading is one strategy to combat bounce rates and regulate your ranking on Google.
What is Lazy Loading
Traditional pages start loading everything at once as soon as someone visits the page. Every bit and byte has to be loaded before they can start interacting with the page. With most pages containing multiple images that are spread throughout, this makes the loading times much greater. It becomes much more advantageous here to lighten the load by using smaller images, but tackling them all at once still isn’t the most efficient way to go about it.
This process is called eager loading, and as soon as one process ends, it automatically starts pulling the next one forward. This is what happens when you get a loading screen, and the site has to prepare all the components before showing them to you. This is unavoidable for heavier processes programs but could be wasteful for general websites.
Lazy loading is an SEO response to making sites initially load faster. When you use this technique, the webpage loads as you scroll through it. All of the images wait to load until they are needed, which is as the user scrolls through them. The only images that will load initially will be ones above the header.
The end result is a much faster initial load time. Users are happier without having to give up rich media, and they don’t even notice the change.
The Benefits of Lazy Loading
Image heavy sites are the ones who benefit from lazy loading the most. Websites like Pinterest, Tumbler, or Unsplash, which load a continuous wall of images, manage to stay agile because they employ lazy loading.
Lazy loading decreases the page weight, or the amount of data that has to be loaded to display the page, which decreases the page load time.
The practice conserves bandwidth by only delivering content if the user requests it. This saves servers from sending unnecessary data to users who don’t need it.
Lazy loading helps with resource conservation on the system as a whole. This means that it is easier on both the server and the client because it doesn’t waste sending resources like images, JavaScript, and other code that isn’t needed.
Best Practices for Lazy Loading
Lazy loading is a helpful tool to lower your load times, but it isn’t something that you want to do in every situation. The following tips are technical and you should work with your web dev team to execute and be sure you’re following best practices.
You only want to implement lazy loading for resources that are displayed outside the user’s view or below the fold. When doing this with code, it should only apply to parts that are not vital for the initial system to operate.
Your page needs a way to handle errors in case something doesn’t load properly. Otherwise, if the image or object fails to load, the user would have to reload the page to have any chance of seeing the resource.
If users have JavaScript disabled, then they won’t be able to see resources that use lazy loading. To fix this, the page needs to have a case built-in for NoScript.
Ensure that images are asynchronously decoded with the JavaScript decode() method before they enter the DOM. If you don’t do this and the user tries to load large images, the browser could freeze.
How To Tell If Your Site Is Currently Using Lazy Loading
Thankfully, as Google starts to prioritize these metrics, it’s also giving users the tools to analyze and address them. Lighthouse is an open-source automated tool that Google employs to audit webpages. It’s free to use for any webpage, and Google has resources to help developers and site owners get started using it. You can run lighthouse through Chrome DevTools, from the command line, or as a Node module.
The simplest option is to go to PageSpeed Insights and run a report. All you have to do is copy/paste in the URL that you want to analyze, and you’ll get a report for the page that includes: an overall score, the biggest opportunities for the website to get faster, and what the page does right.
To tell if you have lazy loading or not, look for the option that says “defer offscreen images.” If there that title has a green circle and/or it is under the “Passed audits” tab, you are good to go. If it has a red triangle or an orange square and is under the “Opportunities” tab, then it is something that your site isn’t currently doing.
Website speed is paramount, particularly on mobile. Search look at page speed as an important signal of site value. No one wants to wait more than .5 seconds for a page to load. Lazy loading images is a simple solution to keeping interesting, branded imagery on your site without dragging the site speed.
Having a quick loading webpage is critical to a brand’s digital presence. Lazy loading can be a quick win to help pages load faster and keep customers and users engaged for longer periods of time, ultimately driving more revenue.