Frontend Web Performance: The Essentials [0]

️Less Is More — The Browser Rendering Cycle, Hardware Acceleration & Compositor Laye‍rs 🧘‍♀️

Less is more

Contents

The Rendering Cycle 🔁

The rendering cycle

JS/CSS Animation:

Style:

Layout:

Paint:

Composite:

Layout Bad, Composite Good 📢

Render cycle for a changed ‘paint property’ — Layout is skipped
Render cycle for a changed ‘composite property’ — Layout & Paint can be skipped

Transform:

Opacity:

Filter*:

Compositor layers

The Secret Sauce ✨

Too Much of a Good Thing 🤔

Test, Test, Test 🔎

The Performance Profiler

Performance Profiler

The Rendering Drawer

Rendering Drawer

The Layers Panel

Layers Panel

Putting It All Together 👩‍💻

Animated gradient loading placeholder

1: The Layout Implementation

@keyframes gradientAnimation{
0%{
left: -30%;
}
100%{
left: 130%;
}
}
A full rendering cycle visible in the profiler
‘Layout Shift Regions’ flashing
Rendering cycle work distribution pie chart

2: The Paint Implementation

@keyframes gradientAnimation{
0%{
background-position: -45% 0;
}
100%{
background-position: 145% 0;
}
}
A rendering cycle, skipping Layout, visible in the profiler
‘Paint flashing’ flashing
Rendering cycle work distribution pie chart

3: The Composite Implementation

@keyframes gradientAnimation{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(333%);
}
}
Rendering cycle work distribution pie chart
Gradient element layer border (orange)

More Resources 📚

Exploring design & performance. Software Engineer at PreciPoint. Australian in Germany.