Performance: server-side, caching, edge, waterfall analysis

A comprehensive reference for web performance optimization across the full stack. Performance affects rankings (Core Web Vitals are explicit ranking factors), conversion (slow sites lose visitors),…

Core Web Vitals Deep Dive, Resource Optimization, Server Performance, CDN Strategy, Caching Layers, and the Comprehensive Discipline of Web Performance

A comprehensive reference for web performance optimization across the full stack. Performance affects rankings (Core Web Vitals are explicit ranking factors), conversion (slow sites lose visitors), and AI engine accessibility (slow sites get crawled less). Performance is both technical foundation and competitive differentiation.

1. Document Purpose

Performance work spans many disciplines: server configuration, CDN selection, asset optimization, database tuning, frontend code, third-party scripts, image handling, font delivery, and more. Each layer offers optimization opportunities; cumulative impact determines real-world performance.

This framework specifies the comprehensive performance optimization approach, complementing framework-pageexperience.md (Core Web Vitals focus) with broader performance considerations.

For Joseph's portfolio managing 130+ sites on self-managed Linux infrastructure, performance discipline at scale matters significantly.

1.1 Required Tools

• PageSpeed Insights — pagespeed.web.dev — Core Web Vitals + Lighthouse
• Lighthouse — Chrome DevTools comprehensive audit
• WebPageTest — webpagetest.org — detailed waterfall analysis
• GTmetrix — performance dashboards
• Real User Monitoring — actual user performance data
• Chrome DevTools — Performance and Network tabs
• Server monitoring — Linux tools (top, iostat, etc.)

2. Performance Measurement

2.1 Lab vs Field Data

performance_measurement_types:
  
  lab_data:
    description: "Synthetic testing in controlled environment"
    tools: ["Lighthouse", "WebPageTest", "GTmetrix"]
    benefits:
      - Reproducible
      - Controlled variables
      - Detailed waterfall analysis
    limitations:
      - Doesn't reflect real user variety
      - May test under ideal conditions
      - Can be gamed for higher scores
  
  field_data:
    description: "Real user monitoring (RUM) of actual visits"
    sources: ["Chrome User Experience Report (CrUX)", "Self-deployed RUM"]
    benefits:
      - Reflects real-world performance
      - Across user device/network variety
      - What Google uses for ranking
    limitations:
      - Less granular debugging
      - Slower feedback loop
      - Privacy considerations
  
  use_both:
    rationale: "Lab for debugging; field for reality"
    monitoring_pattern: "Lab during development; field in production"

2.2 Core Web Vitals (2026)

core_web_vitals_2026:
  
  lcp_largest_contentful_paint:
    measures: "Loading performance"
    target: "Under 2.5 seconds"
    measurement_window: "75th percentile of users"
    
  inp_interaction_to_next_paint:
    measures: "Responsiveness"
    target: "Under 200ms"
    measurement_window: "75th percentile"
    note: "Replaced FID in March 2024"
  
  cls_cumulative_layout_shift:
    measures: "Visual stability"
    target: "Under 0.1"
    measurement_window: "75th percentile"

2.3 Additional Performance Metrics

additional_metrics:
  
  ttfb_time_to_first_byte:
    measures: "Server response time"
    target: "Under 800ms"
    significance: "Foundation for all subsequent metrics"
  
  fcp_first_contentful_paint:
    measures: "First content visible"
    target: "Under 1.8 seconds"
  
  speed_index:
    measures: "How quickly content visible during load"
    target: "Under 3.4 seconds (mobile)"
  
  total_blocking_time:
    measures: "Main thread blocking"
    target: "Under 200ms"
  
  time_to_interactive:
    measures: "When page fully interactive"
    target: "Under 3.8 seconds (mobile)"

3. Server Performance

3.1 Hosting Foundation

Performance starts with hosting. Cheap shared hosting makes optimization difficult.

