Google reports that 53% of mobile users abandon sites that take longer than 3 seconds to load. Performance is not a nice-to-have — it directly impacts conversion rates, search rankings, and user satisfaction. Here are the modern techniques for building fast web applications.
Core Web Vitals: The Performance Standard
Google's Core Web Vitals define three key metrics:
- Largest Contentful Paint (LCP) — Measures loading performance. Should occur within 2.5 seconds
- Interaction to Next Paint (INP) — Measures interactivity. Should be under 200 milliseconds
- Cumulative Layout Shift (CLS) — Measures visual stability. Should be under 0.1
These metrics directly influence search rankings and represent the user experience aspects that matter most.
JavaScript Optimization
Bundle Size
Every kilobyte of JavaScript costs performance — it must be downloaded, parsed, and executed. Strategies to minimize bundle size:
- Tree shaking — Remove unused code during bundling
- Code splitting — Load only the JavaScript needed for the current page
- Dynamic imports — Defer loading of non-critical modules
- Bundle analysis — Use tools like webpack-bundle-analyzer to identify bloat
Rendering Performance
- Virtual scrolling — Render only visible items in long lists
- Debounce and throttle — Limit the frequency of expensive operations
- Web Workers — Move CPU-intensive tasks off the main thread
- RequestAnimationFrame — Schedule visual updates efficiently
Image Optimization
Images often account for the majority of page weight:
- Modern formats — WebP and AVIF offer 25-50% smaller files than JPEG/PNG
- Responsive images — Serve appropriately sized images for each viewport
- Lazy loading — Defer offscreen images using the
loading="lazy"attribute - Image CDNs — Services like Cloudinary and imgix optimize images on the fly
Modern Framework Features
Modern frameworks provide built-in performance optimizations:
- Server-side rendering (SSR) — Faster initial page loads and better SEO
- Static site generation (SSG) — Pre-render pages for instant delivery from CDN
- Streaming — Send HTML as it is generated, reducing time to first byte
- Partial hydration — Hydrate only interactive components, reducing JavaScript execution
Monitoring and Measurement
Performance optimization is an ongoing process:
- Establish baselines with Lighthouse and WebPageTest
- Set performance budgets that trigger alerts when exceeded
- Monitor real user metrics with tools like Google Analytics or custom instrumentation
- Test on real devices — Emulators do not capture real-world performance characteristics
- Automate performance testing in CI/CD pipelines
Performance is a feature. The teams that treat it as a first-class concern from the start — rather than an afterthought to address later — consistently deliver better user experiences.
