Speed up your Web Application
summary
Shows that micro‑tweaks (caching array length) save fractions of a millisecond while the JS engine delivers larger JIT gains, and that the real targets are network and rendering: Time to Interactive 3.9s and First meaningful paint 1.1s. Recommends Chrome DevTools timeline, Lighthouse, heap snapshots and service workers; reduce resources (minify, sprites), avoid CSS imports and blocking scripts, reuse objects to avoid GC churn, and aim for smooth animation (60fps = 16.6ms) while respecting browser limits like 6 parallel connections.
AI-written summary · about
chapters (22)
- 0:00Intro
- 0:53How to speed up
- 4:24Critical Rendering Path
- 7:01Processing HTML
- 8:27Processing CSS
- 8:47Building the Render Tree
- 9:45Measuring
- 19:02Service Worker
- 21:05Render Blocking CSS
- 22:12Render Blocking JavaScript
- 23:28App Shell Architecture
- 27:06JavaScript Engines
- 33:28JIT Compiler
- 36:28Garbage Collection
- 41:26Repaints & Reflows
- 43:11Omitting reflows
- 45:34Profiling
- 46:40Memory Leaks
- 51:18JavaScript Animations
- 52:47Disadvantages
- 54:24CSS animations
- 55:24Prefetching
related talks
23mPerformance Optimizations for Progressive Web Apps
39mFrom make it work to make it fast: quick wins to boost your application
48mThink Fast, First: Empowering a Performance Culture
36mHacking Web Performance
01h 04mNeed for speed 8, performance tuning of your web application
38mCSS and the first meaningful paint
37mSecret Shortcuts of Loading Web Performance
42mBuilding quick apps in 2018