by Martin Brinkmann on August 14, 2018 in Google Chrome – 9 comments
Google’s Chrome web browser may soon support the native lazy loading of images and frames. Company engineers implemented two flags in Chrome Canary, the cutting edge development version of Google Chrome, that users may enable to unlock the new functionality.
Not all elements on a web page are of equal importance on load. The content that is visible to the user has priority over content that is displayed somewhere at the bottom of the page because it is not visible to the user.
Lazy loading is not a new technique but it is used by some sites on the Internet to speed up the loading of pages. Instead of loading some elements on start, say images, lazy loading loads them when they are required or shortly before they are required.
Think of images placed on page three of an article. While you could load them when the user opens the page in a browser, loading these images when the user is on page two might be beneficial to the page’s initial loading time.
Related: Google tested heavy page warnings in Chrome recently.
Lazy loading in Chrome
Chrome users who use Chrome Canary can enable the new lazy loading functionality that Google baked into the browser right now. Note that experimental flags may be removed by Google at any time and that there is no guarantee that functionality will be integrated into the browser.
Tip: Load chrome://settings/help to check the version of the browser and whether it is Chrome Canary.
- Load chrome://flags/#enable-lazy-image-loading in the Chrome address bar.
- You need to set the flag to enabled to turn image lazy loading on in Chrome.
- Load chrome://flags/#enable-lazy-frame-loading.
- Enable the flag to turn frame lazy loading on.
- Restart the Chrome browser.
Image lazy loading defers the loading of images until the user scrolls near them and the same is true for frame lazy loading (but for frames).
How beneficial is lazy loading?
Lazy loading supposedly improves page load times by blocking some elements from being loaded on page load and loading them when the user scrolls near them. Chrome’s implementation enables lazy loading for images and frames.
Lazy loading is mostly useful for slow connections. I ran a quick test with both lazy load flags enabled and could not see a difference on a computer with a relatively fast 50 Mbit connection.
If you are on a 5Mbit or slower connection, you may be able to see the benefits of lazy loading more clearly especially on image-heavy or frame-heavy pages.
Lazy loading may save bandwidth for sites that implement it as well as images or frames may not get loaded at all depending on whether users scroll all the way down or exit the site while they are halfway through the page.
I’m not sure how sites are handled by Chrome that already do lazy load some of their content. Will Chrome’s implementation spot these and disable native lazy loading or is there potential for conflicts?
Now You: Do you think it is a good idea to implement lazy loading functionality in browsers?