devLap

Web performance beyond Core Web Vitals

javascript dev.to

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: "Synthetictestingincontrolledenvironment"
    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: "Realusermonitoring(RUM)ofactualvisits"
    sources: ["ChromeUserExperienceReport(CrUX)", "Self-deployedRUM"]
    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: "Labfordebugging;fieldforreality"
    monitoring_pattern: "Labduringdevelopment;fieldinproduction"
Enter fullscreen mode Exit fullscreen mode

2.2 Core Web Vitals (2026) 

core_web_vitals_2026:

  lcp_largest_contentful_paint:
    measures: "Loadingperformance"
    target: "Under2.5seconds"
    measurement_window: "75thpercentileofusers"

  inp_interaction_to_next_paint:
    measures: "Responsiveness"
    target: "Under200ms"
    measurement_window: "75thpercentile"
    note: "ReplacedFIDinMarch2024"

  cls_cumulative_layout_shift:
    measures: "Visualstability"
    target: "Under0.1"
    measurement_window: "75thpercentile"
Enter fullscreen mode Exit fullscreen mode

2.3 Additional Performance Metrics 

additional_metrics:

  ttfb_time_to_first_byte:
    measures: "Serverresponsetime"
    target: "Under800ms"
    significance: "Foundationforallsubsequentmetrics"

  fcp_first_contentful_paint:
    measures: "Firstcontentvisible"
    target: "Under1.8seconds"

  speed_index:
    measures: "Howquicklycontentvisibleduringload"
    target: "Under3.4seconds(mobile)"

  total_blocking_time:
    measures: "Mainthreadblocking"
    target: "Under200ms"

  time_to_interactive:
    measures: "Whenpagefullyinteractive"
    target: "Under3.8seconds(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: "Adequatecores;notthrottled"
    ram: "Sufficientforapplicationneeds"
    disk_io: "SSDessential;NVMepreferred"
    network: "Gigabitconnectivity"

  configuration:
    php_version: "ModernPHP8.x"
    web_server: "NginxorApache2.4+optimized"
    database: "MySQL8orMariaDB10.6+"

  scaling:
    vertical: "Moreresourcesonsameserver"
    horizontal: "Multipleservers;loadbalancing"
    auto_scaling: "Cloudproviders;scaleswithtraffic"

  joseph_setup:
    server: "Bubbles(self-managedDebian)"
    sites: "130+productionsites"
    optimization: "Resourceallocationpersite;appropriatecaching"
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%ofRAMfordedicatedDBserver"
    innodb_log_file_size: "256MB+"
    innodb_flush_method: "O_DIRECT"
    query_cache_size: "RemovedinMySQL8;useothercaching"

  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'sbrowser"
    purpose: "Repeatvisitorsdon'tre-download"
    configuration: "Cache-Controlheaders"

  cdn_cache:
    location: "CDNedgeserversglobally"
    purpose: "Geographicproximity"
    services: ["Cloudflare", "Fastly", "BunnyCDN", "KeyCDN"]

  reverse_proxy_cache:
    location: "Frontofapplicationserver"
    examples: ["Varnish", "NginxFastCGIcache"]
    purpose: "Avoidhittingapplicationforcachedresponses"

  application_cache:
    location: "Applicationmemory"
    examples: ["WordPressobjectcache", "Railscache"]
    purpose: "Cacheexpensivecomputations"

  database_query_cache:
    location: "ObjectcachebackedbyRedis/Memcached"
    purpose: "Cachedatabasequeryresults"

  cdn_origin_shield:
    location: "BetweenCDNandorigin"
    purpose: "Reduceoriginload"
    services: ["CloudflareArgo", "FastlyOriginShield"]
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: "aptinstallredis-server"
    php_extension: "aptinstallphp8.2-redis"
    plugin: "RedisObjectCacheplugin(WordPress)"

  benefits:
    - Significant database load reduction
    - Faster page generation
    - Better scalability

  configuration:
    maxmemory: "SetbasedonavailableRAM"
    maxmemory_policy: "allkeys-lru"
    persistence: "Disableforcacheuse(improvesperformance)"
Enter fullscreen mode Exit fullscreen mode

4.4 Page Cache 

