Site Performance

Overview

Site Performance refers to how quickly a website loads and responds to user interactions. It's a critical factor for both user experience and SEO, directly impacting rankings, engagement, and conversions.

What is Site Performance?

Site Performance encompasses the speed and efficiency with which a website delivers content to users, including initial page load, interactivity, and overall responsiveness. It's measured through various metrics and affects everything from user satisfaction to search engine rankings.

Why Site Performance Matters

SEO Rankings: Google uses page speed as a ranking factor
User Experience: 53% of mobile users abandon sites that take over 3 seconds to load
Conversion Rates: Every 100ms delay can reduce conversions by 7%
Bounce Rate: Slow sites have significantly higher bounce rates
Core Web Vitals: Performance directly affects CWV scores
Mobile Users: Critical for mobile-first indexing
Competitive Advantage: Faster sites outperform slower competitors

Key Performance Metrics

Loading Metrics

Time to First Byte (TTFB)

Time from request to first byte of response.

Target: < 600ms
Good: < 200ms
Critical: First impression of server performance

First Contentful Paint (FCP)

When first content element renders.

Target: < 1.8 seconds
Measures: Initial rendering start

Largest Contentful Paint (LCP)

When largest content element renders.

Target: < 2.5 seconds
Core Web Vital: Critical for SEO

Speed Index

How quickly content is visually displayed.

Target: < 3.4 seconds
Measures: Visual completion

Time to Interactive (TTI)

When page becomes fully interactive.

Target: < 3.8 seconds
Measures: JavaScript execution completion

Total Blocking Time (TBT)

Time page is blocked from user interaction.

Target: < 200ms
Measures: Main thread availability

Interaction Metrics

Interaction to Next Paint (INP)

Responsiveness of user interactions.

Target: < 200ms
Core Web Vital: Replaced FID in 2024

First Input Delay (FID)

Delay of first user interaction (deprecated).

Target: < 100ms
Replaced by: INP in March 2024

Visual Stability Metrics

Cumulative Layout Shift (CLS)

Unexpected layout shifts during loading.

Target: < 0.1
Core Web Vital: Visual stability measure

Factors Affecting Performance

Server-Side Factors

Server Response Time
- Server processing speed
- Database query optimization
- Server resources (CPU, RAM)
- Server location
Hosting Quality
- Shared vs. dedicated hosting
- Server configuration
- Geographic distribution
- Uptime reliability
Backend Code
- Efficient algorithms
- Database optimization
- Caching strategies
- Resource management

Client-Side Factors

File Sizes
- HTML, CSS, JavaScript
- Images and media
- Fonts
- Third-party scripts
Number of Requests
- HTTP requests count
- External resources
- API calls
- Third-party integrations
Render Blocking
- Critical CSS
- JavaScript execution
- Font loading
- External stylesheets

Network Factors

Bandwidth
- User's connection speed
- Data transfer amount
- Network latency
Protocol Efficiency
- HTTP/1.1 vs. HTTP/2 vs. HTTP/3
- Connection reuse
- Multiplexing

Optimization Techniques

1. Image Optimization

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

<!-- Responsive images -->
<img 
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="Responsive image"
  loading="lazy"
>

<!-- Priority hints -->
<img src="hero.jpg" fetchpriority="high" alt="Hero image">

Best Practices:

Compress images (80-85% quality for JPEG)
Use appropriate formats (WebP, AVIF)
Implement lazy loading
Serve scaled images
Use image CDN

2. CSS Optimization

<!-- Inline critical CSS -->
<style>
  /* Critical above-the-fold styles */
  .header { height: 60px; background: #333; }
  .hero { min-height: 400px; }
</style>

<!-- Async non-critical CSS -->
<link rel="preload" href="styles.css" as="style" 
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Best Practices:

Minify CSS
Remove unused CSS
Inline critical CSS
Load non-critical CSS asynchronously
Use CSS containment

3. JavaScript Optimization

<!-- Defer non-critical scripts -->
<script src="analytics.js" defer></script>

<!-- Async for independent scripts -->
<script src="widget.js" async></script>

<!-- Dynamic imports -->
<script>
  document.getElementById('loadFeature').addEventListener('click', async () => {
    const module = await import('./feature.js');
    module.initialize();
  });
</script>

Best Practices:

Minimize JavaScript payload
Code splitting
Tree shaking
Defer non-critical scripts
Remove unused code
Use modern JavaScript for modern browsers

4. Caching Strategies

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

location ~* \.(html)$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}

Caching Levels:

Browser caching
CDN caching
Server-side caching
Database query caching
Object caching

