Web performance beyond Core Web Vitals

This article provides a comprehensive framework for web performance optimization that extends beyond Google's Core Web Vitals, covering server configuration, CDN strategy, caching layers, and resource optimization across the full stack. It emphasizes that performance directly impacts search rankings, conversion rates, and AI engine crawl frequency, while distinguishing between lab-based testing (like Lighthouse) and real-user field data (like CrUX) for accurate measurement. The guide also includes specific technical recommendations for hosting infrastructure, such as using modern PHP versions, SSD storage, and optimized Nginx configurations, illustrated through a case study of managing 130+ sites on self-managed Linux servers.

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: "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 js 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 loading — loading 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 https://www.thatdevpro.com/services/engine-optimization/ or hire via contact https://www.thatdevpro.com/contact/ .