hosting_performance_factors:
  
  resources:
    cpu: "Adequate cores; not throttled"
    ram: "Sufficient for application needs"
    disk_io: "SSD essential; NVMe preferred"
    network: "Gigabit connectivity"
  
  configuration:
    php_version: "Modern PHP 8.x"
    web_server: "Nginx or Apache 2.4+ optimized"
    database: "MySQL 8 or MariaDB 10.6+"
    
  scaling:
    vertical: "More resources on same server"
    horizontal: "Multiple servers; load balancing"
    auto_scaling: "Cloud providers; scales with traffic"
  
  joseph_setup:
    server: "Bubbles (self-managed Debian)"
    sites: "130+ production sites"
    optimization: "Resource allocation per site; appropriate caching"

3.2 Nginx Optimization

# Optimized Nginx configuration patterns

# Worker processes
worker_processes auto;
worker_rlimit_nofile 65535;

events {
    worker_connections 1024;
    multi_accept on;
    use epoll;
}

http {
    # Sendfile for static files
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    
    # Keep alive
    keepalive_timeout 30;
    keepalive_requests 100;
    
    # Buffers
    client_body_buffer_size 16k;
    client_max_body_size 100m;
    client_header_buffer_size 1k;
    large_client_header_buffers 4 8k;
    
    # Compression
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml+rss
        application/xml
        image/svg+xml
        font/woff
        font/woff2;
    
    # Brotli (if module installed)
    brotli on;
    brotli_comp_level 6;
    brotli_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml+rss
        application/xml
        image/svg+xml;
    
    # FastCGI cache for PHP
    fastcgi_cache_path /var/cache/nginx levels=1:2 keys_zone=fcgi:100m max_size=1g inactive=60m;
    fastcgi_cache_use_stale error timeout invalid_header http_500;
    fastcgi_cache_lock on;
    
    # HTTP/2 push (HTTP/2)
    http2_push_preload on;
}

3.3 PHP-FPM Optimization

# /etc/php/8.2/fpm/pool.d/www.conf

; Process management
pm = dynamic
pm.max_children = 50
pm.start_servers = 5
pm.min_spare_servers = 5
pm.max_spare_servers = 35
pm.max_requests = 500

; Slow log
slowlog = /var/log/php-fpm-slow.log
request_slowlog_timeout = 5s

; OPcache
opcache.enable = 1
opcache.memory_consumption = 256
opcache.interned_strings_buffer = 16
opcache.max_accelerated_files = 20000
opcache.validate_timestamps = 0  ; Production; restart on deploy
opcache.save_comments = 1

3.4 Database Optimization

mysql_optimization:
  
  configuration:
    innodb_buffer_pool_size: "70-80% of RAM for dedicated DB server"
    innodb_log_file_size: "256MB+"
    innodb_flush_method: "O_DIRECT"
    query_cache_size: "Removed in MySQL 8; use other caching"
  
  indexing:
    - Index foreign keys
    - Index columns used in WHERE clauses frequently
    - Composite indexes for multi-column queries
    - Avoid over-indexing (indexes slow writes)
  
  query_optimization:
    - EXPLAIN to analyze queries
    - Avoid SELECT *
    - Limit result sets where possible
    - Optimize joins
  
  ongoing_maintenance:
    - Regular OPTIMIZE TABLE
    - Slow query log monitoring
    - Long-running query alerts

4. Caching Strategy

4.1 Caching Layers

caching_layers:
  
  browser_cache:
    location: "User's browser"
    purpose: "Repeat visitors don't re-download"
    configuration: "Cache-Control headers"
    
  cdn_cache:
    location: "CDN edge servers globally"
    purpose: "Geographic proximity"
    services: ["Cloudflare", "Fastly", "BunnyCDN", "KeyCDN"]
  
  reverse_proxy_cache:
    location: "Front of application server"
    examples: ["Varnish", "Nginx FastCGI cache"]
    purpose: "Avoid hitting application for cached responses"
  
  application_cache:
    location: "Application memory"
    examples: ["WordPress object cache", "Rails cache"]
    purpose: "Cache expensive computations"
  
  database_query_cache:
    location: "Object cache backed by Redis/Memcached"
    purpose: "Cache database query results"
  
  cdn_origin_shield:
    location: "Between CDN and origin"
    purpose: "Reduce origin load"
    services: ["Cloudflare Argo", "Fastly Origin Shield"]

