Optimizing website performance in 2025

Website loading speed is no longer just a convenience for users: it’s a Google ranking factor and a direct conversion lever. Studies show that an extra second of delay on mobile can reduce conversions by 20%. In 2025, Google’s Core Web Vitals have become the essential standard for measuring and improving user experience. Here’s a practical guide to optimizing your website’s performance.

Understanding Core Web Vitals in 2025

Google measures three key metrics that reflect the user’s perception of speed:

Metric	What it measures	”Good” threshold
LCP (Largest Contentful Paint)	Loading time of the largest visible element	< 2.5 seconds
INP (Interaction to Next Paint)	Response time to user interactions	< 200 ms
CLS (Cumulative Layout Shift)	Visual stability of the page	< 0.1

Since March 2024, INP has replaced FID (First Input Delay) as the interactivity metric. Unlike FID which only measured the first interaction, INP evaluates the overall page responsiveness throughout the user session.

Optimizing LCP: loading time

LCP is often the hardest metric to pass. According to HTTP Archive data from 2024, 73% of mobile pages have an image as their LCP element.

Image optimization

Images often represent the heaviest part of a page:

<!-- Use modern formats -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Description" width="1200" height="600"
       loading="eager" fetchpriority="high">
</picture>

<!-- Responsive images with srcset -->
<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description" width="800" height="600">

AVIF and WebP formats offer 25-50% better compression than JPEG without perceptible quality loss.

Preload critical resources

Tell the browser to prioritize loading resources essential to initial rendering:

<!-- Preload the LCP image -->
<link rel="preload" as="image" href="/images/hero.webp"
      fetchpriority="high">

<!-- Preload critical fonts -->
<link rel="preload" as="font" href="/fonts/inter-var.woff2"
      type="font/woff2" crossorigin>

<!-- Inline critical CSS -->
<style>
  /* Minimal CSS for initial render */
  .hero { /* essential styles */ }
</style>

Reduce TTFB (Time to First Byte)

TTFB directly impacts LCP. Key optimizations:

• Use a CDN to serve content from a geographically close server
• Implement server-side caching (Varnish, Redis, or native CMS cache)
• Optimize database queries (indexes, N+1 queries)
• Use performant hosting with HTTP/2 or HTTP/3

Improving INP: responsiveness

INP measures your site’s ability to respond quickly to interactions (clicks, input, scrolling). Long JavaScript tasks (> 50ms) block the main thread and degrade this metric.

Break up long tasks

// Bad: monolithic blocking task
function processData(items) {
  items.forEach(item => heavyComputation(item));
}

// Good: splitting with scheduler.yield()
async function processData(items) {
  for (const item of items) {
    heavyComputation(item);
    // Yield control to the browser
    if (navigator.scheduling?.isInputPending()) {
      await scheduler.yield();
    }
  }
}

Debounce and throttle handlers

// Debounce for search inputs
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

input.addEventListener('input', debounce(handleSearch, 300));

Defer non-critical JavaScript

<!-- Non-essential scripts deferred -->
<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>

<!-- Dynamic loading -->
<script type="module">
  if (userNeedsFeature) {
    import('./feature.js');
  }
</script>

Reducing CLS: visual stability

CLS measures unexpected layout shifts that disrupt the user experience.

Always set media dimensions

<!-- Always specify width and height -->
<img src="photo.jpg" alt="Description"
     width="800" height="600">

<!-- Or via CSS with aspect-ratio -->
<style>
  .image-container {
    aspect-ratio: 4 / 3;
    width: 100%;
  }
</style>

Reserve space for dynamic content

/* Space reserved for ads */
.ad-slot {
  min-height: 250px;
  width: 300px;
}

/* Space reserved for AJAX-loaded content */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite;
  min-height: 100px;
}

Implementing lazy loading

Lazy loading defers loading of non-visible resources:

<!-- Native lazy loading for images and iframes -->
<img src="photo.jpg" loading="lazy" alt="Description">
<iframe src="video.html" loading="lazy"></iframe>

<!-- IMPORTANT: never lazy load the LCP image -->
<img src="hero.jpg" loading="eager" fetchpriority="high"
     alt="Hero">

JavaScript for finer control:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Caching strategies

Cache is your best ally for repeat visits:

HTTP cache

# Nginx configuration for static caching
location ~* \.(css|js|jpg|jpeg|png|webp|avif|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# HTML with validation
location ~* \.html$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}

Service Worker for offline caching

// sw.js - Cache static resources
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/app.js',
        '/fonts/inter-var.woff2'
      ]);
    })
  );
});

Using a CDN

A CDN (Content Delivery Network) distributes your resources on servers geographically close to your users. Top providers in 2025:

• Cloudflare: excellent value, included DDoS protection
• Fastly: very performant, popular with developers
• AWS CloudFront: native integration with the AWS ecosystem
• Bunny CDN: simple and affordable

A CDN reduces TTFB and improves LCP for users far from your origin server.

Measure and monitor

Optimization is a continuous process. Use these tools:

• Google PageSpeed Insights: comprehensive analysis with field data
• Chrome DevTools (Performance tab): detailed local diagnostics
• Lighthouse: automated performance audits
• web-vitals.js: real user metrics collection

import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics(metric) {
  navigator.sendBeacon('/analytics', JSON.stringify(metric));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Conclusion

Web performance optimization in 2025 relies on a deep understanding of Core Web Vitals and the application of targeted techniques. The biggest gains usually come from the simplest adjustments: optimizing images, preloading critical resources, and setting element dimensions. Start with high-impact actions before diving into complex optimizations.