Web Performance Checklist
The following list outlines key Lighthouse Web Performance Recommendations that focus on optimizing page load speed and improving the overall performance of your website. These suggestions cover crucial areas such as resource optimization, rendering efficiency, and network usage, helping ensure your site provides a fast and seamless experience for users.
Page Load Optimization
Reduce Server Response Times (TTFB)
Minimize the time to first byte by optimizing server performance and reducing backend processing delays.
Eliminate Render-Blocking Resources
Defer or asynchronously load non-critical CSS and JavaScript files to prevent blocking the page’s rendering.
Enable Text Compression (gzip/Brotli)
Compress text-based resources like HTML, CSS, and JavaScript using gzip or Brotli to reduce file sizes and improve loading speed.
Preload Key Requests
Preload critical resources, such as fonts and above-the-fold images, to ensure they are fetched early and improve rendering performance.
Serve Static Assets with Efficient Cache Policy
Set appropriate caching headers for static resources to allow browsers to store them locally and reduce the need for repeated requests.
Resource Optimization
Minify CSS
Remove unnecessary characters (whitespace, comments) from CSS files to reduce their size.
Minify JavaScript
Remove unnecessary characters from JavaScript files to make them smaller and faster to download.
Eliminate Unused CSS
Identify and remove unused CSS to reduce file sizes and improve load times.
Defer Unused JavaScript
Defer JavaScript that is not essential to the initial page load to improve speed.
Serve Efficiently Encoded Images
Ensure images are compressed and served in efficient formats like WebP to reduce file size without losing quality.
Lazy-Load Offscreen Images
Load images that are not immediately visible on the page (below-the-fold) lazily to improve initial load performance.
Serve Scaled Images
Ensure images are served at appropriate resolutions for their display size to avoid unnecessary downloads.
Rendering and Layout Optimization
Improve Largest Contentful Paint (LCP)
Ensure that the largest visual element (image or text) loads quickly by optimizing its delivery and loading priority.
Reduce Total Blocking Time (TBT)
Minimize long-running tasks (e.g., heavy JavaScript execution) to ensure the page becomes interactive faster.
Reduce Cumulative Layout Shift (CLS)
Minimize unexpected layout shifts by reserving space for images, ads, and other dynamic content before they load.
Improve Time to Interactive (TTI)
Reduce the time it takes for the page to become fully interactive by optimizing resources and minimizing JavaScript execution.
Reduce Unused JavaScript
Identify and eliminate JavaScript that is not used to improve page speed and reduce unnecessary code execution.
Web Font Optimization
Preload Fonts
Preload important web fonts to ensure they load quickly and do not block text rendering.
Use Font-Display: Swap
Ensure text is visible while web fonts are loading by using font-display: swap to avoid invisible text during the load.
Use Modern Font Formats
Serve web fonts in modern formats like WOFF2 to reduce file sizes and improve load performance.
Network Optimization
Use a Content Delivery Network (CDN)
Serve resources from a Content Delivery Network (CDN) to reduce latency and improve load times, especially for users in different geographic locations.
Reduce Network Payloads
Minimize the size of resources downloaded over the network, including images, JavaScript, and CSS, to reduce the overall payload and speed up loading.
Reduce Unnecessary HTTP Requests
Combine resources, defer non-essential resources, or eliminate redundant files to reduce the number of HTTP requests.
Use HTTP/2 for Faster Resource Loading
Ensure that HTTP/2 is used for multiplexing, which allows multiple resources to be downloaded concurrently over a single connection.
Other Performance Best Practices
Avoid Redirects
Minimize the number of redirects, as they add extra steps in the request-response cycle, slowing down page load times.
Reduce JavaScript Execution Time
Optimize JavaScript to reduce the time it blocks the main thread and ensure faster page interaction.
Avoid Large JavaScript Libraries
Minimize the use of large JavaScript libraries that can slow down page load times and increase the payload.
Ensure Text is Visible During Web Font Load
Prevent invisible text while web fonts are loading by ensuring that text remains visible during font load.
Updated 3 months ago