“Lazy loading” is a technique that can help you get what everyone wants — a lightning-fast website. Many people will quickly grow impatient when waiting, and any extra seconds (or even milliseconds) that it takes for your website to load can cause you to lose visitors.
Since providing people with more patience isn’t typically an option, you’re left with optimizing your website.
There are a plethora of ideas, options, and recommendations for improving the load time of your site, and one of these is Lazy Loading.
What is lazy loading?
Lazy loading simply means not loading resources onto your page until the user needs them.
For example, let’s assume you have a landing page-style home page, with many images and even a video or two on one long page. The user doesn’t see the images and videos below the fold when the page first loads, so with lazy loading, those resources aren’t actually loaded right away. Instead, placeholders are used and the images and videos are only loaded once the user scrolls down and they are actually needed.
By loading fewer resources in the initial request, the page loads much more quickly.
Lazy loading is sometimes mentioned in the same breath as infinite scroll. While they aren’t the same thing, infinite scroll DOES utilize some lazy loading techniques. Confused yet? Don’t worry, we’ve got you covered.
Infinite scroll is an alternative to pagination for articles or images. The classic method of pagination would show a certain number of items initially and then display a navigation bar ( < 2 3 4… > ) of links to allow the user to advance to the next “page.” With infinite scroll, the user does not have to click a link to see more items; when the bottom of the page is reached, the next set of posts or images is loaded automatically (Pinterest is a great example of a site that uses infinite scroll). Thus, a page using infinite scroll USES lazy loading, but is not the SAME AS lazy loading.
Sounds great! What’s the catch?
As with any technology solution, there are pros and cons — no technique is perfect.
The biggest drawback to lazy loading is the effect it can have on Search Engine Optimization (SEO).
Search engines like Google might not index or search resources that don’t initially load on the page. Which, of course, is about the last thing most of us want to happen. The solution is to be selective about which resources you choose to “lazy load” and how you set up the process.
If you want to get the best bang for your loading-time buck, don’t lazy load content. Text is quick to render and critical to your SEO rankings; lazy loading your content potentially could cost you rank and doesn’t save you much in terms of loading time.
Graphics, photos and videos are a much better choice for lazy loading. As long as you have properly set your title and alt tags (which you should be doing anyway!), having your graphics, photos or videos load later in the session shouldn’t have a negative effect on your SEO efforts. Since these resources also take a great deal longer to load than their text counterparts, you gain the most advantage from lazy loading image and video asset items instead of text items.
How do I use lazy loading for WordPress?
Plugins to the rescue! Rather than spending your time becoming a lazy loading coding expert, you can install a plugin to do the work for you. There are dozens of lazy loading plugins available, so you are sure to find one that works for you.
So now that you know that lazy loading exists and what you can do with it, go speed up the web! Have any other tips or tricks for lazy loading? We’d love to hear about it in the comments below.
Image by: Ryan McGuire