Web Performance Optimization Audit

You are a web performance consultant who has optimized high-traffic applications to achieve excellent Core Web Vitals scores and sub-second loading times. Conduct a comprehensive performance audit and create an optimization plan for the following application.

Application Details:
Application URL: [URL OR DESCRIPTION]
Framework: [NEXT.JS/REACT SPA/VUE/ANGULAR/ASTRO/OTHER]
Current LCP: [CURRENT LARGEST CONTENTFUL PAINT TIME]
Current FID/INP: [CURRENT INTERACTION TO NEXT PAINT TIME]
Current CLS: [CURRENT CUMULATIVE LAYOUT SHIFT SCORE]
Hosting: [VERCEL/AWS/CLOUDFLARE/OTHER]
Traffic Volume: [MONTHLY PAGE VIEWS]

Section 1 - Core Web Vitals Diagnosis:
Analyze the Largest Contentful Paint by identifying the LCP element on key pages and diagnosing whether the bottleneck is server response time, resource load delay, resource load duration, or element render delay. Investigate the Interaction to Next Paint score by identifying the slowest interactions and determining whether the delay comes from input delay due to long tasks, processing time in event handlers, or presentation delay from expensive re-renders and layout thrashing. Evaluate the Cumulative Layout Shift by identifying all layout shift sources including images without dimensions, dynamically injected content, web fonts causing FOIT or FOUT, and third-party embeds that resize after loading. Create a prioritized remediation plan that maps each Core Web Vital issue to specific fixes ranked by impact and implementation effort. Address the difference between lab data from Lighthouse and field data from Chrome User Experience Report and how to use both for a complete picture.

Section 2 - Bundle Size and JavaScript Optimization:
Conduct a bundle analysis using tools like webpack-bundle-analyzer or source-map-explorer to identify the largest dependencies, duplicated packages, and unused code that should be tree-shaken or removed. Define the code splitting strategy specifying route-based splits, component-level lazy loading for heavy components like charts and editors, and dynamic imports for conditional features. Create the third-party script management plan categorizing external scripts by their business value and performance cost with strategies to defer, lazy load, or replace heavy scripts with lighter alternatives. Specify the JavaScript execution optimization approach including breaking up long tasks using scheduler.yield or setTimeout, moving heavy computation to Web Workers, and deferring non-critical initialization. Address the modern JavaScript delivery strategy using module/nomodule pattern or differential serving to send smaller bundles to modern browsers while maintaining compatibility.

Section 3 - Rendering and Critical Path Optimization:
Design the critical rendering path optimization starting with identifying and inlining critical CSS required for above-the-fold content while deferring the remaining stylesheets. Specify the font loading strategy including using font-display swap or optional, preloading critical font files, subsetting fonts to reduce file sizes, and using system font fallbacks with size-adjust to minimize layout shift. Create the image optimization plan covering format selection between WebP and AVIF, responsive images using srcset and sizes attributes, lazy loading with the native loading attribute, and placeholder strategies using blur-up or solid color techniques. Define the server-side rendering strategy including which pages benefit from SSR versus static generation versus client-side rendering and how to implement streaming SSR for progressive page hydration. Address the preloading and prefetching strategy using link rel preload for critical resources, rel prefetch for likely next navigations, and the fetchpriority attribute for signaling resource importance to the browser.

Section 4 - Network Performance and Caching:
Design the caching architecture defining Cache-Control headers for different resource types including immutable hashes for static assets, stale-while-revalidate for API responses, and no-cache for dynamic HTML pages. Specify the CDN configuration including edge caching rules, geographic distribution requirements, and cache purging strategies for content updates. Create the API performance optimization plan including request batching, response compression, pagination strategies, and GraphQL query complexity limits if applicable. Define the service worker caching strategy for repeat visitors including which resources to precache, which to cache on first use with a network-first or cache-first strategy, and how to handle cache updates gracefully. Address the connection optimization techniques including DNS prefetching for third-party domains, preconnecting to critical origins, and using HTTP/2 or HTTP/3 server push where beneficial.

Section 5 - Runtime Performance and Memory Management:
Define the rendering performance guidelines including avoiding forced synchronous layouts, batching DOM reads and writes, using CSS containment to limit browser layout scope, and leveraging content-visibility auto for off-screen content. Specify the animation performance standards requiring all animations to run on the compositor thread using transform and opacity properties and using the Web Animations API or CSS transitions instead of JavaScript animation loops. Create the memory leak detection and prevention plan covering common React memory leaks from uncleared intervals and subscriptions, detached DOM nodes, and growing event listener lists. Design the scroll performance optimization approach including passive event listeners, intersection observer for scroll-triggered effects, and virtual scrolling for long lists. Address the monitoring approach for tracking long tasks, total blocking time, and main thread utilization in production using the Performance Observer API.

Section 6 - Performance Monitoring and Budget Enforcement:
Define the performance budget specifying maximum values for total page weight, JavaScript bundle size, number of requests, LCP time, INP time, and CLS score for different page types. Specify the real user monitoring setup using tools like web-vitals library, Vercel Analytics, or SpeedCurve for continuous field data collection segmented by device type, connection speed, and geography. Create the synthetic monitoring configuration running Lighthouse CI on every pull request to catch performance regressions before they reach production. Design the alerting strategy that notifies the team when performance metrics degrade beyond acceptable thresholds including the escalation process for persistent regressions. Address how to establish a performance culture including making performance data visible in dashboards, including performance review in the definition of done for features, and celebrating performance improvements.