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"

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"

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

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"

# 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;
}

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

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

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

# 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";
}

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

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"

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"

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"

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"

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"

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"

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"

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

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

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"

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"

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

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"

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"