Core Web Vitals and Lazy Canvases

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Core Web Vitals

Three measured numbers (LCP, INP, CLS) that Google uses to describe a page's real loading, reaction and stability.

LCP

Largest Contentful Paint: how long until the biggest image or block of text on screen is drawn. Good: 2.5 s or less.

INP

Interaction to Next Paint: how long the page takes to react after a tap or key. Good: 200 ms or less.

CLS

Cumulative Layout Shift: how much visible content jumps while loading. Good: 0.1 or less.

dynamic import()

import("./file.js") loads a module when the line runs and returns a promise. Bundlers put it in its own file.

IntersectionObserver

A browser object that calls your function when an element enters or leaves the visible area, without you listening to scroll.

1. 1

   Reserve too little

   In the second example set .slot.reserved to height: 60px. B still prints paragraph moved by 0 px: the box keeps 60 px, and the 120 px canvas (never drawn in this example, so you cannot see it) sticks out of it and would sit over the paragraph. Reserve the real height, not just any height.

2. 2

   Break the download

   In the first example change import("three") to import("three-missing"), the way a failed or offline fetch ends. The console prints visible: fetching three.js now and then Uncaught (in promise) TypeError: Failed to resolve module specifier 'three-missing'. The poster stays, which is the right result: the visitor keeps a picture. Catch the failure, as boot.js does, and say why 3D is missing.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: three.js plus a showroom is hundreds of kilobytes of JavaScript, a model, textures and shader compilation. If all of it must load before the page shows anything, the page feels slow, and a visitor who never scrolls to the 3D part paid for it anyway.

2. 2

   Three numbers Google measures. The Core Web Vitals are LCP (Largest Contentful Paint, when the biggest thing appears), INP (Interaction to Next Paint, how fast the page reacts to input) and CLS (Cumulative Layout Shift, how much things jump). web.dev's "good" thresholds (75th percentile of page loads) are: LCP at most 2.5 seconds, INP at most 200 milliseconds, CLS at most 0.1.

3. 3

   A canvas is not an LCP element. web.dev lists the elements that count for LCP: <img>, an <image> inside <svg>, a <video> poster, an element with a url() background image, and block-level text. A <canvas> is not on the list. A poster <img> is what LCP measures; a 3D hero with no poster leaves LCP to something else, later.

4. 4

   Poster first, three.js later. The page loads a tiny entry script. It waits, with IntersectionObserver, until the showroom is near the viewport, and only then runs import("./main.js"). A dynamic import() makes the bundler put everything behind it in a separate file that is fetched on demand. The first example does this with a poster and a scroll, and prints the order of events.

5. 5

   Start and stop. The same observer can stop the render loop when the canvas scrolls out of view and start it again when it returns, so a page with a 3D section far below costs no GPU time while the visitor reads text. The example prints scrolled away: loop stopped. Background tabs already pause requestAnimationFrame; an off-screen canvas in a visible tab does not.

6. 6

   CLS: reserve the space. A canvas starts with no size, so content below jumps down when the scene arrives. Give the container its final size first (aspect-ratio, or a fixed height). The second example measures the jump: 120 px without a reserved slot, 0 px with one.

• You can name the three Core Web Vitals and web.dev's "good" thresholds.

• You can load three.js with a dynamic import() when the scene is about to be seen.

• You reserve the canvas's space so nothing jumps.

• You stop the render loop when the canvas is off-screen.