10 Web Performance Audit Tips for Your Next Billion Users in 2018: Offscreen Loading

Celý článek

Just as the name implies, offscreen images are images that appear below the fold. Since users can't see offscreen images when they load a page, there's no reason to download the offscreen images as part of the initial page load. In other words, deferring the load of offscreen images can speed up page load time and time to interactive.

Offscreen loading can be best explained with a simple analogy. Assuming you are reading an article on one of your favorite publications. This article has in-content images spread across different sections of the post. The contents including the images that are not seen immediately after loading the page are referred to as Below the Fold contents.

You can defer loading the contents that are not visible immediately. Some contents have heavy images and videos which you should only load or play when the user scrolls towards the image.

This will give the user a better reading experience because the first content [s]he sees is shown faster immediately on page load. Deferring loading offscreen contents also saves you money because most contents are not 100% consumed. Hence, you only spend money on bandwidth for what was consumed and not what was delivered.

Considerations

The Intersecion Observer

There is this new Intersection Observer API that is gradually making waves. It provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. By doing this, it allows sites to lazy-load images and other media, render and remove DOM on demand as we would need for a million-row grid and provide infinite scrolling as can be seen in social network feeds. Asides from observing changes, the Intersection Observer API also helps with displaying ads. Third-party advertising tends to contribute to page bloat - a problem which can be prevented by implementing the Intersection Observer API. You can use the API to monitor what the user is currently reading and act on that. Therefore, you can load more images into placeholders close to the reading area. Should you opt to use Intersection Observer, make sure to include the polyfill, because native browser support is limited.

Progressive Loading

With time, pages load more and more images, it’s good to think of their loading process since that affects performance and user experience. If you are generating several thumbnail sizes for your images, you can experiment using a very small ones as the background while the final image loads. You can also use placeholders or a very poor resolution of the image as placeholder, or use scroll events to replace the poor images with the perfect resolution.

Tools and Resources

• Intersection Observer
• Cloudinary Progressive Images
• SQIP