DEV Community

Joseph Anady
Joseph Anady

Posted on • Originally published at thatdevpro.com

Web performance beyond Core Web Vitals

#webdev #performance #javascript #caching

Originally published at thatdevpro.com. Part of ThatDevPro's open SEO + AI framework library. ThatDevPro is an SDVOSB-certified veteran-owned web + AI engineering studio. Open-source AI citation toolkit: github.com/Janady13/aio-surfaces.

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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)"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

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)"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

10. Audit Mode

# Criterion Pass/Fail
PF1 Core Web Vitals targets met (75th percentile)
PF2 TTFB under 800ms
PF3 Hosting appropriate for traffic
PF4 CDN configured and active
PF5 Object cache (Redis) running
PF6 Page cache configured
PF7 Browser cache headers correct
PF8 Images optimized (modern formats, compression, lazy)
PF9 JavaScript minimized and deferred
PF10 CSS optimized (critical inline; rest async)
PF11 Fonts optimized (display swap; preload critical)
PF12 Third-party scripts audited and minimized
PF13 Database optimized
PF14 RUM data collected and monitored
PF15 Performance budget defined
PF16 Regression testing in CI/CD

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

About this framework library

Dev.to republish of a framework from ThatDevPro's SEO + AI engineering library. Canonical source: https://www.thatdevpro.com/insights/framework-performance/

ThatDevPro is an SDVOSB-certified veteran-owned web + AI engineering studio. Need this framework implemented? See the Engine Optimization service or hire via contact.

Top comments (0)