Lazy loading in Chrome Canary

Google Chrome

In a good restaurant the food is usually served whenever you are ready for it. The waiter serves the entree after the appetizer. Same with the dessert, it will be served when the customer is ready for it to be consumed. Google Chrome soon will serve media in a browser similar to the way food is served in a restaurant. Via built-in lazy loading.

When visiting a website, a browser downloads the entire content of that page. Based on the number of images this can delay the load process significantly, especially when browsing the web on a mobile phone with limited bandwidth.  Google’s Lighthouse tool ranks deferring offscreen images often as the #1 resource to optimize the performance of a web page, as shown in the Lighthouse performance metrics for the homepage of The Guardian:

Lighthouse report lazy loading

In an effort to improve performance Google started rolling out lazy loading images in Chrome Canary last week. With the proper options enabled Canary only loads the media that is visible in the user’s viewport – and serves the rest of the images when the user is scrolling them into the viewport.

Pay only for what you actually consume

Lazy loading has been a popular tool for webmasters to improve the overall page load performance, usually done using Javascript. By adding lazy loading functionality to the browser Google not only improves the performance of all web pages but also saves users a few bytes of Javascript code as well. Mobile users with limited data plans will no longer pay for images they never get to see.

Lazy loading is currently only available as an option in Chrome Canary, but will be rolled out to Chrome in the near future. 

About Uwe Kristen

After graduating in Scottish Literature at University of Glasgow in 1996 Uwe put down his empty glass and left the pub. He took the next airplane to New York City and started coding websites. He still codes. He still reads.