How to Enable Image Lazy Loading in Google Chrome?

Lazy loading is the feature of loading media files like images only before viewing. Generally when you open a webpage, the browser will try to get the entire content from the server. Large images can easily consume high bandwidth especially on mobile devices. But if they are at the bottom of the page and you don’t view them at all then it is clearly a waste of resource and cost you paying for consuming internet bandwidth. Currently website owners can enable image lazy loading on their sites to improve the page loading speed. Google Chrome takes this feature to next level by introducing lazy loading in the canary version.

Above and Below the Fold

Before we can discuss enabling lazy loading, you need to understand the meaning of above the fold. When you open a webpage, content seen on the browser window without scrolling is above the fold content. This is of utter importance to get attraction and retain the user similar to a newspaper content.

The remaining content below the screen that you can see only by scrolling is below the fold content. The images part of below the fold is not necessarily to be loaded during the loading of above the fold content. This is logical as well as helps to improve the loading speed of above the fold content.

The images in below the fold content can be loaded as and when you scrolls down. In this manner, you will notice the improvement in overall speed.

How to Enable Image Lazy Loading in Google Chrome?

At this point of time Google is trying lazy loading of images as an experimental feature. So this is not available on normal Google Chrome browser. You need to install Chrome canary version to checkout this.

Install Chrome Canary

Google has multiple versions for Chrome browser. Canary is a nightly build version for developers to test the features in advance. Google will publish the updated almost on every night on canary version. Go to official website, download and install Chrome canary on your computer.

Enable Image Lazy Loading in Google Chrome

Open Chrome canary browser and go to command URL ‘chrome://flags’ URL. You will see a warning like below indicating experimental features may affect the stability. Since it is already developer version you don’t need to worry about that warning.

Search for ‘lazy’ and you will two flags as shown in the below picture:

#enable-lazy-image-loading – loads the images only when you scroll nearer to them.

#enable-lazy-frame-loading – loads the content within frames only when scroll nearer to them. Lazy frame loading is already available as an experimental feature in normal Google Chrome.

Enable lazy image loading flag by selecting ‘Enabled’ option from the dropdown. Click on the ‘Relaunch Now’ button to close and reopen the browser windows.

Testing Lazy Loading

Now open few webpages and scroll them to the down. You may not see any difference when you scroll normally. If you scroll very fast, you will see the Chrome loads the image placeholder and then the image when you scroll nearer to it. The placeholder image will look like below indicating that lazy loading is enabled on the browser.

How Lazy Loading Works on Chrome?

Well, if you are much interested in how it works then head on to the developer’s portal to understand more. Basically Chrome will use JavaScript to check whether the image is in the browser’s viewport. If not, then it will load the placeholder for all the images outside the view port. When you scroll down the real image will be loaded replacing the placeholder image.

If the website owner already enabled lazy loading at server level then you will not find any difference on Chrome even by enabling the lazy loading flag.