Lazy Loading Goes Native in Chrome

Posted on September 30, 2019

Good web developers build great experiences for users. Incredible web developers build super quick, elegant experiences for users. Speed is extremely important in modern web development because a growing number of consumers use mobile phones to access the internet – that’s why a while ago Google announced mobile-first indexing of web pages (basing your search position partially on how performant your website is on a mobile phone).

Pro Tip: While creating a mobile-friendly website is an important principle of modern web design, it’s important to note that the mobile version of the site must be performant. We’ve seen many cases where sites lose search rank because mobile-first indexing reveals how poorly a site performs on a mobile device. Don’t assume that because desktop page load time is fast, that the mobile version of your website is fast too. 

While there have been a lot of improvements in browser standards over the years, a feature called “lazy loading” has always been a performance hack baked into site-side code that utilizes one of the many lazy load compatible CDNs, caching plugins, or libraries. Unfortunately, these solutions often require a paid subscription or JavaScript payload to be transferred client-side as a prerequisite for the performance enhancements that come with lazy loading images. Sounds complicated because it is. That is, until now (if you’re using Chrome). Starting with Chrome v76, the browser gets a new superpower – native lazy loading.

While the Chrome dev blog has a simple article on how to implement lazy loading, here are the top 3 things you should consider before getting started.

It’s only good for images for now

While Chrome developers have eluded to the fact that they might be adding other elements to  lazy load browser capabilities in the future, for right now the feature only works on images (image tags). That means that if you want to lazy load videos, CSS, or other types of content, you’ll need to use a traditional lazy load library.

You’ll still need a fallback for unsupported browsers

While native lazy loading is now supported by Google Chrome, there are plenty of other browsers that don’t yet support this standard. In-fact, the market share for Chrome worldwide is only 63.99%. That means that a little less than half of your users will experience diminished performance unless you opt to implement a lazy load library or plugin.

Effectiveness of implementation has had mixed reviews

In web development, installing a library or plugin is rarely the entirety of what needs to be done to implement a new feature. In the case of implementing native lazy loading in WordPress, there are a couple factors to consider including how your images are loaded (are they loaded with CSS as backgrounds to layers or as images within image tags) and conflicting plugins (a plugin that isn’t aware of Chrome’s new superpowers might continue to load libraries in order to lazy load the old way).

Overall it’s awesome to see lazy loading capabilities becoming standard within browsers (especially browsers sponsored by the same companies that use performance as a ranking criteria). In the future, we look forward to other browsers adopting the lazy load standard along with the inclusion of new elements.