How Does Lazy Loading Work & Why It Matters

Lazy Loading is an important process that can greatly improve the load time of your website.

What is Lazy Loading?

Lazy Loading is the process of loading an image, iframe, or almost any type of content on your website when it comes into view. This means if you have an image heavy website loading 10MB of images (which is absurdly large), but only the first 30% of the page is loaded, then on the initial load of the website, only 3MB of images will be loaded as opposed to all 10MB. Then when the user scrolls down the page it will then begin downloading those images. The advantage to this method is on very large websites with a lot of images, videos or other content, it does not need to spend as much time loading this rich media content. Especially, if it never gets to the bottom of the page.

How does Lazy Loading Work?

The way this works is by loading different images (often times a base64 encoded image) in place of the actual image and then as you scroll, you tell the browser to load the actual image with JavaScript. The most common script is the echo.js script or blazy.js.  Both scripts work on the same principle by loading some small image in the beginning and then using JavaScript to tell the browser to load the actual image. In fact, we utilize Lazy Loading on our website, which greatly reduces both the load time and the total page size on the initial load. Before you go Lazy Loading everything on your website,  an important note is to pay attention to the effect it has on user experience. Do not Lazy Load images that come in the viewport of your users, as this can greatly and negatively impact user experience in a big way. Many users might believe that their images are not loading properly if you stick a spinner as the loading icon and some might believe your website is simply broken.

What Should I Lazy Load?

Content that should be Lazy Loaded should be virtually any image, video, map, or rich-media content that is not in the viewport of the browser. Below are some of the items I recommend Lazy Loading.

• Images (that are not in the viewport).
• Google Maps
• YouTube/Vimeo/Self-Hosted Videos
• Social Media Widgets

You should avoid loading too many of these resources in the first place. However, I have found that by simply lazy loading this content, your website performance will be greatly improved. This is included in my optimization package when purchased for your website.