Frontend Performance Optimization: 20 Techniques for Faster Web Apps

Frontend performance optimization is one of the highest-ROI engineering investments for any web application that depends on organic search traffic or serves users on mobile devices. Google's Core Web Vitals (Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift) are direct search ranking signals — a slow site ranks lower than a fast one for equivalent content quality. And every additional second of load time reduces conversions: Google's research found a 4.42% decrease in conversions per additional second of load time.

This guide covers the frontend performance optimization techniques that deliver the most measurable improvement — prioritized by impact.

Understanding What to Measure

Before optimizing, measure. The three Core Web Vitals that Google uses for ranking:

Largest Contentful Paint (LCP): The time until the largest visible element (hero image, heading, above-fold block) is fully rendered. Good: under 2.5 seconds. Poor: over 4 seconds. LCP measures how quickly users can see the page's primary content.

Interaction to Next Paint (INP): The latency of the worst user interaction during the page visit — the time between a user input (click, tap, keyboard event) and the next frame being painted in response. Good: under 200ms. Poor: over 500ms. INP measures how responsive the page feels to user actions.

Cumulative Layout Shift (CLS): The amount of unexpected visual movement of page elements during load — the sum of individual layout shift scores. Good: under 0.1. Poor: over 0.25. CLS measures visual stability; high CLS occurs when images load without dimensions, ads are injected into the page after content loads, or fonts shift text after loading.

Use PageSpeed Insights (real user data from Chrome) and Lighthouse (lab data) to measure current performance before and after optimizations. Real user data (CrUX data in PageSpeed Insights) is what Google actually uses for ranking; lab data is useful for development-time optimization tracking.

LCP Optimization: The Highest Priority

Optimize your LCP element first. Identify what the LCP element is (use Chrome DevTools Performance panel or Lighthouse "Largest Contentful Paint" detail) and optimize its delivery specifically.

For LCP images: ensure the image is preloaded with a link rel="preload" in the head (for images that are not immediately visible in the HTML but are the LCP element), use srcset and sizes to serve appropriately sized images for each viewport, convert to WebP or AVIF format (25-50% smaller than JPEG at equivalent quality), and set explicit width and height attributes to prevent layout shift. Never use background-image CSS for your LCP element — the browser cannot discover and preload background images until it parses the CSS.

For LCP text elements: ensure critical fonts are preloaded and that font-display: swap is set, preventing invisible text while the font loads. Self-host critical fonts rather than loading from Google Fonts to eliminate the DNS lookup and connection overhead.

Server response time: a slow TTFB (Time to First Byte) directly extends LCP. Target TTFB under 600ms for the LCP document. Optimize server-side rendering performance, implement page caching, and use a CDN to serve cached responses from edge locations geographically close to users.

INP Optimization: Eliminating Input Delay

High INP occurs when JavaScript blocks the main thread, preventing the browser from processing user interactions promptly. The three categories of INP problems:

Long tasks: JavaScript that runs for more than 50ms on the main thread without yielding. Break long tasks using setTimeout, scheduler.postTask, or requestIdleCallback to yield control back to the browser between work units.

Main thread saturation during page load: heavy JavaScript parsing, execution, and hydration during the load phase that blocks the browser's ability to process user inputs. Defer non-critical JavaScript, code-split aggressively, and use async/defer for third-party scripts.

Unoptimized event handlers: click and touch event handlers that do expensive work synchronously. Debounce input event handlers that trigger expensive calculations. Use CSS transitions instead of JavaScript animations where possible (CSS animations run on the compositor thread, not the main thread).

The Web Vitals library can be used to measure INP in production and identify which specific interactions are causing high INP scores. INP is measured as a percentile of all interactions during the page visit — the 75th percentile of all measured INP values in your user population is your INP score.

CLS Prevention: Visual Stability

Cumulative Layout Shift is caused by content loading and pushing other content around. The prevention strategies:

Set explicit dimensions on all images and video: width and height attributes in HTML (or aspect-ratio CSS) tell the browser how much space to reserve before the media loads, preventing layout shift when the media renders. This is the highest-impact CLS fix for most sites.

Reserve space for ads, embeds, and third-party widgets: if you know an ad will be 300x250 pixels, reserve that space with a placeholder of those dimensions. Never inject content above existing content without explicit user interaction.

Ensure web fonts don't cause layout shift: the FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text) that occurs when web fonts load can cause layout shifts if the fallback font has different dimensions than the web font. Use size-adjust, ascent-override, descent-override, and line-gap-override CSS properties on your font-face declarations to match fallback font metrics to web font metrics.

JavaScript Bundle Optimization

Audit your JavaScript bundle size with webpack-bundle-analyzer (for webpack-based builds) or Vite's built-in rollup visualization (for Vite builds). Identify the largest dependencies and evaluate whether they are necessary in their current form.

Tree shaking eliminates unused code: ensure you are importing only the specific functions you use from libraries (import { debounce } from 'lodash-es' rather than import _ from 'lodash') and that your bundler's tree shaking is configured to eliminate unused code.

Code splitting with dynamic imports: route-level code splitting (each page/route loads its JavaScript separately) dramatically reduces the initial JavaScript payload. React.lazy and Suspense, Vue's defineAsyncComponent, and Angular's lazy-loaded modules all provide route-level code splitting.

Third-party script management: analytics, chat widgets, A/B testing tools, and marketing pixels collectively often account for 50-70% of a page's JavaScript payload and main thread time. Audit which third-party scripts are actually necessary, load them with defer or async, and use Partytown (Cloudflare) to move third-party scripts to a Web Worker where they cannot block the main thread.

Image Optimization

Images are typically the largest contributor to page weight. The optimization priorities: convert all images to WebP or AVIF format (WebP is 25-35% smaller than JPEG; AVIF is 35-50% smaller), use responsive images with srcset and sizes attributes (serve a 400px-wide image on a 400px-wide container, not a 1600px-wide image), implement lazy loading (loading="lazy" attribute on all images not in the initial viewport), and serve images from a CDN with edge caching.

Image CDNs (Cloudinary, Imgix, Cloudflare Images) provide on-the-fly image optimization — transforming images to the correct format, dimensions, and quality for each request based on the Accept header and URL parameters. This eliminates the need to manually create multiple image variants and ensures every user receives the optimally sized image for their device.

At Ortem Technologies, Core Web Vitals optimization is standard in our web project deliveries — we target LCP under 2.5s, INP under 200ms, and CLS under 0.1 for all web applications we build. Talk to our web development team | Get a Core Web Vitals audit for your application