Diagnose Layout Shifts with a Reserved-Space Model

This self-study workshop diagnoses a fictional reading panel that moves when space is added above it. You will compare an unreserved layout with a reserved one, calculate one simplified shift score and keep that calculation separate from a complete browser metric. No live website, advertisement or remote image is involved.

The web.dev CLS explanation describes movement of existing visible elements between frames. A shift score multiplies impact fraction by distance fraction; distance uses the viewport’s largest dimension. New content alone is not a shift unless existing visible content moves.

Define the geometry before the score

Assume a 500-by-800-pixel viewport, with no margins or scrolling. A fictional story panel spans the full 500-pixel width and is 200 pixels high. In the unreserved case it begins at the top. Adding a 100-pixel banner area above it moves its top from zero to 100 pixels.

The union is 300 pixels high because the original panel occupied zero through 200 and the moved panel occupies 100 through 300. The overlapping middle region is counted once. Adding both areas without removing the overlap would exaggerate the impact fraction.

Measure a position change locally

The MDN rectangle reference defines getBoundingClientRect() as returning size and viewport-relative position. That lets the local model compare a panel’s top before and after the change.

<div id="slot"></div>
<div id="story">Fictional reading panel</div>
<style>
body { margin: 0; }
#slot { height: 0; }
#story { width: 500px; height: 200px; }
</style>
<script>
const slot = document.querySelector("#slot");
const story = document.querySelector("#story");
const before = story.getBoundingClientRect().top;
slot.style.height = "100px";
const after = story.getBoundingClientRect().top;
const movement = after - before;
</script>

The expected position difference is 100 pixels. For the reserved comparison, start the slot at 100 pixels high and leave it at that height when the banner becomes available. The story then begins and ends at the same vertical position. Its expected difference is zero.

This script checks geometry synchronously. It does not observe rendered-frame layout-shift entries, exclude user-input-associated shifts or aggregate a full CLS observation window. The paper score describes a stipulated visible transition; the local position check verifies the mechanical displacement only. Keep both limitations in the answer sheet.

Explain the fix and its limits

The reserved layout works for our model because the later content fits inside the space already allocated. If the fictional banner unexpectedly grows to 160 pixels, reserving 100 would not describe its final size. The remaining sixty pixels could still move the panel. A reservation must be connected to a credible content contract.

Another error is to record only the new banner’s dimensions and conclude that the shift equals its area. The task concerns how previously visible content changes position. The worked table therefore follows the story panel, not merely the element introduced above it.

Now alter the story height to 300 pixels while keeping the 100-pixel movement. Its old and new regions span a 400-pixel-high union. The impact fraction becomes one half, so the simplified single score becomes 0.0625. The displacement is unchanged, but the affected area is larger. This makes the two factors in the score easier to distinguish.

For a final diagnosis, imagine that a panel changes colour without changing its position. Our geometry worksheet reports zero movement. That says nothing about whether the colour transition is distracting or readable; it answers a narrower positional question. Choose a measure that matches the defect under investigation.

Questions and completion criteria

Retain the geometry assumptions, union-area calculation, two position differences and the explicit metric boundary. Success means distinguishing a movement mechanism from a complete performance result. No production speed or stability guarantee follows from this isolated exercise.

This is an original INTIAU editorial self-study activity; no qualification is awarded. Institutional information is available through Courses and Contact.

View the study diagram