Care About SEO? You Should Be Lazy Loading Your Images < Digital Marketing Agency Orange County CA

Sections

How Lazy Loading Images Can Benefit Your SEO

If you pay attention to SEO news, you may have noticed site speed has taken on increasing importance in the last few years.

Ever since 2010, it’s been a ranking factor for desktop searches. In 2018, Google made it a ranking factor for mobile searches, too. Then, just a few months ago, Google announced a page experience update would be coming in 2021. If you guessed page experience might have something to do with speed, you’d be right. One of the new ranking signals will be based on how long it takes for a page to load.

Just like Goose in Top Gun, Google’s got a need for speed. And if Google wants something, that means you do too — at least, if you care about your SEO.

In Google’s eyes, a faster web is a better web. It makes sense. According to the research, a majority of mobile internet users will abandon a website if it takes more than 3 seconds to load:

Clearly, having a fast website is important — for your users and your SEO. There’s a lot you can do to speed up your website, but one of the biggest culprits to slow page load times is heavy images.

To make your website faster, you need your images to load faster.

Enter lazy loading to save the day.

What is lazy loading?

Don’t let the word lazy fool you. Lazy loading is actually a pretty awesome SEO hack. It refers to the technique of waiting to load the images on a website until they are needed. The images aren’t loaded until they show up on the user’s screen. Once the user scrolls to the part of the page containing the image, the image appears.

What’s so great about that, you might ask? Well, it’s radically different than the traditional way of loading images. Traditionally, and as is still the case with a lot of websites today, all the images get loaded on a webpage once a person visits it. That means everything on the page gets loaded — even the parts the person doesn’t see yet. As a result, it takes longer for the page to load and become interactive for the user.

Now think for a second about how long some of your website pages are. If you’re on a desktop, it probably takes at least a handful of scrolls for you to fully view the entire page. On a mobile phone, those scrolls are multiplied. Throughout your site, you likely have tons of images present throughout each of those scrolls.

With lazy loading, only the images that are “above-the-fold” (present on the page without having to scroll) get loaded when someone visits your website. The loading of the other images gets deferred until they actually scroll to get there.

This can significantly decrease the amount of time required for the initial page load time, which Google uses to determine how to rank your website. Starting to see how lazy loading is good for your SEO?

Lazy loading in action

With SEO becoming increasingly competitive, any website can benefit from implementing lazy loading, but it’s particularly helpful for image-heavy sites. Take Pinterest, for instance. They load a never-ending stream of images, but they’re able to keep their site fast by using lazy loading.

When you open Pinterest, you’ll see something like this:

Less than a second later, that transforms to this:

Benefits of lazy loading your images

There are two major benefits to lazy loading your images. When you implement lazy loading, you get:

Faster page load times: We said it before and we’ll say it again. The faster your website, the better your page load times. Shorter load times are better for SEO.
Better user experience: It’s not just Google who likes a fast website. People do too. By loading your webpage faster, you provide a better experience for your website visitors, especially those on mobile phones. Better UX means stronger SEO.

Do you really need to lazy load your images?

Lazy loading is a great way to boost page load times for almost any website. Don’t believe us? You can run a quick test using Google’s free Lighthouse audit tool. Here’s what to do:

Open up Chrome and visit your website.
Right-click anywhere on the page and select “Inspect.” This will open up a new panel.
Toggle over to the Lighthouse tab and click “Generate report.”

Give the tool a couple minutes to run, and voila! Google will tell you how much you could save by using lazy loading, along with a host of other helpful recommendations.

Because we use lazy loading at Your Marketing People, we got a green check mark for “Defer offscreen images” when we ran the Lighthouse audit on our site. Look how much we saved by lazy loading our images!

How can you lazy load images on your site?

To implement lazy loading on your website, you’ll want to talk to your web development team. Don’t have one of those? You may still be in luck. Many of the popular website platforms have plugins that implement lazy loading for you, like Magento’s Lazy Image Loader or WordPress’s A3 Lazy Load.

Looking for more ways to boost site performance and SEO? Talk to Your Marketing People. Our SEO services cover the gamut of SEO, from technical performance to long-term content strategy. Get your free SEO strategy consultation here.