Above the Fold API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

Prioritize images above the fold

To prioritize images above the fold, follow these steps:

1. Check whether the image's component is above the fold. Specify the component's ID. A component that isn't marked returns undefined, which counts as not above the fold:

   Copy

2. Choose how the browser loads the image. Load it right away with high priority when it's above the fold, and lazily otherwise:

   Copy

3. Render the image with both attributes:

   Copy

Defer a heavy component below the fold

To defer a heavy component below the fold, follow these steps:

1. Check whether the component is above the fold, and use the result as the initial state. This value doesn't change for the lifetime of the page, so there's no need to check it again. Also create a ref for the placeholder:

   Copy

2. In an effect, use an IntersectionObserver to watch the placeholder that step 3 renders. When the placeholder scrolls into view, stop watching and show the full component:

   Copy

3. When showContent is false, render a placeholder with the same size as the full component, so the page doesn't shift when the full component replaces it:

   Copy

4. When showContent is true, render the full component:

   Copy