What is Lazy Loading?

Lazy Loading images is a website process, usually written in JavaScript, that prevents images from being loaded on the webpage while they are not visible. Often called deferring or defer.

The images are only loaded into the view when the user scrolls to a point where an image should be visible. See our consulting page here as an example.

What does Lazy Loading achieve?

Lazy Loading achieves a faster webpage loading speed, specifically shortening the critical rendering path. This reduces the amount of information the browser must display in order for the webpage to be declared loaded.

In terms of SEO, your webpages are not just ranked on their content alone. How your website performs in terms of loading times is also a ranking factor. Slow websites are not user friendly. Slow Websites do not help with user retention.

When should I use Lazy Loading?

Lazy Loading should be used if you have large or many images that occur “under the fold”.

Under the fold essentially means offscreen when your webpage has finally finished loading.

These “offscreen” images should be deferred – Lazy Loaded.

How do I Lazy Load Images?

Generally you would use JavaScript to do this and we have an article called 11 tips to squeeze more performance out of your webpages that has a whole section on how to do this.

But now, due to the popularity of lazy loading, there may be a better way.

Introducing loading=lazy

The latest kid on the block for lazy loading images is an html attribute called “loading”.

Instead of using the JavaScript method to lazy load your images this new feature is lightweight, simple, and a game changer for webpage loading speeds.

“Loading” can be added to any image element and its value be set to “lazy”. For example

<img loading=lazy scr=”/images/example.jpg”/>

But before you get too excited you need to know which browsers support this new feature and for that I will point you to caniuse.com. https://caniuse.com/loading-lazy-attr.

In short, most current browsers now support this lazy loading feature and at the writing of this article 74.7% of all browsers in operation globally support this attribute.

Safari has penciled in that they are adding the feature but not by default.

Check your audience statistics to see if this corner of your audience is significant enough to warrant keeping your slow, clunky, and ultimately heavy JavaScript.

We here at ProcessIT use Google Analytics for these insights.

Google Analytics – Audience

Log into your Google Analytics account and in the menu to the left select Audience.

Scroll down to Technology.

Select Browser & OS.

From the provided list of browsers check the % of users under Acquisition. Take note of browsers that do not support the loading=lazy attribute.

If these percentages are significant then you may want to keep your current JavaScript Lazy Loading method.

From here it is up to you. The benefit of reduced JavaScript file size may outweigh the need to provide lazy loading to a few people that visit from time to time on unsupported browsers.

If you’re interested in sub 1 second loading times for your webpages then we suggest this article we wrote a few weeks ago on tips for improving your webpage loading times.

11 Tips to Squeeze more performance out of your webpages