Web Performance Optimization: Core Web Vitals and Speed Improvement

What are Core Web Vitals?

Core Web Vitals are three key metrics defined by Google to measure user experience: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint).

LCP measures the loading time of the largest content element on the page (usually a hero image or heading). It should be under 2.5 seconds. Slow LCP causes users to leave the page.

CLS measures unexpected layout shifts during page loading. Shifts caused by late-loading images or ads frustrate users. It should be under 0.1.

INP measures response time to user interactions (clicks, key presses). It should be under 200 milliseconds. Slow INP makes the site unusable.

Good Core Web Vitals help, but do not guarantee high search rankings.

LCP Optimization

Load the largest content element quickly. The hero image or main heading is usually the LCP element. Prioritize loading this element.

Do not lazy-load the LCP image. Lazy loading suits images outside the initial viewport.

Reduce server response time (TTFB). Use CDN (Content Delivery Network), optimize database queries, implement page caching.

async and defer apply to JavaScript; non-critical CSS needs a separate loading strategy.

Preload critical resources with the preload directive: <link rel="preload" as="image" href="hero.webp">. This helps the browser discover resources earlier.

CLS Optimization

Add width and height attributes to image and video elements. This allows the browser to reserve space and prevent layout shift.

Reserve fixed-size containers for ads and embeds. Late-loading ads shift page layout and increase CLS.

Optimize web fonts: Use font-display: swap, preload critical fonts. Minimize FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text) issues.

Unreserved elements inserted above existing content can cause layout shifts.

Use transform and opacity in CSS animations. These properties do not trigger layout and do not contribute to CLS.

INP Optimization

Reduce JavaScript execution time. Break long tasks into smaller chunks. Tasks longer than 50ms negatively affect INP.

Optimize event handlers. Write handlers that respond quickly to clicks and key presses. Move heavy computations to Web Workers.

Heavy third-party scripts can increase INP. Remove unnecessary scripts and measure again.

Defer heavy operations with requestIdleCallback and setTimeout. Move non-critical work to the background during user interactions.

In frameworks like React/Vue, prevent unnecessary re-renders. Skip unnecessary computations with useMemo, useCallback, and memo.

General Speed Optimization

Use HTTP/2 or HTTP/3. They enable parallel processing of multiple requests and header compression. Modern hosting providers support them by default.

Enable Gzip or Brotli compression. Text-based resources (HTML, CSS, JS) shrink by 60-80%. Enable in server configuration.

Cache static assets. Set browser and CDN caching durations with Cache-Control headers. Use long TTL for immutable assets.

Inline critical CSS, load the rest async. Embed CSS needed for above-the-fold content at the top of the page.

Split JavaScript with code splitting. Load only the code needed for each page. Apply lazy loading with dynamic import().

Lazy load images. Load images below the fold only when they become visible. The loading="lazy" attribute is sufficient.

Prefetch and preconnect resources. Establish DNS and TCP connections in advance with <link rel="preconnect" href="https://fonts.googleapis.com">.

Measurement Tools

Google PageSpeed Insights: Lighthouse-based performance report. Provides separate scores for mobile and desktop. Offers improvement suggestions.

Chrome DevTools Performance tab: Analyzes the page loading process step by step. Shows long tasks, layout shifts, and paint timing.

The Web Vitals extension is no longer supported. Use Chrome DevTools Performance instead.

CrUX (Chrome User Experience Report): Collects real user data. Appears as Core Web Vitals report in Search Console.

Search Console Core Web Vitals report: Classifies your URLs as 'Good', 'Needs improvement', and 'Poor'. Shows which pages need optimization.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience