Website Performance Optimization: Speed, CDN, Caching, and Core Web Vitals in 2026

Why Website Performance Matters

Every second your website takes to load, you're losing money. Amazon calculated that a 100ms delay costs them 1% in sales. For most businesses, the impact is even more severe.

The data:

• 53% of mobile visitors abandon sites that take longer than 3 seconds to load
• A 1-second delay in page load time reduces conversions by 7%
• Page speed is a Google ranking factor for both mobile and desktop
• Core Web Vitals directly impact search rankings
• Faster sites have lower bounce rates and higher engagement

In New Zealand, with median mobile speeds of 120 Mbps and fixed broadband at 214 Mbps, users expect instant page loads. Anything slower feels broken.

---

Understanding Core Web Vitals

Google's Core Web Vitals are the performance metrics that matter most for user experience and rankings.

1. Largest Contentful Paint (LCP)

What it measures: How fast your main content loads

Target: Under 2.5 seconds

What counts as LCP:

• Hero images
• Header images
• Large text blocks
• Video thumbnail images

How to improve:

• Optimize images (compress, use WebP)
• Implement lazy loading for below-fold images
• Reduce server response time (TTFB)
• Use a CDN
• Preload critical resources
• Remove render-blocking JavaScript and CSS

2. Interaction to Next Paint (INP)

What it measures: Overall page responsiveness to user interactions

Target: Under 200 milliseconds

Replaced: First Input Delay (FID) in 2024

What it tracks:

• Click responsiveness
• Tap responsiveness
• Keyboard interactions

How to improve:

• Minimize JavaScript execution time
• Break up long tasks
• Use web workers for heavy computations
• Optimize event handlers
• Reduce third-party script impact

3. Cumulative Layout Shift (CLS)

What it measures: Visual stability as the page loads

Target: Under 0.1

What causes layout shift:

• Images without dimensions
• Ads, embeds, iframes without reserved space
• Dynamically injected content
• Web fonts causing FOIT/FOUT

How to improve:

• Set explicit width and height on images and videos
• Reserve space for ads and embeds
• Avoid inserting content above existing content
• Use font-display: swap for web fonts
• Preload fonts

---

Image Optimization

Images typically account for 50-70% of page weight. Optimizing them is the fastest way to improve performance.

Modern Image Formats

WebP:

• 25-35% smaller than JPEG
• Supports transparency (like PNG)
• Widely supported (98%+ browsers)

AVIF:

• 50% smaller than JPEG
• Better quality at same file size
• Growing browser support (90%+)
• Slower encoding (use for hero images)

Implementation:

<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>

Image Compression

Tools:

• TinyPNG / TinyJPG (online)
• ImageOptim (Mac)
• Squoosh (Google, web-based)
• Sharp (Node.js library)

Targets:

• JPEG: 60-80% quality
• PNG: Use TinyPNG or similar
• SVG: Minify with SVGO

Responsive Images

Serve appropriately sized images for different screens:

<img 
  src="image-800.jpg" 
  srcset="image-400.jpg 400w, 
          image-800.jpg 800w, 
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 
         (max-width: 1200px) 800px, 
         1200px"
  alt="Description"
  width="800" 
  height="600"
  loading="lazy"
>

Lazy Loading

Defer loading images until they're needed:

<img src="image.jpg" loading="lazy" alt="Description">

Best practices:

• Lazy load images below the fold
• Don't lazy load hero images or LCP elements
• Use native loading="lazy" (supported in all modern browsers)

---

Content Delivery Networks (CDN)

CDNs cache your content on servers around the world, reducing latency by serving files from the closest location to each user.

How CDNs Work

1. User requests your website
2. CDN serves cached content from nearest edge server
3. If content isn't cached, CDN fetches from origin server
4. CDN caches the content for future requests
5. Subsequent requests are served instantly from cache

Benefits

• 40-70% TTFB reduction — content served from nearby servers
• Reduced server load — CDN handles most traffic
• Better global performance — fast for users worldwide
• DDoS protection — CDN absorbs malicious traffic
• Automatic optimization — many CDNs optimize images and code

Popular CDN Providers

Cloudflare:

• Free tier available
• Global network
• Built-in security features
• Easy setup

Fastly:

• Real-time purging
• Advanced configuration
• Enterprise-focused

Amazon CloudFront:

• AWS integration
• Pay-as-you-go pricing
• Global coverage

Bunny CDN:

• Affordable
• Good performance
• Simple pricing

CDN Setup (Cloudflare Example)

1. Sign up for Cloudflare
2. Add your domain
3. Update nameservers at your registrar
4. Enable "Proxied" (orange cloud) for your records
5. Configure caching rules
6. Enable auto-minification
7. Set up page rules for optimization

---

Caching Strategies

Caching stores copies of files to serve them faster on subsequent requests.

Browser Caching

Tell browsers how long to cache files:

Cache-Control: public, max-age=31536000, immutable

Recommended cache times:

• Static assets (versioned): 1 year (31536000 seconds)
• Images: 1 month (2592000 seconds)
• HTML: No cache or short (3600 seconds)
• CSS/JS (versioned): 1 year
• CSS/JS (not versioned): 1 week (604800 seconds)

Server-Side Caching

Page caching:

• Cache entire HTML pages
• Serve pre-rendered pages instantly
• Invalidate when content changes

Object caching:

• Cache database queries
• Cache API responses
• Use Redis or Memcached

Opcode caching:

• Cache compiled PHP code
• Use OPcache (built into PHP)
• Reduces server processing time