5. Content Delivery Network (CDN)

<!-- Load resources from CDN -->
<link rel="stylesheet" href="https://cdn.example.com/styles.css">
<script src="https://cdn.example.com/script.js"></script>

<!-- DNS prefetch for CDN -->
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Benefits:

Reduced latency
Geographic distribution
Load balancing
DDoS protection
Bandwidth savings

6. Compression

# Enable gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types 
    text/plain 
    text/css 
    text/xml 
    text/javascript 
    application/x-javascript 
    application/xml+rss 
    application/javascript 
    application/json
    image/svg+xml;

Compression Types:

Gzip (widely supported)
Brotli (better compression)
Minification (code optimization)

7. Database Optimization

-- Add indexes for frequent queries
CREATE INDEX idx_user_email ON users(email);

-- Optimize queries
-- Bad: SELECT * FROM products;
-- Good: SELECT id, name, price FROM products WHERE category = 'electronics' LIMIT 20;

-- Use connection pooling
-- Use query caching
-- Optimize table structures

8. Server Configuration

# Enable HTTP/2
listen 443 ssl http2;

# Enable OCSP stapling
ssl_stapling on;
ssl_stapling_verify on;

# Connection pooling
keepalive_timeout 65;
keepalive_requests 100;

# Buffer sizes
client_body_buffer_size 10K;
client_header_buffer_size 1k;
client_max_body_size 8m;

9. Reduce Third-Party Scripts

<!-- Load third-party scripts asynchronously -->
<script async src="https://www.googletagmanager.com/gtag/js"></script>

<!-- Consider facades for heavy embeds -->
<div class="youtube-facade" data-video-id="VIDEO_ID">
  <img src="thumbnail.jpg" alt="Video thumbnail">
  <button>Play</button>
</div>

<script>
// Load actual YouTube iframe on click
document.querySelectorAll('.youtube-facade').forEach(facade => {
  facade.addEventListener('click', () => {
    const iframe = document.createElement('iframe');
    iframe.src = `https://www.youtube.com/embed/${facade.dataset.videoId}?autoplay=1`;
    facade.replaceWith(iframe);
  });
});
</script>

10. Preloading and Prefetching

<!-- Preload critical resources -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero.jpg" as="image">

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- DNS prefetch -->
<link rel="dns-prefetch" href="//analytics.example.com">

<!-- Prefetch next page -->
<link rel="prefetch" href="/next-page.html">

Performance Testing Tools

Google Tools

PageSpeed Insights

Field and lab data
Mobile and desktop testing
Optimization recommendations
Core Web Vitals scores

Lighthouse

# CLI usage
npm install -g lighthouse
lighthouse https://example.com --view

# Chrome DevTools
# Open DevTools > Lighthouse tab > Generate report

Chrome DevTools

Performance panel
Network analysis
Coverage report
Performance monitor

Third-Party Tools

GTmetrix

Detailed performance reports
Video playback
Historical tracking
Waterfall analysis

WebPageTest

Multiple location testing
Connection throttling
Detailed metrics
Filmstrip view

Pingdom

Uptime monitoring
Performance monitoring
Global testing locations
Alert notifications

Real User Monitoring (RUM)

SpeedCurve
Calibre
New Relic
DataDog RUM

Performance Budgets

Setting Budgets

{
  "budgets": [
    {
      "resourceSizes": [
        {
          "resourceType": "document",
          "budget": 30
        },
        {
          "resourceType": "script",
          "budget": 150
        },
        {
          "resourceType": "stylesheet",
          "budget": 50
        },
        {
          "resourceType": "image",
          "budget": 300
        }
      ],
      "timings": [
        {
          "metric": "interactive",
          "budget": 3000
        },
        {
          "metric": "first-contentful-paint",
          "budget": 1500
        }
      ]
    }
  ]
}

Monitoring Budgets

Lighthouse CI
webpack-bundle-analyzer
bundlesize
Custom scripts in CI/CD

Advanced Optimization

Service Workers

// Cache-first strategy
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

// Network-first with cache fallback
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        const clone = response.clone();
        caches.open('dynamic').then(cache => cache.put(event.request, clone));
        return response;
      })
      .catch(() => caches.match(event.request))
  );
});

Resource Hints

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- Prefetch next navigation -->
<link rel="prefetch" href="/next-page">

<!-- Prerender next page -->
<link rel="prerender" href="/next-page">

<!-- Module preload -->
<link rel="modulepreload" href="app.js">

Critical Rendering Path Optimization

