Don't let website speed be the reason customers seek a similar product or service elsewhere. Slow image or video loading isn't just a waste of time, it also uses unnecessary data for customers on cell phones or tablets. It's always a great idea to create a strategy that minimizes the impact of your site's speed.

Lazy Loading

Our recommended strategy for increasing website speed is lazy loading. This technique will allow your site to only load media as it is needed. For instance, media will begin loading once a user navigates to a specific area of the page, while other elements remain unloaded until the user scrolls further. This ensures that there are no bottlenecks during the initial page load time. This approach is also crucial for optimizing your website’s performance in search engines, as explained in our article on resolving technical SEO challenges.  

Background on Lazy Loading 

Lazy loading is not a new concept, it has been around for a long time. Most developers will know about it or at least have come across the name. But what every developer may not know is that lazy loading has been part of the native HTML 5 specification and is supported by most browsers since 2019. Prior to that, the only way to apply lazy loading was to use a javascript based plugin such as lazysizes. Now you can easily use it with a simple HTML code.

How to Use Lazy Loading with HTML Code

Here is an example HTML image element:

To lazy load this image we simply add loading=”lazy” to the code.

It really is that simple. There's no need for javascript plugins or additional code, it is all easily done using the native HTML attribute.

Not All Browsers Support Lazy Loading

While HTML lazy loading works with major search engines like Chrome and Edge, there is still need for improvement with others.

Currently Lazy Loading is not fully supported by Safari and Firefox. Here are the limitations:

• SAFARI: According to caniuse.com statistics, Safari does not support Lazy Loading. 
• FIREFOX: Firefox currently only supports it for images, it will not work for iframe or video elements. 

The expectation is that this will change in the near future and that both browsers will soon allow HTML lazy loading. 

How To Get Lazy Loading To Work With Safari & Firefox

There is a javascript based polyfill that bridges the functionality gap in these browsers.

Lazy Loading & CSS Background Images

HTML lazy loading does not work for background images applied with CSS. Generally speaking, it is best practice to use <img> elements for all images on your pages instead of applying images to divs or other generic elements using CSS. With the object-fit CSS rule you can achieve nearly all of the same things that developers once relied on for background images. 

Here's how to use Lazy Loading if you have background images:

• The first thing to consider is how many background images you use on your site. If it is only a small number and they do not noticeably add to your page load times, then you might decide to just not lazyload them.
•  If your background images are adding some significant weight to your page then the best option is to use the javascript based method of lazy loading. While not as clean or elegant as the native HTML way, there are still a number of good plugins that support lazy loading of all applicable media elements including those using background images.
• Here is an example of the lazysizes plugin using a simple div with a background image:
  

• We also need some CSS styles to make our div show the background image correctly.

 Lazysizes requires you to set the image path in the data-bg attribute. We also apply the lazyload class to our div because this is the unique class used by the lazysizes plugin to instruct it to lazyload an element.

That’s all there is to it. Lazysizes takes care of the rest and loads the background image when the user reaches the element in their browser viewport. If you use a dedicated plugin like lazysizes, it's best to use it only for the scenarios that are not covered by HTML lazy loading and then use the HTML method for your more conventional scenarios.

Conclusion

The last thing you want is to frustrate customers with slow loading times and encourage them to shop elsewhere. With these simple steps you can add Lazy Loading and instantly improve your website speed. If you need further support with digital strategy, contact our team at Slicedbread. Our experts are ready to help.