WordPress-Specific Caching

Recommended plugins:

• WP Rocket (paid, easiest)
• W3 Total Cache (free, powerful)
• WP Super Cache (free, simple)
• LiteSpeed Cache (free, for LiteSpeed servers)

What to cache:

• Page cache
• Browser cache
• Object cache
• Database queries
• Minify HTML, CSS, JS

---

Code Optimization

Minification

Remove unnecessary characters from code:

Before:

body {
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 0;
  padding: 0;
}

After:

body{font-family:Arial,sans-serif;color:#333;margin:0;padding:0}

Tools:

• Terser (JavaScript)
• cssnano (CSS)
• HTMLMinifier (HTML)
• Build tools (Webpack, Vite, Parcel)

JavaScript Optimization

Defer non-critical JavaScript:

<script src="script.js" defer></script>

Async for independent scripts:

<script src="analytics.js" async></script>

Code splitting:

• Load only what's needed for each page
• Use dynamic imports
• Implement lazy loading for components

Remove unused JavaScript:

• Audit with Chrome DevTools Coverage tab
• Tree-shake dependencies
• Remove unused libraries

CSS Optimization

Critical CSS:

• Inline CSS needed for above-the-fold content
• Defer loading full stylesheet
• Tools: Critical, Penthouse

Remove unused CSS:

• Use PurgeCSS
• Audit with Chrome DevTools Coverage
• Avoid loading entire frameworks when you only use 10%

---

Server Optimization

Time to First Byte (TTFB)

Target: Under 800ms

How to improve:

• Upgrade hosting (shared → VPS → dedicated)
• Use server-side caching
• Optimize database queries
• Enable compression (Gzip or Brotli)
• Use a CDN
• Reduce server-side processing

Compression

Compress text-based files before sending:

Gzip:

• Widely supported
• 60-80% size reduction
• Easy to enable

Brotli:

• 15-20% better than Gzip
• Supported by all modern browsers
• Requires server configuration

Enable on Apache:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

Enable on Nginx:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

Database Optimization

For WordPress:

• Clean up post revisions
• Remove spam comments
• Optimize database tables
• Use WP-Optimize plugin

General:

• Index frequently queried columns
• Optimize slow queries
• Use query caching
• Limit query results

---

Third-Party Scripts

Third-party scripts (analytics, ads, chat widgets) are often the biggest performance killers.

Audit Third-Party Impact

Chrome DevTools:

1. Open DevTools > Network tab
2. Filter by "3rd-party"
3. Check size and load time
4. Identify slow scripts

Optimization Strategies

Defer non-critical scripts:

• Load analytics after page load
• Delay chat widgets until user interaction
• Use async or defer attributes

Self-host when possible:

• Google Fonts
• Analytics scripts
• Icon libraries

Use facades:

• Replace YouTube embeds with thumbnail + click-to-load
• Lazy load social media embeds
• Tools: lite-youtube-embed

Limit quantity:

• Audit all third-party scripts quarterly
• Remove unused tools
• Consolidate where possible

---

Mobile Performance

Mobile performance is critical — over 60% of traffic is mobile.

Mobile-Specific Optimizations

• Reduce image sizes for mobile screens
• Simplify navigation and interactions
• Minimize form fields
• Use mobile-optimized fonts
• Test on real devices (not just emulators)
• Consider mobile-first design

Adaptive Loading

Serve different experiences based on connection speed:

if (navigator.connection.effectiveType === '4g') {
  // Load high-quality images and videos
} else {
  // Load lower-quality alternatives
}

---

Performance Testing Tools

Google PageSpeed Insights

What it provides:

• Lab data (Lighthouse)
• Field data (Chrome User Experience Report)
• Specific recommendations
• Core Web Vitals scores

URL: pagespeed.web.dev

WebPageTest

What it provides:

• Detailed waterfall analysis
• Test from multiple locations
• Connection speed simulation
• Filmstrip view of loading

URL: webpagetest.org

Chrome DevTools Lighthouse

What it provides:

• Performance audit
• Accessibility audit
• SEO audit
• Best practices

How to use: DevTools > Lighthouse tab > Generate report

GTmetrix

What it provides:

• Performance scores
• Detailed recommendations
• Historical tracking
• Video playback of page load

URL: gtmetrix.com

---

Performance Budget

Set limits to prevent performance regression.

Example Budget

• Total page weight: Under 1MB
• JavaScript: Under 200KB
• CSS: Under 50KB
• Images: Under 500KB
• LCP: Under 2.5 seconds
• INP: Under 200ms
• CLS: Under 0.1

Enforcement

• Monitor with Lighthouse CI
• Set up performance budgets in Webpack
• Fail builds that exceed budgets
• Track performance in analytics

---

Quick Wins Checklist

Start here for immediate improvements:

• [ ] Compress all images to WebP format
• [ ] Enable browser caching (1 year for static assets)
• [ ] Implement lazy loading for below-fold images
• [ ] Enable Gzip or Brotli compression
• [ ] Set up a CDN (Cloudflare free tier)
• [ ] Defer non-critical JavaScript
• [ ] Minify CSS and JavaScript
• [ ] Remove unused CSS and JavaScript
• [ ] Optimize web fonts (preload, font-display: swap)
• [ ] Set explicit dimensions on images and videos
• [ ] Audit and remove unnecessary third-party scripts
• [ ] Test on real mobile devices

Website performance is not a one-time fix — it requires ongoing monitoring and optimization. Set up regular audits, track Core Web Vitals, and prioritize performance in every development decision.