From make it work to make it fast: quick wins to boost your application
summary
Shows a practical front-end workflow to measure performance with Lighthouse and web-vitals, then apply build and runtime optimizations to speed up a web app. Concrete techniques include converting images to WebP, inlining critical CSS/JS, preloading key chunks, gzip/brotli compression, minification, tree‑shaking, code‑splitting, replacing heavy libraries (e.g. moment), and using React lazy/Suspense; tooling used includes webpack plugins, bundle-analyzer, html-webpack-plugin and compression, with results verified by real user metrics (e.g. LCP ~10s → 2.5s, bundle 2MB → 600KB, images ~60% smaller).
AI-written summary · about
chapters (9)
- 0:00Introduction
- 2:11Web performance metrics
- 6:30Metrics collection
- 9:59Image optimization
- 14:13JavaScript reduction
- 19:53Resource compression
- 23:28CPU optimization
- 32:44Results and conclusion
- 37:01Performance and UX
related talks
37mSecret Shortcuts of Loading Web Performance
42mBuilding quick apps in 2018
28mFantastic Frontend Performance Tricks & Why We Do Them
01h 03mSpeed up your Web Application
01h 04mNeed for speed 8, performance tuning of your web application
31mThe Future of Front-End Performance
32mPractical Performance Tips Building Progressive Web Apps
34mOptimizing Performance in Large-Scale React & Node.js Applications