What makes lazy-loading so special that over 3,000,000 websites worldwide utilize it? Lazy loading is a technique used by websites to improve their performance. Instead of loading all the content on a page at once, the website only loads the content that is visible to the user. This improves the user experience and reduces the amount of data that needs to be transferred.
To understand more about lazy-loading let’s go back to the beginning of the web era, where websites didn’t have any designs at all. They were just plain text because HTML or any other markup language didn’t allow creating layouts. Also, people had limited internet access, and the connections were also pretty slow. Websites were built pretty basic taking all of these factors into consideration.
Look at CERN’s website that went live in November 1992. This was the very first website and completely text based. The default blue hypertext was the only splash of color. Setting up a page and getting it live was a big task on its own, during those times.
But as time passed websites started getting more colorful and interactive. And, websites today are created as per our imagination without any restrictions. To an extent that they are looked up as pieces of art. This is possible because of new technologies like HTML5, CSS3, and JavaScript.
The increase in design and interactions have naturally led to increase in the page sizes. The average web page weight has grown to 3719kB as of 2022. Out of which images and videos make up nearly 78%. It takes a lot of time to completely download and render the whole website on the user’s screen.
That’s when lazy-loading comes to play! Let’s discover the What(s), How(s) and Why(s) of Lazy Loading in detail.
What is Lazy Loading?
Yeah, the name does sound strange. But, mind you it is one of the coolest things that enhance and optimize digital experience. Lazy loading is a web optimization process that loads the image at the top of the page or the top view-port content first. The downloading and rendering of content below the fold/view port is delayed.
To understand in simpler terms, the part of the web page which is visible to you on your screen is called a view-port. So, everything on the first view-port, be it images, videos, content, etc. loads first.
As you scroll down the page, the content is downloaded progressively. The lazy loader ensures that it only downloads images when they are about to become visible, which happens quickly and without the user’s knowledge. As a result, the page appears to load normally.
Developers often utilize lazy-loading to incorporate high-resolution images and videos into a website. However, a website implements lazy-loading for other elements such as JavaScript, CSS, fonts, advertisements, maps, and social media widgets. What this does is, greatly reduces the loading speed of the page. Providing a significant boost to website performance and of course, leading to a more enhanced user experience.
Advantages of Lazy Loading
Now that you understand what lazy loading is and what it does, let’s look at the advantages of using lazy-loading.
There are two major advantages of implementing lazy-loading on your website:
- Better Web Performance – Lazy-loading optimizes content delivery by loading a small part of the page rather than the full page (ps. view-port). This makes users connect to your content faster. This boost in user experience directly translates to higher Search Engine Ranking, reducing bounce rates, and improving brand image.
To know more in detail, read about the importance of web performance and how it influences other factors of your online growth.
- Saves Server Resources – This might not be a huge cost saver for a typical website with 12 to 30 pages. But, think of an e-commerce website with 1000’s of product images. A lot of bandwidth and server resources is required to request and render the images.
What if the user exits the site within a few seconds of opening it? All your resources will essentially go to waste. However, with lazy-loading, the image or content is delivered only when the user requires it.
How to add Lazy Loading?
Google has added support for native lazy loading from the version Chrome 76 (current version is Chrome 112.0). Browsers like Chrome, Edge, Safari, Firefox 🦊, and other Chromium-based also support lazy loading. You can learn more about browser support for native lazy loading here.
Nowadays, modern web frameworks built on Vue, Angular, and React have in-built support for lazy-loading. But looking at the roots, there are two traditional ways you can implement lazy loading: by adding custom HTML code to your website or by installing a plugin on your WordPress site.
Using HTML
Some basic knowledge of HTML is all you need to implement lazy-loading on your website. You have to add this attribute to your image:
<img src=”your-image.png” loading=”lazy” alt=”...” />
Note: Apply lazy-loading to images that are not visible in the viewport. Do not apply lazy loading to images that are present at the top of the viewport.
There might be a layout shift if the dimensions are not specified. You can avoid this by including the width and height attributes:
<img src=”your-image.png” loading=”lazy” alt=”...” width=”200” height=”200” />
Alternative to specify values directly in an inline style:
<img src=”your-image.png” loading=”lazy” alt=”...” style=”height:200px; width:200px;”>
For videos:<iframe src=”video.mp4” title=”...” loading=”lazy”></iframe>
Using Plugin
Download Google’s very own WordPress plugin – “Native Lazy Load”. Just install and activate it from Installed plugins on the WordPress dashboard, and it does the work for you. There are also other lazy loading plugins like a3 Lazy Load, Smush, Lazy Load and much more in the WordPress plugin directory.These simple plugins can make a big difference on your site.
Use cases of Lazy Loading
Given the advantages, it’s rare to find websites that don’t use lazy loading. Who would ignore adding it to their site?
There are many use cases for lazy-loading and I have mentioned a few for you:
- E-commerce: Websites having a large number of products can use lazy-loading to avoid rendering of all the product images.
- Social media: Apps like Instagram and Facebook have a lot of user generated content, so they use lazy loading for faster loading and also saving a lot of data for the user.
- Portfolio: If you are a photographer or designer your portfolio will contain a lot of high-quality images and designs. Lazy loading can be very beneficial for displaying your works as quickly as possible.
- Video sharing platforms: Websites that host a large number of videos, such as YouTube or Vimeo use lazy loading to reduce the load time of the website.
- News: Websites having a lot of images and videos on their articles can also benefit from lazy loading.
Other contents of the website which can use lazy loading:
Lazy loading is not just about images and videos there are also other things that can lazy load, like:
Infrequently accessed content: Content like large table, charts, etc. which visitors/users rarely access can use lazy loading when the visitor/user requests it. This will reduce the initial load time of the page and improve overall performance.
Complex JavaScript or CSS: If your site contains complex JavaScript and CSS, applying lazy loading to them will help in improving the initial load time of the page.
What is Eager Loading?
Eager loading is the exact opposite of lazy loading. Eager loading loads the specified data along with main data when the initial query is executed. Applications use eager loading to display a “loading” screen. We can see eager loading in code-heavy web applications like online games.
Image Optimization
There are various ways you can optimize the images on your website like:
Choosing the right image format – There are various types of image formats like png, jpeg, webp, svg, etc. each format has different use cases and comes with their own pros and cons 😁. Choose a format that creates a good balance between quality and size.
Riddle (use this image format for pages) – I am a file format, used for images online,
Smaller in size, yet high in quality, I’m fine.
Replacing my predecessor, I’m gaining in popularity,
My name is a combination of “Web” and “P” – can you guess my identity?
Choose the correct level of compression – There are two major types of compression lossy and lossless. Lossy compression permanently deletes some of the image data, whereas lossless compression just deletes unnecessary data without affecting the quality of the compressed image. You are free to choose whichever compression suits you the best.
Use CDNs to optimize images – You can store the components of your images on servers that are strategically located around the world. This will reduce the latency and improve the loading speed.
Lazy loading & Image optimization is just one of the few ways to boost content delivery, there are other things like web hosting, choosing the right theme, plugin optimization, and caching that can act as a 🔮 haste spell for your website. You can read about them in detail – 7 Tips to Manage a High Traffic Website.
How to test if Lazy Loading is working?
Not sure if your lazy loading is working or not? Or just curious about how lazy-loading works on any website? Here are the steps you should follow:
- Open any website and press F12 or right click > Select Inspect. Go to the network tab, press filter and select the Img. Now reload the page.
- You will see images that are visible to you in your image list.
- You will see images that are visible to you in your image list.
- As you scroll, you should see the images below the fold appear one after the other.
With this information, you can verify whether lazy loading is in use or not!
Parting Notes
Too much of anything is good for nothing
Applying lazy-loading to every image is not the right way to implement it. Implementing lazy-loading for images located at the top of the view-port can affect performance and user experience of the page. Because you’re running the redundant code to check whether the images should be loaded just to know that you need them. So, build a site with the right balance. And remember, a tool when used wisely can create great wonders.
All the best, for building the best!