Website Performance Checklist

Largest Contentful Paint (LCP)

Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

• Optimize server response times
• Remove render-blocking resources
• Optimize and compress images
• Minify and defer non-critical CSS/JavaScript
• Implement proper resource prioritization

First Input Delay (FID)

Measures interactivity. Pages should have a FID of 100 milliseconds or less.

• Break up Long Tasks
• Optimize your page for interaction readiness
• Use a web worker for complex operations
• Reduce JavaScript execution time
• Minimize main thread work

Cumulative Layout Shift (CLS)

Measures visual stability. Pages should maintain a CLS of 0.1 or less.

• Include size attributes for images and videos
• Reserve space for ads, embeds, and iframes
• Avoid inserting content above existing content
• Preload fonts to prevent FOIT/FOUT
• Use transform animations instead of those triggering layout changes

• Use modern image formats (WebP, AVIF)
• Implement responsive images using srcset and sizes attributes
• Compress images without sacrificing quality
• Lazy load images below the fold
• Consider using image CDN services
• Properly size images to avoid unnecessary downloads
• Use appropriate image dimensions for different devices
• Add width and height attributes to prevent layout shifts

JavaScript

• Minify and compress JavaScript files
• Use code splitting to load only what's needed
• Defer non-critical JavaScript
• Reduce JavaScript bundle size
• Use tree shaking to eliminate dead code
• Consider using Intersection Observer for lazy loading
• Optimize third-party scripts loading

CSS

• Minify and compress CSS files
• Remove unused CSS
• Use CSS containment to improve rendering performance
• Inline critical CSS
• Load non-critical CSS asynchronously
• Reduce complexity of selectors
• Minimize CSS frameworks if not fully utilized

HTML

• Minify HTML
• Use semantic HTML elements
• Remove unnecessary markup and comments
• Implement proper heading hierarchy
• Optimize DOM size (keep it under 1500 nodes if possible)
• Use native lazy loading with loading="lazy" for images and iframes

• Enable HTTP/2 or HTTP/3
• Implement effective browser caching policies
• Use a Content Delivery Network (CDN)
• Enable GZIP or Brotli compression
• Reduce server response time (TTFB under 200ms)
• Consider using service workers for offline capabilities
• Implement resource hints (preload, prefetch, preconnect)
• Optimize critical rendering path
• Consider serverless architectures for scalability

• Audit and minimize third-party scripts
• Load third-party scripts asynchronously or defer them
• Self-host third-party scripts when possible
• Use resource hints for third-party domains
• Implement proper timeout handling for third-party resources
• Consider using Tag Managers to control script loading
• Regularly review and remove unused third-party services

• Ensure responsive design implementation
• Optimize tap targets (minimum 48x48px)
• Eliminate render-blocking resources on mobile
• Prioritize above-the-fold content on mobile
• Implement AMP (Accelerated Mobile Pages) if appropriate
• Test on actual devices, not just emulators
• Optimize for poor connectivity conditions
• Design with thumb-friendly navigation in mind

• Implement Real User Monitoring (RUM)
• Set up regular performance testing
• Track Core Web Vitals with Google Search Console
• Monitor server response times
• Track performance impact on business metrics
• Set up alerts for performance regressions