content-visibility

<content-visibility> is a simple web component encapsulates modern CSS properties content-visibility and Web API Intersection Observer API to provide cross-browsers solution to skip rendering (layout & painting) elements until it is needed (appears on the viewport) to boosts page performance.

^{CSS content-visibility is only supported on Chrome 85+, Chrome Android 85+ and Opera 71+ but not Firefox, Safari and IE unfortunately, see web.dev. Intersection Observer API supports pretty much all browsers except IE, thus an intersection observer polyfill is included for compatible on IE.}

Basically, all children inside it will only be renderred after it appears on viewport.

<content-visibility>
  {children will not be rendered when outside the first viewport}
</content-visibility>

Compatibility

Getting started

Install

npm i content-visibility --save

Use in JSX (React/Preact)

import 'content-visibility';

const Content = () => {
  return (
    <content-visibility>
      <Section>...</Section>
      <Section>...</Section>
      <Section>...</Section>
    </content-visibility>
  );
};

properties

containIntrinsicSize

This is will be set as CSS custom variable for contain-intrinsic-size if browsers support it. see

<content-visibility containIntrinsicSize="600px">
  {children}
</content-visibility>

Performance results

Rendering frames

Safari comes with Rendering Frames Timeline tool helps to measure rendering performance. Let's have a look the rendering frames without <content-visibility>, total 97 rendering frames happened on the first view.

Only 47 rendering frames happened on the first view after integrated with <content-visibility> the rest of 50 rendering frames happened when scorlling to the viewport

Rendering & Layout time

Generally speaking, we can plausibly say rendering & layout time improved around 40%, however benchmark results vary depends on sampling size, environments, tools, implementation and etc. Too many factors could impact benchmark results, so this is just a quick sample results to demonstrate the performance differences.

Chrome 87.0.4280.141

CSS content-visibility and contain-intrinsic-size

Before

After

Rendering and Painting time reduced around 50%.

Firefox 84.0.2

Before

After

License

Copyright (c) 2021 Brian YP Liu