Speed Up Your Jetpack Site with Lazy Loading Images

When someone visits your website, you probably want them to be dazzled by your photos or wooed by its background images. You want to share visuals that will capture and hold their attention.

However, sometimes your images can take a long time to load, which might lead to decreased site traffic and lower search engine rankings.

According to Pew Research Center, the share of Americans that own smartphones is now 77%, up from just 35% in Pew’s first survey of smartphone ownership conducted in 2011. With a growing number of visitors having access to WordPress sites from their mobile devices, performance optimization is more important than ever before. If you’re not paying attention to your website’s performance, it’s like leaving money on the table.

Fortunately, you don’t need to settle for a slow site; Jetpack’s Lazy Loading images feature has got you covered.

This useful feature helps to improve the performance of your website by only loading images once they actually appear on your viewer’s screen. Enabling this tool helps reduce the total resources used by your website, which will speed it up significantly.

Today, we’ll learn more about Lazy loading images by discussing what it does to improve your website, why performance optimization is so important for WordPress websites, and how to enable it with Jetpack.

Defining “Lazy Loading Images”

Simply put, “Lazy loading” means loading only the images that are initially visible on a visitor’s screen before they begin scrolling to the bottom of it.

Once a user scrolls to the point at which another image should become visible, that image will then load. Images located at the bottom of a page won’t load until that user scrolls even farther down.

Essentially, lazy loading configures your site to only load the content that your visitors are currently looking at, so they won’t have to deal with site lag caused by content they haven’t even seen.

Page load times matter for user engagement and SEO

To really understand the benefits of Lazy Loading, it’s important to know how webpages usually load.

Let’s imagine that your web page has ten images on it, and that each one is 100KB. Let’s also assume that only one of these images is visible to a viewer before they begin scrolling, while the other nine images require your visitor to scroll down the page to see them.

Without Lazy Loading Images, when anyone visits your web page, all ten images — 1000KB of data — would be delivered to them at once.

However, with Lazy Loading Images enabled, only the first image will be initially served. This reduces the total request size by 90 percent. All other images will be loaded at your users’ paces as they scroll down your page.

Even just a few extra seconds of loading time can make a drastic difference in whether your site visitors stick around. According to joint research from SOASTA and Google, more than a quarter of site visitors will abandon an unloaded page after just four seconds.

No matter how popular your website may be, slow loading times can put your business’s bottom line in jeopardy. And that’s why this feature is so important for business owners.

How to optimize your site’s performance with lazy images

So, what do you need to do to turn on this feature and speed up your site? Not much, as Jetpack streamlines the process. The feature works out-of-the-box, with no tweaking necessary for your existing pages or image galleries.

You can activate it by following these steps:

Navigate to Jetpack → Settings → Writing.
Scroll to the Speed up your site section.
Toggle on the Lazy load images option.

Make your site load faster with Jetpack

Lazy Loading Images is a proven way to drastically improve your website’s performance, retain more visitors, and potentially improve your SEO.

Are you currently using Jetpack to Lazy Load your images? If so, we’d love to hear about the impact that it’s had on your website. Tell us your story in the comments below!