1Convert all non-critical scripts to async/defer to eliminate render-blocking resources
2Add loading="lazy" to below-the-fold images to improve initial page load
3Convert images to WebP or AVIF format for 30–50% file size reduction
4Use srcset and sizes attributes on images to serve appropriately sized images per device
5Add explicit width and height to all images to prevent Cumulative Layout Shift (CLS)
6Add <link rel="preconnect"> for critical third-party domains to reduce DNS lookup time
7Preload critical resources (fonts, hero images) with <link rel="preload">
8Add font-display: swap to web font declarations to show fallback text while fonts load
9Set Cache-Control headers with appropriate max-age to leverage browser caching
10Extract inline styles into external CSS files for better caching and maintainability
11Move inline scripts to external files with defer attributes
12Reduce CSS payload with PurgeCSS, tree-shaking unused styles, and critical CSS inlining. Aim for <200KB total CSS
13Reduce JavaScript with code splitting, tree shaking, and lazy loading. Target <500KB total JS for optimal performance
14Reduce links per page to improve DOM parsing performance and reduce memory usage
15Upgrade to HTTP/2 or HTTP/3 for faster parallel resource loading and header compression
16Use a Content Delivery Network (CDN) like Cloudflare, CloudFront, or Fastly to reduce global latency
17Add preconnect, prefetch, and preload hints for critical third-party resources and fonts
18Reduce render-blocking CSS by inlining critical CSS, using media queries on non-critical stylesheets, and loading non-critical CSS asynchronously
19Reduce CSS bundle size with PurgeCSS/tree-shaking. Aim for <200KB total CSS
20Reduce JS bundle with code splitting, tree shaking, and dynamic imports. Target <500KB initial JS
21Review large inline/external scripts that may block the main thread. Use web workers or break into smaller async chunks
22Critical LCP issue: preload LCP image with fetchpriority="high", inline critical CSS, reduce server response time, eliminate render-blocking scripts
23Reduce CLS: set image dimensions, preload web fonts, reserve space for ads and dynamic content
24Improve INP: break up long JavaScript tasks, use web workers for heavy computation, debounce input handlers
25Upgrade analytics: add Google Tag Manager for flexible tag deployment and configure custom events (form submissions, CTA clicks, scroll depth)
26Reduce DOM node count to under ~1,500 by simplifying markup and paginating long lists (Lighthouse best practice) [Impact: Medium | Effort: Medium]
27Minify JavaScript to reduce parse and transfer time [Impact: Low | Effort: Low]
28Set a Cache-Control header with an appropriate max-age (and immutable for versioned assets) to enable browser caching [Impact: Medium | Effort: Low]
29Add width and height attributes (or CSS aspect-ratio) to every image to reserve space and prevent layout shift [Impact: Medium | Effort: Low]
30Performance: no Speculation Rules API detected. Add <script type="speculationrules"> to prerender/prefetch likely next navigations for near-instant page transitions.
31Performance (LCP): no image declares fetchpriority="high". Mark the LCP hero image with fetchpriority="high" so the browser prioritizes it during initial load.
32Performance: only 0/22 images set decoding="async". Add decoding="async" to non-critical images to keep image decode off the main thread.
33Performance: ES modules are used without modulepreload. Add <link rel="modulepreload"> for critical modules to remove waterfall latency on module graphs.