Performance Optimization: Speed Up Your Site for Better Rankings in 2025

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest content element (image, video, or text block) to become visible in the viewport. Target: under 2.5 seconds.

• Good: <2.5 seconds | Needs Improvement: 2.5-4 seconds | Poor: >4 seconds
• Usually the hero image or main content block
• Most common causes: slow server response, render-blocking resources, large images
• Test with: PageSpeed Insights, Chrome DevTools, Web Vitals extension
• Improvement strategies: optimize images, improve server response time, use CDN, preload critical resources

First Input Delay (FID) / Interaction to Next Paint (INP)

FID measures the time from when a user first interacts with your page to when the browser can respond. INP is replacing FID in 2024. Target: <100ms (FID) or <200ms (INP).

• Good: <100ms (FID) or <200ms (INP) | Poor: >300ms (FID) or >500ms (INP)
• Measures responsiveness and interactivity
• Caused by long-running JavaScript tasks blocking main thread
• Common culprits: heavy JavaScript frameworks, third-party scripts, unoptimized code
• Improvement strategies: break up long tasks, defer non-critical JS, use web workers, optimize JavaScript execution

Cumulative Layout Shift (CLS)

CLS measures visual stability - how much elements shift around unexpectedly as the page loads. Target: <0.1.

• Good: <0.1 | Needs Improvement: 0.1-0.25 | Poor: >0.25
• Annoying when clicking a button and page shifts, causing misclick
• Common causes: images without dimensions, ads, embeds, dynamically injected content, web fonts
• Improvement strategies: set image/video dimensions, reserve space for ads, avoid inserting content above existing content, preload fonts

/* Reserve space for images to prevent layout shift */
img, video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Prevent font swap layout shift */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Choose the Right Image Format

• WebP: 25-35% smaller than JPEG with same quality (use for photos)
• AVIF: 20% smaller than WebP but less browser support (progressive enhancement)
• SVG: For logos, icons, simple graphics (infinitely scalable)
• JPEG: Fallback for browsers not supporting WebP
• PNG: Only for images requiring transparency
• Implementation: Use <picture> element with multiple formats

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

Compress Images

• Reduce file size without noticeable quality loss
• Tools: TinyPNG, ImageOptim, Squoosh, Sharp
• Automate: Use build tools (Next.js Image, Gatsby Image)
• Aim for <200KB per image, <100KB ideal
• JPEG quality: 80-85% is usually optimal
• Remove EXIF data and metadata
• Use progressive JPEG for images >10KB

Responsive Images

Serve different image sizes based on screen size to avoid loading huge images on mobile.

• Use srcset attribute to provide multiple sizes
• Browser chooses appropriate size based on viewport
• Typically create: mobile (480w), tablet (768w), desktop (1200w), large (1920w)
• Combine with sizes attribute for layout-based selection
• Use modern frameworks (Next.js, Nuxt) for automatic optimization

<img
  src="image-800.jpg"
  srcset="image-480.jpg 480w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Responsive image"
  width="1200"
  height="675"
  loading="lazy"
/>

Lazy Loading

Defer loading offscreen images until user scrolls near them.

• Use native lazy loading: loading="lazy" attribute
• Don't lazy load above-the-fold images (hurts LCP)
• Lazy load images 200-300px below viewport
• Can save 50-70% of initial data transfer
• Works for images, iframes, and videos
• Fallback: Use Intersection Observer API for older browsers

Code Splitting

Split JavaScript into smaller chunks that load only when needed.

• Load only code needed for current page
• Dynamic imports for route-based splitting
• Component-level code splitting
• Can reduce initial bundle size by 50-70%
• Use webpack, Rollup, or Vite for automatic splitting
• Frameworks: Next.js, React lazy loading, Vue async components

// Dynamic import - loads only when needed
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Route-based splitting
const AdminPanel = lazy(() => import('./AdminPanel'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      {isAdmin && <AdminPanel />}
    </Suspense>
  );
}

Minification and Compression

• Minify: Remove whitespace, comments, rename variables
• Uglify: Further compress by shortening code
• Gzip compression: 70-80% size reduction (enable on server)
• Brotli compression: 15-20% better than Gzip
• Tools: Terser, UglifyJS, build tool plugins
• Typical results: 200KB → 60KB (minified) → 15KB (Brotli)

Defer and Async Loading

Control when and how JavaScript loads to prevent blocking page render.

• <script defer>: Download in parallel, execute after HTML parsed (use for most scripts)
• <script async>: Download and execute ASAP, order not guaranteed (use for analytics)
• No attribute: Blocks HTML parsing (only for critical inline scripts)
• Move non-critical scripts to end of <body>
• Inline critical CSS/JS in <head>
• Defer loading: analytics, social widgets, chat, ads

<!-- Defer: maintains execution order -->
<script defer src="app.js"></script>

