Display Images Only When You Need Them (Faster Site With Lazy Load. 50 Tests)

I’ve written this article to show you a practical effectiveness of lazy load optimization using a free WordPress plugin. It allows to significantly cut the page loading time (make your website faster). I’ve run 50 manual tests to get reliable test data.

I also focused on Render Start time and Visual Complete time in my research. These are important metrics for a neat user experience that you’ll want to consider.


 

Intro and what you’ll learn

It goes without saying that making a website faster is a significant factor in obtaining and retaining your online visitors and customers.

Different case studies show that half or so of a website visitors abandon if it takes longer than 3 or 4 seconds to load. I’m not insisting that these number are correct for any website. But in general, visitors become more sensitive on website speed they are visiting.

Also, a faster website has more chances to rank better in Google, especially with beginning of a mobile era.

By the way, you don’t need to be obsessed with optimizing a handful of unnoticeable milliseconds. But when we talk about more significant amount of time, it starts making a very good sense.

In this respect, lazy load is an extremely easy and efficient method of your website speed optimization. It significantly cuts the total loading time of a page. And the larger your page is, the better the speed optimization effect will be.

To put it very simply, lazy load optimizes your website speed performance. This is so because this functionality makes your browser load only those images on a page which must be displayed at a certain time. Other images, as well as some other visual elements, on the page will be loaded and displayed later as you scroll down the page.

At the same time, lazy load does not affect much start render time or visual complete time. (More on this below.)

So, in this article you will learn:

• Some examples of how lazy load may look like for your website visitor.
• How lazy load makes the experience of your your website’s visitors better.
• How faster your website becomes when using lazy load (50 experiments done).
• Comparison of a website performance with and without lazy load functionality.
• What the differences are from a visitor point of view between page load time, start rendering time and visual complete time.
• What free lazy load plugin for WordPress I’m using.

 

What is lazy load

If you have never heard of lazy load, you might have already seen it in action.

Lazy load is the method that makes internet browser load some page elements (images, thumbnails, embedded media and some other visual elements) only when a visitor is going to see them.

For example, when you open a page optimized by lazy load, the images are displayed not right away, but with a delay that sometimes can be noticed. You can also see the images fading in.

By the way, when you scroll down a page, you see the text immediately. But the images may appear not instantly.

Here’s an example of opening a page with no lazy load functionality used (20-second video):

And here’s an example of opening a page using lazy load functionality (20-second video):

With lazy load functionality the images appear with a little delay or with a fading-in (or spinning icon) effect.

These effects go during a portion of a second or so before displaying an image itself. The effects depend on a lazy load plugin functionality.

Here’s a demonstration of fade-in and spinner lazy load effects for images:

After all, the essence of a lazy load plugin is to optimize your website speed performance on a browser level. It is archived by cutting off some http requests within initial loading of the page. Only those http requests are done which visitor’s browser needs to display the page on the visitor’s screen. The rest of the page will be loaded later as the visitor scrolls down.

 

Preparation and methodology of lazy load testing

Preparing the test website:

1. Installed a fresh WordPress site and added several plugins on one of the well-known hosting where I have anonymous testing accounts. There were one of the security plugins and a dozen of others to make the site more heavy than a fresh installed website.
2. Added a post containing 2,000 words, 20 images (4 MB in total) and 12 comments. This way I imitate a typical blog post to test the effectiveness of lazy load functionality.
3. Installed and activated a free caching plugin W3 Total Cache. (By the way, it showed a good performance boost compared to the other free famous caching plugin in my another research). I set up the plugin typically.
4. Installed one of the free lazy load plugins – a3 Lazy Load plugin. There’s a number of other free lazy load plugins, but this one had better reviews, nice visual effects (fade-in, spinner). Most importantly, it did not conflict with my other plugins and theme that I use on researchasahobby.com. Some other lazy load plugin I’ve tried conflicted with my social share buttons.

Running the tests:

For website performance testing I used a free tool webpagetest.org. This tool is known for reporting very realistic browser loading time of a page, start render time and visual complete time. I focused on these metrics in my research.

The testing routine:

• Deactivated the lazy load plugin and run the test for the testing post I created.
• Then activated the lazy load plugin and run the test the second time.
• Then deactivated the lazy load plugin and run the test; and so forth. In total I’ve run 50 tests one after another.

As you see, I run the tests multiple times. I did it so to eliminate the factors of the shared hosting server load fluctuations, network latency fluctuations, the latency fluctuations of the testing tool etc. By running multiple tests and calculating the average values I’ve got more precise and reliable results.

 

Understanding Start Render, Visually Complete and Load Time

These metrics can be found in such website performance testing tools as webpagetest.org. It’s important to be aware of these time metrics which are connected with your website speed and user experience. You need them to understand not only the effectiveness of lazy load plugins, but also to evaluate any other website optimization options.

So, let’s look at what Start Render Time, Visually Complete Time and Load Time mean (it’s very easy).

Start Render Time is the time which it takes a browser to start displaying anything on the page after you enter the page URL. From a visitor’s perspective this is the time which it takes a website to start loading. If Start Render Time is too big (and the page stays blank), a visitor may assume that there’s something wrong with the website. And the visitor will leave the website (bounce off).

Visually Complete Time is the time that it takes for a browser to display everything on a user’s screen. From a visitor’s perspective it’s perceived that a page is ready to start consuming (reading, scrolling down etc).

