Layout Shift: How to prevent it ? (Cumulative Layout Shit / CLS)


A layout shift occurs when the rendering of the web page shifts / move element from their current position.



For instance:

  • without the knowledge of the target ratio (via the height and width attribute of an image, the browser can't reserve space for the image
  • it download the image calculate the space needed for the image
  • recalculate the layout
  • and shifts element around to be able to put the image

That's what's called a layout shift



  • Set the correct image ratio on the image tag with the height and width attribute


When you change a layout css property after page load (the first rendering), you will also create a layout shift.

Solution: If you want to change two layout property at the same time, you should use the window.requestAnimationFrame function to avoid a layout shift.

Example with a dynamic correction of a fixed top header such as the Bootstrap navbar where:

  • we add the fixed-top class that set the position to fixed
  • and correct it with a padding on the body.
window.requestAnimationFrame(function() {
    let fixedNavbar = document.querySelector(".navbar[data-type=\"fixed-top\"]")
    let offsetHeight = fixedNavbar.offsetHeight;"padding-top",offsetHeight+"px");


Occurences: Devtool

In the devtool, layout shift can be seen

  • in the performance tab:
    • click the start and reload page (Ctrl+Shift+E)
    • stop it when the page has finish loaded
    • check the experience row.

Layout Shift Devtool Performance

  • in the rendering tool where you can see the shifted region and and the web core vitals.

Devtool Chorme Rendering Layout Shift

Cumulative layout shift

The Cumulative layout shift or CLS is a web core vital metrics that groups all layout shift during page load.

  • The devtool can also add an overlay. See the web core vital for more information.

Devtool Chrome Web Core Vital Overlay

  • A library can report back the cumulative layout shift (or CLS) measurement. See the example below

Calculation Example with Perfume

Example with perfume

  • The element that we are going to shift
<button>Click to see the cumulative value</button>
  • Simulate a layout shift
        let button = document.querySelector("button"); = "block"; "auto"; "auto"; "fit-content";
  • The engine
new Perfume({
  analyticsTracker: options => {
    const { metricName, data, eventProperties, navigatorInformation, vitalsScore, } = options;
    switch (metricName) {
      case 'cls':
        console.log('cumulativeLayoutShift value: '+data);
      case 'clsFinal':
        console.log('cumulativeLayoutShiftFinal: '+data);
  • Output:

Discover More
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
Devtool Chrome Web Core Vital Overlay
Web Core Vital Metrics

The web core vitals are the three core page load metrics that a web page should focus on. Largest ContentFul Paint First Input Delay Cumulative Layout Shift: All layout shift cumulated You...
Devtool Chrome Performance Frames
requestAnimationFrame Web Api

requestAnimationFrame is a window function that permits to run code when a frame is going to be painted. Avoiding layout shift. For instance, when you create a fixed top bar, you need to set two...

Share this page:
Follow us:
Task Runner