Fantastic Frontend Performance Tricks & Why We Do Them
summary
Explains concrete wins and exact tools: gzipping typically cuts HTML/CSS/JS by ~70% gzip savings; tinyPNG can cut images (example 47% savings) and use WebP or SVG where appropriate; HTTP/1.1 limits to ~6 parallel connections so concatenate or split bundles with webpack/rollup and use code-splitting to avoid blocking; use lodash debounce for autocomplete (search latency drops drastically), requestAnimationFrame for visual updates, web workers for heavy computation, prefer transform/opacity for animations to meet the 16 ms frame budget and avoid layout thrash.
AI-written summary · about
chapters (16)
- 0:00Start
- 5:42Compressing Your Html Css and Javascript Gzip
- 7:34Image Type
- 9:57Tree-Shaking
- 10:40Putting Files on a Cdn
- 11:03Keeping Things Smart
- 11:23Concatenate Your Css Together and Concatenate Your Javascript Together
- 11:58Css Sprites
- 12:35Domain Sharding
- 14:08Code Splitting
- 18:46Recap
- 19:58Performance Tips
- 23:41Reduce Css Selector Complexity
- 25:49Navigation Timing Api
- 26:22Flame Graphs
- 27:21Resources
related talks
31mThe Future of Front-End Performance
21mEvolution of Web Performance
37mSecret Shortcuts of Loading Web Performance
23mOptimizing page load speed on front end side
39mFrom make it work to make it fast: quick wins to boost your application
01h 04mFrom Zero to Hero - Web Performance
46mFrontend Minimalism in Action: Do More With Less JavaScript
29mSpeed Essentials: Key Techniques for Fast Websites