Load Time is the time that it takes for a browser to completely load all elements and data (text, images, layout, design, forms, tables etc) on the page. No network transfer is included further. Visually it’s like that: a page looks ready, and also a loading icon on a browser tab stops indicating the loading process (e.g. stops spinning).

Besides, Load Time can be used as the approximate time when the page becomes totally consumable. (In fact, a page becomes totally consumable and interactive a bit later after Total Load, but this fact is not important for now). So, user can fully interact with the page, e.g. manipulate with the interactive elements on the page, input data on the page etc.

Here’s a filmstrip of a page loading process to clarify the explanations of the above terms.

 

The results of 50 speed tests with and without lazy load

As I’ve noted above, I’ve run 25 test with lazy load functionality and 25 tests without lazy load functionality to compare the speed performance of the website.

Result charts

Here are the charts with the test results:

Result tables

And here are the same lazy load test results, but in table views.

Lazy load plugin is not used:

Lazy load plugin is used:

Comparison (average values):

Webpagetest.org test samples

Here’s a sample of a webpagetest.org test run without lazy load functionality (the image is clickable):

And this is a sample of a webpagetest.org test run with lazy load functionality (the image is clickable):

Here you can download all 50 tests that I’ve run using webpagetest.org (39 MB).

 

Understanding the lazy load tests results

When it regards website performance, especially when tested on shared hosting, it’s important to run multiple tests. Otherwise, there’s a high risk that the results will be incorrect, too inaccurate or unreliable.

I’ve seen too many bloggers use just a single test to draw their conclusions. This way they analyze hosting performance, website speed optimization tools etc. This is a wrong way.

As you can see from the above test data, single measurements fluctuate quite a lot. For example, Start Render Time differed from 1.3 seconds to 3.4 seconds in single tests. And Visually Complete Time differed from 2.6 seconds to 6.9 seconds. And this is no way because of lazy load influence.

The reason for the website speed fluctuations in tests is mainly the nature of a shared hosting server, as well as the network.

Server load (and therefore website performance) differs greatly, even in many times withing a short period of time. Multiple users and processes on a shared hosting run simultaneously. And it causes my test website’s performance differ for no inner reason.

Network and server latency fluctuations are also great. Although I’ve not presented Time To First Byte (TTFB) in this article, it also differed very much from 0.2 seconds to 2.1 seconds in my tests. (Most values get into 0.2-1 second interval). Again, this is not because of lazy load functionality. By the way, you can read this article to learn more about Time To First Byte and how it’s connected with website performance.

That’s why running multiple tests and calculating average values is essential if you want to get reliable results. By the way, for scientifically precise results there should be some statistical operations applied additionally (such as calculating statistical error). But it would be an overkill for this article. Fifty tests that I’ve done and calculating averages is enough for evaluating lazy load effectiveness.

Regardless of fluctuations in single tests, the average values of Start Render Time and Visually Complete Time are almost the same for both groups (with lazy load and without lazy load functionality).

From a visitor’s perspective visualization of a page is almost identical in both cases (with and without lazy load functionality). The only difference in visualization is that loading icon on a browser tab continues spinning for much longer if lazy load is not enabled.

However, there is a more important difference between using and not using lazy load functionality from a visitor’s point of view. It’s connected with Load Time.

Load Time is significantly less when lazy load is enabled. This means that a visitor can start interacting with the page much sooner compared to when lazy load is not enabled.

If your page contains just text and images, then you are not likely to notice a critical difference between using lazy load and not suing it. Only a spinning icon on your browser tab would indicate that the page is not fully loaded yet. And a page without using lazy load plugin may response more slowly.

Anyway, smaller load time is more beneficial from a SEO point of view as Google wants sites to load faster.

 

Conclusion

To resume, Lazy Load helps to make your site look faster, especially if your pages are big and have a lot of elements such as images, iframes, embedded videos etc.

The advantages of using Lazy Load functionality is opening a page much faster from a visitor’s perspective:

• According to my 50 tests on a page with 2,000 words, 20 images and 12 comments, lazy load functionality could cut the load time from 12.25 seconds to 2.91 seconds on average. However, according to my tests, using lazy load functionality does not affect much start render time and visually complete time.
• Faster load time is good for SEO.
• Also, lazy load allows a visitor to start interacting with the page much sooner.
• One more advantage is that lazy load functionality can save your bandwidth in case a visitor does not read the whole page.

As regards the disadvantages of using Lazy Load functionality, they are minor. But still you need to be aware of them.

• Any additional WordPress plugin has a risk to your WordPress integrity and security. website security is a different topic. And as regards possible compatibility issues with other plugins you use on your website, you can test a plugin before you use it.
• Another disadvantage is connected with how lazy load affects the visualization of your website. If your shared hosting is overloaded, and your page is a big one and contains a lot of elements (e.g. images), then these elements will be displayed on your page with a noticeable delay. This delay may irritate your visitor to some extent.

Anyway, without lazy load functionality your visitor is more likely to quit your page because of a website slowness. And this is even worse than a laziness of image loading that can be too “lazy” with big pages and slow hosting.

That’s why whether you enable or not lazy load, you better use a fast and reliable hosting.

There are a number of lazy load plugins for WordPress. When choosing one make sure it does not conflict with other parts of your website. And enjoy!

P.S.: You’re welcome to check out more articles on WordPress performance optimization here.