Let me tell you a story:

When I was reading for the first time “The 4-Hour Workweek” by Tim Ferriss, I was mesmerized. It was such a big revelation for me that it’s not mandatory to work 8 hours a day and that there are opportunities allowing me to earn more money with less effort.

Of course, I never arrived at a point where I work only four days a month.

Just the opposite happened…

Once I was hooked, I’ve started studying and working even harder.

But with one significant difference:

I’ve enjoyed it!

So the idea to indulge my laziness somehow made me a hard worker.

You know, I’m one of these people who believe that human progress is a result of our desire to have easier and happier lives. Result of our instinct for energy preservation and efficiency.

So “laziness” is not all bad… it can be a virtue too!

But not always…

It’s just like the lazy loading of images. We think of it as a technique that makes our websites faster and thus improves the user experience it offers, but there are cases when it actually worsens the user experience.

When the image is above the fold, especially the “largest contentful paint element,” it should be loaded as fast as possible. It’s not a good setup if the rest of the page must be fully loaded before the images above the fold show up.

Also, there is the technique of “preloading” the biggest image that prompts the browser to download it as soon as possible. Tools like Lighthouse or Pagespeed Insights often suggest some images be preloaded.

So what is the practical side of this SEO rant?

  • You should check does your images above the fold load “eagerly” (default).
  • Will there be any gains if some of these images are preloaded by the browser?

How to check does your images above the fold load “eagerly”

As described in one of my previous articles, you can use the “Divide and Conquer Policy” when auditing your websites. Basically, your group your pages by type and analyze only one or two pages from every group:

(In Chrome)

Step 1: Open the Developers Tools;
Step 2: Click the button with a little arrow in the left so you can inspect HTML elements by pointing them with your cursor;
Step 3: Click on every image above the fold;
Step 4: When the element’s tag shows up in the Developers Tool’s Elements Tab, look for an attribute “load.” If it’s missing, that means the image is loaded eagerly by the browser.

Will there be any gains if some of these images are preloaded?

The easiest way to discover that is to use Lighthouse or Pagespeed Insights. These tools will tell you if it’s a good idea to preload something.

Loading your images the right way can drastically improve your performance score.

In conclusion…

I started this article with a story about my discovery of the book “The 4-Hour Workweek” and how my inspiration to earn more with less effort actually made me a more diligent worker.

So as with everything in life, we must watch out:

Sometimes the common wisdom is correct (it’s bad to be lazy, lazy loading of our images is good), but other times it’s profoundly wrong, and trusting it blindly can have serious consequences.