How to speed up my website with Lazy Loading
by Adrián Barbeito, 7/29/2020, 2:03:43 PM
Slow websites are bad news for either B2B or B2C business. Bellow some of the key reasons:
- Loss of website traffic leading to losses in sales and revenues.
- A profound drop in the website’s SEO ranking.
- Poor customer experience resulting in lower engagement.
- Increase in the user’s bounce rate and a lower rate of conversions.
- Increased chances of website crash or Google blacklisting.
How to make your web faster
Sounds bad, right? Don’t worry. We have two techniques easy to apply that we use in Orienteed as standard. These techniques can dramatically change the loading time.
Does the online store have many images?
Image size
It is very common that sometimes the images used are excessively big. No image should be greater than 500KB. If images of a larger size are found in a store, their reduction should be considered.
Still slow?
Lazy Loading
Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.
Benefits
- Reduces initial load time.
- Bandwidth conservation. Nowadays the mobile traffic is around 52%, and it is quite important to save all the bandwidth possible.
- System resource conservation.
How does Lazy Loading work?
Below the difference between the traditional load (eager) and the lazy load.
On a lazy load, only the images available on the viewport (the visible part at that time) are loaded. Once the customer scrolls and the images appear in the viewport, they will begin to load. On a eager load all images are loaded at once. It doesn’t matter if it’s in the viewport or not.
There are different options to implement the Lazy Loading on images and videos using Javascript:
- Intersection Observer API
- Yall.js
- Lozad.js
- …
Quick dive into Yall.js
A quick way to implement the Lazy Loading is using a library like Yall.js. Example:
<body>
…
<img class=”lazy” src=”placeholder.jpg” data-src=”image-to-lazy-load.jpg” alt=”Alternative text to describe image.”>
…
<script>
document.addEventListener(“DOMContentLoaded”, yall);
</script>
…
</body>
The image “placeholder.jpg” will be shown and once the image is available on the viewport, the “image-to-lazy-load.jpg” will be shown. The “placeholder.jpg” should be small and the same for all images. A good approach could be an image transparent of 1×1 pixel.
Steps to implement:
- Include the dependency.
- Add a listener when the DOM is loaded to enable the Yall functionality.
- Add the class “lazy” to all the images.
- Change the path of the image from src to data-src.
- Create the placeholder image.
Lazy Loading is a design pattern, so there are other approaches that can be applied, such as pagination. Very useful on pages like product list. For example, init the page with 15 elements for example and include a button to retrieve more elements at the bottom, or dynamically on scroll.