page_cache_strategies:

  full_page_cache:
    pattern: "CachecompleteHTMLresponses"
    benefit: "SkipPHP/DBentirelyforcachedpages"
    invalidation: "Clearoncontentupdates"

  partial_caching:
    pattern: "Cachespecificpagesections"
    use_for: "Mostlystaticwithsomedynamicparts"

  dynamic_caching:
    pattern: "Cacheforshortperiods(1-60seconds)"
    use_for: "High-trafficdynamicsites"
    benefit: "Significantloadreductionevenondynamiccontent"

  edge_side_includes:
    pattern: "Cacheshell;insertdynamicblocks"
    technology: "VarnishESI;CloudflareWorkers"
Enter fullscreen mode Exit fullscreen mode

5. CDN Strategy

5.1 CDN Selection 

cdn_options:

  cloudflare:
    pricing: "Freetiergenerous;Pro$20/month;highertiers"
    features:
      - Global edge network
      - DDoS protection
      - WAF
      - Argo intelligent routing (paid)
      - Workers (edge compute)
      - Image optimization (paid)
      - R2 object storage
    best_for: "Mostsites;comprehensivefeatures"
    used_widely: "Industrystandardformany"

  fastly:
    pricing: "Payperusage;minimumspend"
    features:
      - Edge compute (VCL, Compute@Edge)
      - Real-time logging
      - Highly programmable
    best_for: "High-trafficsiteswithcustomneeds"

  bunnycdn:
    pricing: "Verycompetitive($1/monthminimum)"
    features:
      - Bunny Optimizer (image optimization)
      - Edge storage
      - Stream (video)
    best_for: "Cost-conscioussites"

  keycdn:
    pricing: "Competitive;pay-per-usage"
    features:
      - Strong edge network
      - Image processing
    best_for: "Cost-consciousalternative"

  vercel_netlify_built_in:
    note: "Includedwiththesehostingplatforms"
    benefit: "Integratedworkflow"
Enter fullscreen mode Exit fullscreen mode

5.2 CDN Configuration 

cdn_optimization:

  cache_rules:
    static_assets: "Cacheaggressively(1year)"
    html: "Cachebriefly(5minutes-1hour)"
    api: "Typicallynocache"
    custom: "Per-pathrules"

  ssl:
    requirement: "HTTPSviaCDN"
    options:
      flexible: "CDNtooriginviaHTTP(lesssecure)"
      full: "End-to-endHTTPS"
      strict: "End-to-endHTTPSwithorigincertificatevalidation(best)"

  page_rules_cloudflare:
    examples:
      - "Cacheeverythingfor/static/*(1year)"
      - "Bypasscachefor/admin/*"
      - "AlwaysuseHTTPS"

  performance_features:
    auto_minify: "MinifyHTML,CSS,JS"
    rocket_loader: "AsyncJavaScriptloading"
    early_hints: "HTTP103forresourcepreload"
    http2_prioritization: "Smartresourceprioritization"
    http3: "LatestHTTPversion"
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(bestcompression);WebP(broadlysupported)"
    fallback: "JPEGforphotos;PNGforgraphics"
    technique: "<picture>withmultiplesources"

  responsive_images:
    pattern: "srcsetwithappropriatesizes"
    benefit: "Loadsizematchingviewport"

  compression:
    photos: "JPEGquality75-85typically"
    graphics: "PNG-8wherecolorslimited"
    automation: "ImageMagick,sharp,build-timetools"

  lazy_loading:
    standard: 'loading="lazy"attribute'
    benefit: "Below-foldimagesloadondemand"
    first_paint_image: 'loading="eager"ornoattribute'

  cdn_image_optimization:
    services: "CloudflarePolish,BunnyOptimizer,Cloudinary,Imgix"
    benefit: "On-the-flyoptimizationatCDN"
Enter fullscreen mode Exit fullscreen mode

6.2 JavaScript Optimization 

