Improving Website Performance with CSS Containment

Manuel Rego Casasnovas (@regocas)

CSSconf EU / 31 May 2019 (Berlin)
Creative Commons Attribution-ShareAlike

  • layout
  • paint
  • size
  • style

Rendering Pipeline

Style phase Layout phase Paint phase Composite phase

Example: ink overflow

contain: none
contain: layout
Hello! This is just an example.
Hello! This is just an example.

Example: Baseline

contain: none
contain: layout
Foo
Bar
Foo
Bar

Example: Clipping and abspos

contain: none
contain: paint
position: absolute;
position: absolute;

Example: Size containment

contain: none
contain: size
Hello World!
Hello World!

Example: Counters

.counter {
  counter-increment: n;
}

pre::after {
  content: counters(n, ".");
}


  
Before: 

  

    

    
Inside: 

  

  
After:
Before: 1
Inside: 1.1
After: 1

Example Quotes

body {
  quotes: "«" "»" "‹" "›";
}
.open-quote:before {
  content: open-quote;
}
.close-quote:after {
  content: close-quote;
}

  foo
  
    
      bar
« foo ‹ bar »
The image on this slide is just an screenshot of caniuse.com for css-contaiment feature.
Chromium
Firefox
The video on this slide is showing the linked example running on Chromium on the left vs Firefox on the right. Results on Firefox are way better right now, probably Chromium needs to improve its implementation.
The video on this slide is showing the use case of a huge table/grid like layout with a number in each cell that is getting updated every now and then.
The video on this slide is showing the use case of a table/grid like layout with a progress bar in each cell, every second one of the progress bar gets its size changed.