High Performance in the Critical Rendering Path

on YouTube ↗29m

" summary

Claims specific fixes and tools: measure with WebPageTest and PageSpeed Insights, expect to find blocking CSS/JS and a six‑second spinner on bad pages; reduce requests and latency by enabling keep‑alive, gzip, and HTTP/2 with server push; inline critical CSS (use penthouse), defer fonts and JS, aggressively cache and hash assets, and lazy‑load images. Examples include nginx + CloudFlare configs, a client rendering engine that initially failed, and a small CLI/automation workflow that proves the changes cut visual load time.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 0:21in the Critical Path
3. 1:19What is going on?
4. 7:55WebPage Test Inspect every request Analyze TCP traffic Identify bottlenecks Visualize progress
5. 8:25Measure early Measure often
6. 10:34Budgets! Enforce a performance budget Track impact of every commit What should I track?
7. 12:24minification Or, what can be done to improve performance?
8. 14:40Make less requests! Turn on keep-alive GZip all the text Add Expires and ETag headers Use a CDN
9. 16:14Why? Non-blocking Multiplexing One Connection per Origin Header Compression Proactive Server Push
10. 18:01Optimizing CSS Inline critical CSS Remove unused styles Avoid m. Be responsive Concatenate and minify Follow a style guide. Seriously.
11. 18:55Optimizing Fonts Load asynchronously Use a fallback while fonts load Prevent FOIT using JavaScript Use fewer fonts, avoid repaints Cache them aggressively
12. 20:15Optimizing Images Minify and shrink Defer images below the fold Create spritesheets with tools Try inlining tiny dynamic images Use CSS for simple icons
13. 22:16Optimizing JavaScript You can live without it Defer all of it Use small modules Use asset hashing Cache vendor scripts separately
14. 23:24Reverse proxy Static asset caching Supports SPDY GZip compression

" related talks

• 30mHigh Performance in the Critical Rendering PathNicolás Bevacqua · JSConf Colombia 2015
• 27mHigh Performance in the Critical Rendering PathNicolás Bevacqua · JSConf Budapest 2016
• 28mCSS and the Critical PathPatrick Hamann · CSSConf US 2014
• 42mDelivering ResponsiblyScott Jehl · beyond tellerrand Düsseldorf 2015
• 01h 04mFrom Zero to Hero - Web PerformanceSebastian Springer · iJS 2018 Spring
• 38mCSS and the first meaningful paintPatrick Hamann · CSS Conf EU 2017
• 58mNeed for speed 8, performance tuning of your web applicationYaser Adel Mehraban · NDC Sydney 2018
• 01h 04mNeed for speed 8, performance tuning of your web applicationYaser Adel Mehraban · NDC Porto 2019