javascript_optimization:

  minimize_total:
    rule: "LessJavaScriptisbetter"
    audit: "CoveragetabinChromeDevTools"
    remove: "Unusedlibrariesandcode"

  code_splitting:
    pattern: "Per-routeorper-featurebundles"
    framework_support: "Webpack,Rollup,esbuildbuilt-in"

  defer_and_async:
    defer: "WaituntilDOMready"
    async: "Loadasynchronously;executewhenready"
    use_for: "Non-criticalscripts"

  third_party_audit:
    audit: "Eachthird-partyscript: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: "Smallerbundlesformodernbrowsers"
    pattern: "ESmoduleswithmodule/nomodule"
Enter fullscreen mode Exit fullscreen mode

6.3 CSS Optimization 

css_optimization:

  critical_css:
    pattern: "Inlineabove-foldCSSinhead"
    benefit: "RenderwithoutwaitingforexternalCSS"
    tools: "Critical,Penthouse,buildtools"

  non_critical_async:
    pattern: "LoadmainCSSasynchronouslyafterrender"
    technique: 'rel="preload"+onloadswap'

  remove_unused:
    audit: "CoveragetabshowsunusedCSS"
    tools: "PurgeCSS,UnCSS,build-time"

  minimize_imports:
    rule: "Don'timportfullframeworksforpartialuse"
    example: "Tailwindpurgesunusedclassesbydefault"

  modern_css:
    grid_and_flex: "ReplaceJavaScriptlayouts"
    css_variables: "Reduceduplicatedvalues"
    container_queries: "Component-levelresponsive"
Enter fullscreen mode Exit fullscreen mode

6.4 Font Optimization 

font_optimization:

  font_display_swap:
    css: "font-display:swap;"
    benefit: "Showfallbackfontduringfontload;swapwhenready"
    avoid_invisible_text: "Criticalforperformancemetrics"

  preload_critical:
    pattern: '<linkrel="preload"as="font"type="font/woff2"crossorigin>'
    use_for: "Above-foldfonts"

  subset_fonts:
    benefit: "Smallerfilesizes"
    use_for: "Latin-onlysitescandropothercharactersets"

  variable_fonts:
    benefit: "Multipleweights/stylesinsinglefile"
    consideration: "Maybelargerthansingleweight"

  self_host_vs_google_fonts:
    self_host: "Betterperformance;eliminatesthird-party"
    google_fonts: "Simple;broadsupport"
    recommendation: "Self-hostforproduction"

  limit_weights:
    rule: "Useonlyweightsactuallyneeded"
    typical: "Regular+boldsufficientformostsites"
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: "ChromeDevToolsPerformance>LCPmarker"
    typical: "Heroimageorlargeheadingtext"

  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: "Alwaysincludewidthandheightattributes"
    embeds: "Reservespacewithaspectratio"

  font_loading:
    issue: "Fontswapcancauselayoutshift"
    fix: "Matchfallbackfontmetrics;usesize-adjust"

  ads_and_embeds:
    issue: "Late-loadingcontentshiftspage"
    fix: "Reservespaceproactively"

  dynamic_content:
    rule: "Don'tinsertaboveexistingcontentunlesstriggeredbyuser"
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: "Sendmetricstoyouranalytics"
    benefit: "Customdashboards"
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: "Under1MBideal;1-2MBacceptable;2MB+concerning"
    html: "Under100KB"
    css: "Under100KB"
    javascript: "Under300KB"
    images: "Variable;lazy-loadbelowfold"
    fonts: "Under100KBtotal"

  request_count_targets:
    total: "Under50ideal;50-100acceptable"
    third_party: "Under10ideal"

  metric_targets:
    lcp: "Under2.0sideal;under2.5sacceptable"
    inp: "Under100msideal;under200msacceptable"
    cls: "Under0.05ideal;under0.1acceptable"
    ttfb: "Under600msideal;under800msacceptable"
Enter fullscreen mode Exit fullscreen mode

9.2 Enforcing Budget 

budget_enforcement:

  ci_cd_integration:
    tools: "LighthouseCI,SpeedCurve,Calibre"
    pattern: "Performancetestoneverydeployment"
    fail_build: "Ifthresholdsexceeded"

  monitoring_alerts:
    pattern: "Alertwhenmetricsregress"
    sensitivity: "Thresholdbeyondnormalvariance"

  documentation:
    rule: "Documentthebudget;sharewithteam"
    review: "Quarterlybudgetreviewandadjustment"
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.

Source: dev.to

arrow_back Back to Tutorials