Need for speed 8, performance tuning of your web application
summary
Front-end performance audit workflow with concrete targets: measure First Meaningful Paint, Time to Interactive and hero render, aim for TTI <5s on 3G and a speed-index gap ≈1.25s; keep total gzipped bundle near 170KB (note 2018 average page size ≈3MB). Use Chrome DevTools, Lighthouse and WebPageTest for field and lab data, New Relic or SpeedCurve for active monitoring, and the webpack bundle analyzer to find dead code. Practical fixes: inline critical CSS, server push / preload / prefetch, defer/async JS, code-splitting, progressive images + srcset and image compression — demos lift scores (example: Lighthouse ~65 → ~91).
AI-written summary · about
chapters (10)
- 0:00Start
- 4:17load on a mobile device
- 15:10set some goals
- 34:05put all of your javascript files at the bottom of the page
- 35:32analyze your bundles
- 38:38load an image
- 38:50use next-gen formats vp jpeg 2000
- 48:09change the dimensions of the images that you're loading
- 51:47enable text compression
- 57:05minimizing main thread work
related talks
58mNeed for speed 8, performance tuning of your web application
42mBuilding quick apps in 2018
39mFrom make it work to make it fast: quick wins to boost your application
31mThe Need for Speed (aka Angular Performance).
21mState of Performance
29mHigh Performance in the Critical Rendering Path
01h 03mSpeed up your Web Application
39mGiving you ways to increase, but also explain site performance, to your boss.