Minimize critical resources
Minimize critical bytes
Minimize critical path length
Prioritize visible content
Defer non-critical resources

Progressive Enhancement

Build basic functionality first, enhance with JavaScript:

<!-- Works without JavaScript -->
<form action="/search" method="GET">
  <input name="q" type="search">
  <button type="submit">Search</button>
</form>

<!-- Enhanced with JavaScript -->
<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const results = await fetch('/api/search?q=' + form.q.value);
    // Display results dynamically
  });
</script>

Mobile Performance

Mobile-Specific Optimizations

Reduce image sizes for mobile
Simplify navigation
Minimize above-the-fold content
Optimize touch targets
Reduce data transfer

Testing on Real Devices

Test on actual mobile devices
Various network conditions
Different screen sizes
Different operating systems

Adaptive Loading

// Check network quality
if ('connection' in navigator) {
  const connection = navigator.connection;
  
  if (connection.effectiveType === '4g') {
    // Load high-quality images
    loadHighQualityAssets();
  } else {
    // Load optimized images
    loadOptimizedAssets();
  }
}

// Check data saver preference
if ('connection' in navigator && navigator.connection.saveData) {
  // Load minimal assets
  loadMinimalAssets();
}

Overview​

What is Site Performance?​

Why Site Performance Matters​

Key Performance Metrics​

Loading Metrics​

Time to First Byte (TTFB)​

First Contentful Paint (FCP)​

Largest Contentful Paint (LCP)​

Speed Index​

Time to Interactive (TTI)​

Total Blocking Time (TBT)​

Interaction Metrics​

Interaction to Next Paint (INP)​

First Input Delay (FID)​

Visual Stability Metrics​

Cumulative Layout Shift (CLS)​

Factors Affecting Performance​

Server-Side Factors​

Client-Side Factors​

Network Factors​

Optimization Techniques​

1. Image Optimization​

2. CSS Optimization​

3. JavaScript Optimization​

4. Caching Strategies​

5. Content Delivery Network (CDN)​

6. Compression​

7. Database Optimization​

8. Server Configuration​

9. Reduce Third-Party Scripts​

10. Preloading and Prefetching​

Performance Testing Tools​

Google Tools​

PageSpeed Insights​

Lighthouse​

Chrome DevTools​

Third-Party Tools​

GTmetrix​

WebPageTest​

Pingdom​

Real User Monitoring (RUM)​

Performance Budgets​

Setting Budgets​

Monitoring Budgets​

Advanced Optimization​

Service Workers​

Resource Hints​

Critical Rendering Path Optimization​

Progressive Enhancement​

Mobile Performance​

Mobile-Specific Optimizations​

Testing on Real Devices​

Adaptive Loading​

Common Performance Issues​

Image Problems​

JavaScript Bloat​

Render Blocking​

Server Response​

Third-Party Scripts​

Fonts​

Performance Checklist​

Initial Audit​

Image Optimization​

Code Optimization​

Server Optimization​

Monitoring​

Related Topics​

Further Reading​

Overview

What is Site Performance?

Why Site Performance Matters

Key Performance Metrics

Loading Metrics

Time to First Byte (TTFB)

First Contentful Paint (FCP)

Largest Contentful Paint (LCP)

Speed Index

Time to Interactive (TTI)

Total Blocking Time (TBT)

Interaction Metrics

Interaction to Next Paint (INP)

First Input Delay (FID)

Visual Stability Metrics

Cumulative Layout Shift (CLS)

Factors Affecting Performance

Server-Side Factors

Client-Side Factors

Network Factors

Optimization Techniques

1. Image Optimization

2. CSS Optimization

3. JavaScript Optimization

4. Caching Strategies

5. Content Delivery Network (CDN)

6. Compression

7. Database Optimization

8. Server Configuration

9. Reduce Third-Party Scripts

10. Preloading and Prefetching

Performance Testing Tools

Google Tools

PageSpeed Insights

Lighthouse

Chrome DevTools

Third-Party Tools

GTmetrix

WebPageTest

Pingdom

Real User Monitoring (RUM)

Performance Budgets

Setting Budgets

Monitoring Budgets

Advanced Optimization

Service Workers

Resource Hints

Critical Rendering Path Optimization

Progressive Enhancement

Mobile Performance

Mobile-Specific Optimizations

Testing on Real Devices

Adaptive Loading

Common Performance Issues

Image Problems

JavaScript Bloat

Render Blocking

Server Response

Third-Party Scripts

Fonts

Performance Checklist

Initial Audit

Image Optimization

Code Optimization

Server Optimization

Monitoring

Related Topics

Further Reading