4.2 Cache Headers

# Static assets — cache aggressively
location ~* \.(jpg|jpeg|png|gif|ico|svg|webp|woff|woff2|ttf|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

# HTML — cache briefly, allow revalidation
location ~* \.html$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}

# API responses — typically don't cache
location /api/ {
    add_header Cache-Control "no-store, no-cache, must-revalidate";
}

4.3 Object Cache (Redis)

For WordPress and other database-heavy applications:

redis_object_cache:
  
  setup:
    install: "apt install redis-server"
    php_extension: "apt install php8.2-redis"
    plugin: "Redis Object Cache plugin (WordPress)"
  
  benefits:
    - Significant database load reduction
    - Faster page generation
    - Better scalability
  
  configuration:
    maxmemory: "Set based on available RAM"
    maxmemory_policy: "allkeys-lru"
    persistence: "Disable for cache use (improves performance)"

4.4 Page Cache

page_cache_strategies:
  
  full_page_cache:
    pattern: "Cache complete HTML responses"
    benefit: "Skip PHP/DB entirely for cached pages"
    invalidation: "Clear on content updates"
  
  partial_caching:
    pattern: "Cache specific page sections"
    use_for: "Mostly static with some dynamic parts"
  
  dynamic_caching:
    pattern: "Cache for short periods (1-60 seconds)"
    use_for: "High-traffic dynamic sites"
    benefit: "Significant load reduction even on dynamic content"
  
  edge_side_includes:
    pattern: "Cache shell; insert dynamic blocks"
    technology: "Varnish ESI; Cloudflare Workers"

5. CDN Strategy

5.1 CDN Selection

cdn_options:
  
  cloudflare:
    pricing: "Free tier generous; Pro $20/month; higher tiers"
    features:
      - Global edge network
      - DDoS protection
      - WAF
      - Argo intelligent routing (paid)
      - Workers (edge compute)
      - Image optimization (paid)
      - R2 object storage
    best_for: "Most sites; comprehensive features"
    used_widely: "Industry standard for many"
  
  fastly:
    pricing: "Pay per usage; minimum spend"
    features:
      - Edge compute (VCL, Compute@Edge)
      - Real-time logging
      - Highly programmable
    best_for: "High-traffic sites with custom needs"
  
  bunnycdn:
    pricing: "Very competitive ($1/month minimum)"
    features:
      - Bunny Optimizer (image optimization)
      - Edge storage
      - Stream (video)
    best_for: "Cost-conscious sites"
  
  keycdn:
    pricing: "Competitive; pay-per-usage"
    features:
      - Strong edge network
      - Image processing
    best_for: "Cost-conscious alternative"
  
  vercel_netlify_built_in:
    note: "Included with these hosting platforms"
    benefit: "Integrated workflow"

5.2 CDN Configuration

cdn_optimization:
  
  cache_rules:
    static_assets: "Cache aggressively (1 year)"
    html: "Cache briefly (5 minutes - 1 hour)"
    api: "Typically no cache"
    custom: "Per-path rules"
  
  ssl:
    requirement: "HTTPS via CDN"
    options:
      flexible: "CDN to origin via HTTP (less secure)"
      full: "End-to-end HTTPS"
      strict: "End-to-end HTTPS with origin certificate validation (best)"
  
  page_rules_cloudflare:
    examples:
      - "Cache everything for /static/* (1 year)"
      - "Bypass cache for /admin/*"
      - "Always use HTTPS"
  
  performance_features:
    auto_minify: "Minify HTML, CSS, JS"
    rocket_loader: "Async JavaScript loading"
    early_hints: "HTTP 103 for resource preload"
    http2_prioritization: "Smart resource prioritization"
    http3: "Latest HTTP version"

6. Asset Optimization

6.1 Image Optimization

