{"id":21497,"date":"2017-03-20T17:01:19","date_gmt":"2017-03-20T17:01:19","guid":{"rendered":"http:\/\/lazy_loading_for_optimal_performance"},"modified":"2025-02-24T15:25:41","modified_gmt":"2025-02-24T23:25:41","slug":"lazy_loading_for_optimal_performance","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/lazy_loading_for_optimal_performance","title":{"rendered":"Lazy Loading for Optimal Performance"},"content":{"rendered":"

<\/p>\n

<\/p>\n

<\/p>\n

Who doesn’t love some striking imagery to drive your point home? Whether you’re selling a product or service, trying to communicate complex ideas, or simply captivate the emotions of your users, pictures can do that. Everyone knows they work, and everyone loves them.<\/p>\n

Well, everyone except the actual web servers. Thankfully, they have not yet gained sentience, so we don’t have to worry about their feelings. Even so, there is a cost to having images take up around 70% of all bandwidth<\/span><\/a>.<\/p>\n

It costs us in terms of storage space, sure. More importantly, it cost both servers and users in terms of bandwidth and data caps.<\/p>\n

A long time ago (in Internet Years) browser developers figured out they could load and render pages faster if they started loading more than one external resource at a time. So they did. Now, while scripts and CSS are still downloading, your browser will usually try to grab all of the images, too.<\/p>\n

That way, in theory, it’s all ready to go as soon as the CSS and JS tell the browser what to do with all of those images. Well, it’s ready to go sooner, in any case.<\/p>\n

\n

But what if the user doesn’t scroll all the way down the page? What if they never see many or most of those images? That’s wasted data on both ends.<\/p>\n

This is where we turn to lazy loading<\/a>.<\/p>\n

<\/a>How this works<\/h2>\n

For the uninitiated, lazy loading is simply waiting to load the images until the user gets to them. Only the necessary images are ever loaded, saving potential gigabytes upon gigabytes of bandwidth. The more users your site has, the more you save.<\/p>\n

Don’t take it from me. Take it from Chris Coyier of CSS-Tricks<\/span><\/a> fame.<\/p>\n

On a high traffic site, say 2 million of 5 million users visit a blog post with a lot of images on it, but never scroll down. Below the fold, there is 750k of images. That\u2019s going to save you a boatload of bandwidth (1.5 million megabytes\u2026)<\/p>\n

But even that is just a quote, though it comes from a pretty smart guy. If you want a real-world example, look at this post-mortem by NYStudio+107<\/span><\/a>. They used lazy loading (and a few other important techniques, but we’re focused on lazy loading right now) to drop from a page load time of 107.8 seconds to 2.8 seconds.<\/p>\n

It’s not a proof-of-concept either. It’s a real-world site they built. Incidentally, the blog post itself uses lazy-loading, so there’s another example.<\/p>\n

<\/a>Ok, that’s awesome! Let’s do it!<\/h2>\n

Okay, but there are a few things to think about:<\/p>\n