Few things in life make you want to throw your laptop out the window as a slow loading website can. These sloths of the internet are about as fun as a dial-up connection. And you already know one of the main culprits. Yep, you got it. Images.
But as a website owner, what can you do? Images make up 65% of all web content
. Not to mention users love looking at them and websites look better with them. In fact, the more, the merrier!
The problem is that loading images uses up a lot of resources and lowers your overall website performance. It’s one of those double-edge-sword kinds of situations.
Here’s where lazy loading saunters in. You’ve heard of it here and there. Maybe your developer friend said it was a good way to go. But you want to get cozy with the idea before doing anything too crazy with your website.
It’s a good thing you’re here because you’re about to get super savvy on everything you need to know about lazy loading images.
Let’s get started!
What is lazy loading?
Think about a slacking employee who only works when their boss is looking. That’s kind of what your browser does when it’s lazy loading images. It only loads the images you’re looking at and delays the rest until you scroll down to see them.
This sneaky technique allows the content on-screen to load much faster since the page isn’t trying to load all the content off-screen at the same time. It’s essentially loading the content into small, manageable batches.
You’ve probably seen lazy loading in action. It goes something like this:
- You land on a page and take a good look at the content (above the fold).
- After a few seconds, you scroll down to nosey the rest of the page.
- You’ll notice images start to appear as you scroll by. Sometimes there’ll be a placeholder that suddenly gets replaced by the real image.
- You stay on the website because it’s showing you what you want to see without making you wait. Mission accomplished.
What are some lazy loading examples?
Lazy loading images is a pretty popular thing to do on the interwebs. If a website has a lot of images to show, then they lazy load them to save precious time and effort. It's simply another great way to optimize your website
. Here are a few snapshots to give you a better idea.
Google loads the first images quickly then loads the rest as you scroll down.
Medium uses “progressive loading” which is just a blurry version of the final image.
Unsplash loads images as you scroll too. The grey placeholders get replaced in a split second.
Pinterest uses colorful placeholders to snag your short attention span while the images load.
What are the advantages of lazy loading?
So far lazy loading seems like the bee’s knees for faster websites. But you may ask yourself, "Is it really
that bad if I just...load things normally?" Well, there are three main advantages to lazy loading that you should think about before tossing the idea out the window.Optimized web performance
This one is obvious, but it’s the main reason lazy loading became a thing in the first place.
When you lazy load, you’re reducing the initial load time and use of resources (server time, browser processing, etc.). This lets your webpage pounce on the screen instead of crawling its way into view. As we all know, faster = better.Improved SEO
A webpage struggling to load 20 images at once is bound to be slow. And slow pages hurt your overall SEO since Google considers page speed
when ranking your website.
Plus, users hate
waiting online and will jump ship if your page takes more than two seconds to load
. If that wasn’t bad enough, this shifty behavior makes Google think your website’s a bad apple and will rank you even lower. Farewell, web traffic.Less data usage for mobile users
More than half of online browsing takes place on mobile nowadays. This means a chunk of your leads will drop you like a hot potato if your website is draining half their data (and their battery).
Lazy loading only uses enough resources to reveal what’s on screen, so images off-screen won’t use any at all if the user never scrolls down to them. Smart, right?
But is lazy loading always necessary?
Here’s a quick algorithm for you. Is your image-heavy website having performance issues? If yes, then consider lazy loading part of your solution. If no, then don’t worry about it. If it ain’t broke, don’t fix it.
How to implement lazy loading?
So you’ve finally decided you need lazy loading to improve your website performance. Congrats! You’re already a step ahead of many website owners out there.
There are more than a few ways to go about it, but we’ll cover the best approaches, and you can choose the right one for you (or at least get the right link to fling over to a developer).
For the brave: Code it yourself
where images gracefully fade into view. Or you can copy Medium’s blurry pre-image method by building your own progressive image loader
If you want to get fancy with colorful placeholders like you saw on the Pinterest example earlier, take a look at this guide by Manuel Wieser about dominant color placeholders for lazy loading images
For the practical: Use a lazy loading library
Even if you’re able to code it from scratch, it’s always faster if you use a library. Here’s a brief rundown of a few snazzy libraries you can use for lazy loading:Echo.js
: Aside from having the best name, this library is slightly heavier than Echo.js, but it packs more of a punch. You can define lazy loading images for retina displays and even for specific screen sizes.Lozad.js
: This one lazy loads all kinds of images and videos, even ads. It supports responsive images and backgrounds too.
For the busy: Install a lazy loading WordPress plugin
What better way than simply installing a plugin that will do all the work for you. Check out these top-rated lazy load plugins for WordPress websites. The best part is they’re free. We like free.Lazy Load
: A no-nonsense lazy load plugin that just does the job. No customizing, no nothing.BJ Lazy Load
: Ignore the name for a second. This plugin gives you control over all kinds of images and even works on videos embedded from YouTube and Vimeo.A3 Lazy Load
: This is a popular one. It’s focused on mobile and works on both images and videos.Rocket Lazy Load:
One of the lightest plugins around. It does what the rest do and is also open source.Dominant Colors Lazy Loading
: Remember those fancy placeholders we mentioned earlier? This plugin will add a splash of color to your page while the images are getting ready for showtime.
Wait, what about lazy loading for video and audio?
Aha! Want to take it a step further, do you? That’s good, and it also makes a lot of sense since videos and audio files can be way heavier than images.
Many of the WordPress plugins you saw a moment ago do cover lazy loading for videos, but you can also check out a dedicated plugin just for videos here
, and a lazy loading plugin for both video and audio here
Don’t say we’re not helpful.
Okay, lazy loading is great, but I’m still stuck. What now?
Well, my friend, if you’re still here instead of in a new tab reading a tutorial on lazy loading, then you’re most likely an innocent business owner in need of some personalized help.
It’s okay; your job is focusing on growing your business, not tweaking HTML. That’s what nerdy web developers like us are for.
So if optimizing your website performance is high on your priority list, schedule a quick chat with us here
. You don’t have to commit to anything; it’s just a friendly “get to know you” call. The worst case scenario is you’ll leave with some tips to smarten up your website.Contact us today!