Do not waste users’ time on rendering off-screen content

And also do not annoy users with an infinite scroller.

Browser cannot distinguish invisible from visible contents

Contents shown in a web page usually do not fit into the screen.

When a page is loaded a browser calculates the dimensions and positions of all the displayed elements in the page DOM. The elements are laid out all even when most of the page contents are invisible until a user scroll the page to bring them into view.

A browser spends time on laying out the entire DOM because without developer hints it does not differentiate the visible elements from invisible ones. In a sample web page described below I illustrate this important fact — a browser applies CSS rules and calculates lays out a element even when the element or its parent:

• is off-screen
• is hidden as overflow
• is applied visibility:hidden

The bigger is a page HTML, the more time the browser needs to render the page, the longer users wait until something is displayed on the screen. No one likes waiting. How offer users a short rendering time for huge pages?
As usual I focus on web applications presenting tabular data but the idea is applicable to any page with structured contents.

How to reduce rendering time of off-screen contents?

Basically there are two options to avoid rendering the elements that are not in the viewport.

Infinite scroller-like solutions

It is quite popular to reduce page rendering time by keeping in the DOM only the contents that overlap with the viewport at the current scroll position. In similar approaches, the DOM is not modified but its nodes are not displayed unless they overlap with the viewport. Such approaches are both user and developer-unfriendly. The developers have to contribute and optimize additional JavaScript code, whereas the users are annoyed because they cannot search the entire page contents with the usual Find (Ctrl+F) feature of a browser. It is also impossible to use links to the…