An introduction to Web Performance and the Critical Rendering Path

Sibylle Sehl
May 16, 2018 · 8 min read
Image for post
Image for post
Photo by Chris Liverani on Unsplash

The Critical Rendering Path

Image for post
Image for post
The different stages of the Critical Rendering Path (DOM and CSSOM refer to Document Object Model and CSS Object Model respectively)

Building up the DOM and the CSSOM

Image for post
Image for post
Taken from W3 Schools (https://www.w3schools.com/js/js_htmldom.asp) — The DOM Tree of Objects

Collating all the visible content — The Render Tree

Image for post
Image for post
Copyright for the Image belongs to Google and Ilya Grigorik — taken from https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

Making it fit right — Layout

Paint the Pixels

Image for post
Image for post
Executing all the steps of the CRP in order. (Photo by ALP STUDIO on Unsplash)

Let’s summarise

Okay, that’s good to know — but why does it matter?

Image for post
Image for post
Photo by Peter Finger on Unsplash

Optimising performance

Minifying, Compressing, and Caching

Minimise the use of render-blocking resources (CSS)

Minimise the use of parser-blocking resources (JS document parser)

So broadly speaking, that leaves us with 3 optimisation patterns:

Try it yourself

Image for post
Image for post
Example of a Performance Audit in Google Lighthouse on my personal website — Render Blocking CSS for two different icon sets mean that my site is taking a performance hit (I’m definitely thinking how to reduce that going forward)

Conclusion

Resources

freeCodeCamp.org

This is no longer updated.

Thanks to Marcus Lancaster

Sibylle Sehl

Written by

Front-End Dev @brandung Berlin // MSc Computer Science Grad - University of Edinburgh //@freeCodeCamp 2018 Top Contributor // Passionate Problem-Solver

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Sibylle Sehl

Written by

Front-End Dev @brandung Berlin // MSc Computer Science Grad - University of Edinburgh //@freeCodeCamp 2018 Top Contributor // Passionate Problem-Solver

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store