See framework-imageseo.md Section 4. Key performance points:

image_performance:
  
  formats:
    modern: "AVIF (best compression); WebP (broadly supported)"
    fallback: "JPEG for photos; PNG for graphics"
    technique: "<picture> with multiple sources"
  
  responsive_images:
    pattern: "srcset with appropriate sizes"
    benefit: "Load size matching viewport"
  
  compression:
    photos: "JPEG quality 75-85 typically"
    graphics: "PNG-8 where colors limited"
    automation: "ImageMagick, sharp, build-time tools"
  
  lazy_loading:
    standard: 'loading="lazy" attribute'
    benefit: "Below-fold images load on demand"
    first_paint_image: 'loading="eager" or no attribute'
  
  cdn_image_optimization:
    services: "Cloudflare Polish, Bunny Optimizer, Cloudinary, Imgix"
    benefit: "On-the-fly optimization at CDN"

6.2 JavaScript Optimization

javascript_optimization:
  
  minimize_total:
    rule: "Less JavaScript is better"
    audit: "Coverage tab in Chrome DevTools"
    remove: "Unused libraries and code"
  
  code_splitting:
    pattern: "Per-route or per-feature bundles"
    framework_support: "Webpack, Rollup, esbuild built-in"
  
  defer_and_async:
    defer: "Wait until DOM ready"
    async: "Load asynchronously; execute when ready"
    use_for: "Non-critical scripts"
  
  third_party_audit:
    audit: "Each third-party script: necessary?"
    common_culprits:
      - Heavy chat widgets
      - Multiple analytics tools
      - Tag manager bloat
      - Social embeds
    fixes:
      - Remove unnecessary
      - Defer non-critical
      - Use lighter alternatives
  
  modern_js:
    benefit: "Smaller bundles for modern browsers"
    pattern: "ES modules with module/nomodule"

6.3 CSS Optimization

css_optimization:
  
  critical_css:
    pattern: "Inline above-fold CSS in head"
    benefit: "Render without waiting for external CSS"
    tools: "Critical, Penthouse, build tools"
  
  non_critical_async:
    pattern: "Load main CSS asynchronously after render"
    technique: 'rel="preload" + onload swap'
  
  remove_unused:
    audit: "Coverage tab shows unused CSS"
    tools: "PurgeCSS, UnCSS, build-time"
  
  minimize_imports:
    rule: "Don't import full frameworks for partial use"
    example: "Tailwind purges unused classes by default"
  
  modern_css:
    grid_and_flex: "Replace JavaScript layouts"
    css_variables: "Reduce duplicated values"
    container_queries: "Component-level responsive"

6.4 Font Optimization

font_optimization:
  
  font_display_swap:
    css: "font-display: swap;"
    benefit: "Show fallback font during font load; swap when ready"
    avoid_invisible_text: "Critical for performance metrics"
  
  preload_critical:
    pattern: '<link rel="preload" as="font" type="font/woff2" crossorigin>'
    use_for: "Above-fold fonts"
  
  subset_fonts:
    benefit: "Smaller file sizes"
    use_for: "Latin-only sites can drop other character sets"
  
  variable_fonts:
    benefit: "Multiple weights/styles in single file"
    consideration: "May be larger than single weight"
  
  self_host_vs_google_fonts:
    self_host: "Better performance; eliminates third-party"
    google_fonts: "Simple; broad support"
    recommendation: "Self-host for production"
  
  limit_weights:
    rule: "Use only weights actually needed"
    typical: "Regular + bold sufficient for most sites"

7. Core Web Vitals Optimization

See framework-pageexperience.md for comprehensive treatment. Key points:

7.1 LCP Optimization

lcp_optimization:
  
  identify_lcp_element:
    tool: "Chrome DevTools Performance > LCP marker"
    typical: "Hero image or large heading text"
  
  optimization_strategies:
    image_lcp:
      - Preload the LCP image
      - Optimize image (size, format)
      - Use eager loading
      - CDN delivery
      - Render server-side
    
    text_lcp:
      - Optimize font loading
      - Preload critical CSS
      - Minimize render-blocking
    
    server_response:
      - Reduce TTFB
      - Optimize server processing
      - Effective caching

