Guides
What actually happens between keypress and pixel
Five stages, one honest read on your rendering pipeline. Here is what each stage costs, what usually stalls it, and the single change that moves your numbers.
Tag
rendering
Parse, style, layout, paint, composite. Everything about the work a browser repeats between your change and the next frame.
11 posts1 authorLast post 2 days ago
Guides
Preloading fonts without making everything else wait
A preload tag moves a font to the front of the queue. It also moves everything behind it further back, which is the part nobody mentions.
CSS
The four CSS properties that trigger layout
Animate the wrong property and every frame re-measures the page. Animate the right one and the compositor handles it alone.
Deep dives
Reading a flame graph like a profiler would
Width is time and depth is the call stack. Once those two facts land, most of a trace reads itself.
CSS
content-visibility, measured on a real page
One property that tells the browser to skip work for anything off screen. The numbers are good, and the caveats are real.
Performance
Why your LCP element is not what you think
Teams optimise the hero image for a fortnight and discover the LCP element was a paragraph of text the whole time.
Ask a dev
Is server-side rendering worth it for us?
If your content is public and your first paint matters, probably. If you are behind a login, probably not.
Deep dives
The event loop, one frame at a time
Sixteen milliseconds, and everything that has to fit inside them before the screen updates.