<!-- Async: executes ASAP -->
<script async src="analytics.js"></script>

<!-- Critical inline script -->
<script>
  // Critical functionality here
</script>

Remove Unused JavaScript

• Chrome DevTools Coverage tool shows unused code
• Tree shaking: Remove unused exports (webpack, Rollup)
• Remove unused dependencies from package.json
• Audit third-party scripts - each adds 50-200KB typically
• Common culprits: jQuery (when not needed), moment.js (use date-fns), lodash (import specific functions)
• Bundle analyzer: visualize what's in your JavaScript bundle

Critical CSS (Above-the-Fold)

Inline only the CSS needed for above-the-fold content, defer the rest.

• Extract CSS for visible content only
• Inline critical CSS in <head>
• Load full CSS asynchronously
• Can improve First Contentful Paint by 30-50%
• Tools: Critical, Penthouse, Critters
• Automate with build tools

Minify and Remove Unused CSS

• Minify CSS: remove whitespace, comments
• PurgeCSS: remove unused CSS (especially important with frameworks)
• Typical CSS framework: 500KB → 20KB after purging
• Be careful with dynamic classes
• Use CSS-in-JS for automatic unused style removal
• Combine multiple CSS files into one

Optimize Web Fonts

Custom fonts can add 100-400KB and cause layout shifts.

• Use system fonts when possible (no download needed)
• Limit font weights and styles (each adds ~100KB)
• Use WOFF2 format (30% smaller than WOFF)
• Preload critical fonts: <link rel="preload" as="font">
• font-display: swap - show fallback font immediately
• Subset fonts: include only characters you need
• Self-host fonts (don't rely on Google Fonts CDN)

/* Optimal font loading */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Preload in HTML */
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Choose the Right Hosting

• Shared hosting: Slow, unpredictable (avoid for serious sites)
• VPS (Virtual Private Server): Better performance, more control
• Dedicated server: Best performance, expensive
• Cloud hosting: Scalable (AWS, Google Cloud, DigitalOcean)
• Managed hosting: Optimized for specific platforms (WP Engine for WordPress)
• CDN: Serve static assets from locations near users

Enable Caching

Caching stores copies of files to serve them faster on repeat visits.

• Browser caching: Store assets locally on user's device
• Server caching: Store rendered HTML (WordPress: WP Rocket, W3 Total Cache)
• CDN caching: Cache static assets at edge locations
• Object caching: Cache database queries (Redis, Memcached)
• Page caching: Serve pre-rendered HTML
• Set proper Cache-Control headers (cache static assets for 1 year)

Use a Content Delivery Network (CDN)

• CDN serves files from server closest to user
• Reduces latency by 50-80%
• Popular CDNs: Cloudflare, Fastly, AWS CloudFront, BunnyCDN
• Cloudflare free plan: good for most sites
• Cache images, CSS, JavaScript, fonts on CDN
• Edge caching: cache entire HTML at edge locations

Optimize Database

• Clean up database: remove spam comments, post revisions, transients
• Index frequently queried columns
• Optimize database tables regularly
• Use persistent connections
• Implement query caching
• Limit post revisions in WordPress
• Use lazy loading for database queries

Enable Compression

• Gzip compression: enable on server for 70-80% size reduction
• Brotli compression: 15-20% better than Gzip
• Compress HTML, CSS, JavaScript, JSON, XML
• Check: curl -H "Accept-Encoding: gzip" -I yoursite.com
• Enable in .htaccess (Apache) or nginx.conf (Nginx)
• Most hosts enable this by default

Combine Files

• Combine multiple CSS files into one
• Combine JavaScript files
• Use CSS sprites for multiple small images
• Inline small SVG icons instead of separate files
• Use icon fonts or SVG sprites
• Modern alternative: HTTP/2 makes multiple requests less problematic

Remove Unnecessary Third-Party Scripts

• Each third-party script adds 50-200KB and 200-500ms
• Audit: Google Tag Manager, analytics, social widgets, ads, fonts, chat
• Load third-party scripts asynchronously
• Use facades: load YouTube thumbnail, full video only on click
• Self-host Google Analytics (save DNS lookup)
• Delay non-critical scripts until user interaction

Mobile-Specific Optimizations

• Reduce image sizes for mobile (use srcset)
• Minimize JavaScript (mobile CPUs are 5-10x slower)
• Test on real devices, not just desktop Chrome
• Use AMP for ultra-fast mobile pages (optional)
• Optimize tap targets (minimum 48x48px)
• Reduce font sizes and CSS complexity
• Test on 3G/4G connections, not just WiFi

Progressive Web App (PWA) Techniques

• Service workers for offline functionality
• App-like experience on mobile
• Install prompts
• Push notifications
• Background sync
• Significant performance improvements for repeat visits