7.2 INP Optimization

inp_optimization:
  
  reduce_main_thread_work:
    - Code split JavaScript
    - Defer non-critical scripts
    - Web workers for heavy computation
  
  optimize_event_handlers:
    - Debounce/throttle expensive handlers
    - Use requestIdleCallback for non-urgent work
    - Avoid large synchronous tasks
  
  third_party_audit:
    - Heavy third-party scripts often cause INP issues
    - Defer or remove problematic scripts

7.3 CLS Optimization

cls_optimization:
  
  size_attributes:
    images: "Always include width and height attributes"
    embeds: "Reserve space with aspect ratio"
  
  font_loading:
    issue: "Font swap can cause layout shift"
    fix: "Match fallback font metrics; use size-adjust"
  
  ads_and_embeds:
    issue: "Late-loading content shifts page"
    fix: "Reserve space proactively"
  
  dynamic_content:
    rule: "Don't insert above existing content unless triggered by user"

8. Real User Monitoring

8.1 RUM Implementation

rum_options:
  
  free_tools:
    - Chrome User Experience Report (CrUX)
    - Google Search Console Core Web Vitals
    - Cloudflare Web Analytics (free)
  
  paid_tools:
    - SpeedCurve
    - Calibre
    - Datadog RUM
    - New Relic Browser
    - Sentry Performance Monitoring
  
  custom_implementation:
    library: "web-vitals.js"
    pattern: "Send metrics to your analytics"
    benefit: "Custom dashboards"

8.2 Custom Web Vitals Tracking

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

function sendToAnalytics({name, value, id}) {
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_value: value,
    metric_delta: value,
    non_interaction: true,
  });
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

This sends real user data to GA4 for monitoring.

9. Performance Budget

9.1 Establishing Budget

performance_budget:
  
  page_weight_targets:
    total: "Under 1MB ideal; 1-2MB acceptable; 2MB+ concerning"
    html: "Under 100KB"
    css: "Under 100KB"
    javascript: "Under 300KB"
    images: "Variable; lazy-load below fold"
    fonts: "Under 100KB total"
  
  request_count_targets:
    total: "Under 50 ideal; 50-100 acceptable"
    third_party: "Under 10 ideal"
  
  metric_targets:
    lcp: "Under 2.0s ideal; under 2.5s acceptable"
    inp: "Under 100ms ideal; under 200ms acceptable"
    cls: "Under 0.05 ideal; under 0.1 acceptable"
    ttfb: "Under 600ms ideal; under 800ms acceptable"

9.2 Enforcing Budget

budget_enforcement:
  
  ci_cd_integration:
    tools: "Lighthouse CI, SpeedCurve, Calibre"
    pattern: "Performance test on every deployment"
    fail_build: "If thresholds exceeded"
  
  monitoring_alerts:
    pattern: "Alert when metrics regress"
    sensitivity: "Threshold beyond normal variance"
  
  documentation:
    rule: "Document the budget; share with team"
    review: "Quarterly budget review and adjustment"

10. Audit Mode

Score: 16. World-class performance: 14+/16.

11. Common Mistakes

1. Cheap shared hosting — bottleneck regardless of optimization
2. No CDN — slow for distant users
3. No caching layers — every request hits database
4. Image bloat — unoptimized images dominate page weight
5. Third-party script overload — heavy widgets, multiple analytics
6. No font optimization — invisible text or layout shifts
7. Render-blocking resources — synchronous CSS/JS in head
8. No lazy loading — loading everything upfront
9. No RUM — flying blind on real user experience
10. No performance regression testing — performance drifts over time

End of Framework Document

Companion documents:

• framework-pageexperience.md — Core Web Vitals deep dive
• framework-imageseo.md — Image-specific optimization
• framework-cdn.md — CDN strategy detail
• framework-hosting.md — Hosting selection
• framework-serverconfig.md — Server configuration