Web performance beyond Core Web Vitals

Originally published atPart of ThatDevPro's open SEO + AI framework library.[thatdevpro.com].[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"

2.2 Core Web Vitals (2026)

core_web_vitals_2026:

  lcp_largest_contentful_paint:
    measures: " 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

worker_processes auto;
worker_rlimit_nofile 65535;

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

http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    keepalive_timeout 30;
    keepalive_requests 100;

    client_body_buffer_size 16k;
    client_max_body_size 100m;
    client_header_buffer_size 1k;
    large_client_header_buffers 4 8k;

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

    http2_push_preload on;
}

3.3 PHP-FPM Optimization

; 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

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

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

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_: "Async JavaScript "
    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_:
    standard: '="lazy" attribute'
    benefit: "Below-fold images load on demand"
    first_paint_image: '="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 
      - CDN delivery
      - Render server-side

    text_lcp:
      - Optimize font 
      - 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_:
    issue: "Font swap can cause layout shift"
    fix: "Match fallback font metrics; use size-adjust"

  ads_and_embeds:
    issue: "Late- 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 #

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

Cheap shared hosting— bottleneck regardless of optimization - No CDN— slow for distant users - No caching layers— every request hits database - Image bloat— unoptimized images dominate page weight - Third-party script overload— heavy widgets, multiple analytics - No font optimization— invisible text or layout shifts - Render-blocking resources— synchronous CSS/JS in head - **No lazy **— everything upfront - No RUM— flying blind on real user experience - 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.

source & further reading

dev.to — original article You Can't Secure What You Can't See: Shadow AI and the Inventory Problem An MCP Context Contract for Android Automation Drafts Do we really need Fable 5?