Performance Tools

Web performance directly impacts user experience, conversion rates, and search engine rankings. Google has made performance a ranking factor through Core Web Vitals, and studies consistently show that even 100ms of additional latency reduces conversion rates measurably. The good news is that the performance tooling ecosystem is excellent — most of the best tools are free, and they provide actionable guidance for improving speed. This lesson covers the essential tools for measuring, analyzing, and optimizing web performance.

Measurement and Auditing

Lighthouse

Pricing: Free, open-source — Platform: Chrome DevTools, CLI, Node.js module

Lighthouse is Google's open-source auditing tool, built directly into Chrome DevTools. It provides a performance score from 0 to 100 based on key metrics including First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), and Speed Index. Each audit includes the measured value, the expected threshold, and specific recommendations for improvement.

Lighthouse simulates a mid-tier mobile device on a throttled connection by default, which gives you a realistic picture of how your site performs for the majority of users — not just those on fast laptops with fiber connections. The CLI version (lighthouse-ci) integrates into CI/CD pipelines, allowing you to set performance budgets and fail builds when regressions occur.

Best use cases

• Quick performance checks during development (Chrome DevTools)
• CI/CD performance budgets and regression detection
• Comprehensive audits covering performance alongside accessibility and SEO
• Generating shareable performance reports for stakeholders

PageSpeed Insights

Pricing: Free — Platform: Web

PageSpeed Insights (PSI) combines Lighthouse lab data with Chrome User Experience Report (CrUX) field data. Lab data shows how your page performs in a controlled environment, while field data shows how real users actually experience your site. This combination is powerful because lab tests can miss issues that only appear with real-world network conditions, device diversity, and user behavior patterns.

PSI provides Core Web Vitals assessment based on the 75th percentile of real user data. If your site has enough traffic, you will see field data showing whether you pass or fail each Core Web Vital metric. This is the same data Google uses for its ranking signal, making PSI essential for understanding your SEO-relevant performance.

Best use cases

• Checking Core Web Vitals against real user data
• Understanding the gap between lab and field performance
• Quick checks without installing any tools
• Sharing performance data with non-technical stakeholders

WebPageTest

Pricing: Free (public instances); paid private instances — Platform: Web, API

WebPageTest provides the most detailed performance analysis available. Its waterfall charts show every resource your page loads, the exact timing of each request, and the dependencies between resources. You can test from multiple geographic locations, on real devices, with various connection speeds, and see filmstrip views showing exactly what the user sees at each point during loading.

WebPageTest's advanced features include multi-step scripting (test a login flow, then measure the dashboard), video comparison (visually compare two pages side by side), and content breakdown analysis (how much of your page weight is JavaScript vs. images vs. fonts). The waterfall chart alone makes WebPageTest indispensable for diagnosing complex performance issues.

Best use cases

• Detailed waterfall analysis for diagnosing loading bottlenecks
• Testing from specific geographic locations and connection speeds
• Visual comparison of performance before and after optimizations
• Analyzing resource loading priorities and dependencies

Chrome DevTools Performance Panel

Pricing: Free, built into Chrome — Platform: Chrome

The Chrome DevTools Performance panel provides a timeline recording of everything that happens during page load or user interaction. It shows the main thread activity (JavaScript execution, style calculation, layout, paint), network activity, frame rendering, and memory usage all in a single, synchronized view.

The flame chart visualization makes it easy to identify long tasks that block the main thread, functions that take too long to execute, and layout thrashing caused by reading and writing DOM properties in a loop. The Performance panel is the go-to tool for diagnosing JavaScript performance issues, jank during scrolling, and runtime performance problems that Lighthouse cannot detect.

Best use cases

• Identifying long JavaScript tasks that block the main thread
• Diagnosing layout thrashing and forced reflows
• Analyzing runtime performance during user interactions
• Debugging scrolling jank and animation performance

Monitoring and Measurement Libraries

web-vitals

Pricing: Free, open-source — Platform: npm package (JavaScript)

web-vitals is a tiny JavaScript library (under 2 KB) maintained by Google that measures Core Web Vitals in the browser. It provides functions to measure Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), Interaction to Next Paint (INP), First Contentful Paint (FCP), and Time to First Byte (TTFB) from real user sessions.

By integrating web-vitals into your site, you can collect real user monitoring (RUM) data and send it to your analytics platform. This gives you field data that reflects actual user experience, including the long tail of slow connections and underpowered devices that lab tests do not capture.

Best use cases

• Collecting real user performance metrics (RUM)
• Monitoring Core Web Vitals in production
• Sending performance data to analytics platforms (Google Analytics, custom dashboards)
• Detecting performance regressions that only appear in the field

GTmetrix

Pricing: Free tier (limited tests); paid plans from $14.95/month — Platform: Web

GTmetrix provides performance reports that combine Lighthouse data with its own analysis. It offers a clear, visual breakdown of your page's performance including a waterfall chart, page size analysis, and Core Web Vitals metrics. GTmetrix also provides monitoring — you can schedule regular tests and receive alerts when performance degrades.

The free tier allows testing from a limited number of locations, while paid plans add more test locations, higher test frequency, and the ability to test on mobile devices. GTmetrix reports are clean and shareable, making them useful for communicating performance issues to stakeholders.

Best use cases

• Regular performance monitoring with alerts
• Clean, shareable performance reports for clients or stakeholders
• Quick performance overview without digging into DevTools
• Tracking performance trends over time

Optimization Tools

Bundlephobia

Pricing: Free — Platform: Web

Bundlephobia shows the size and download time of any npm package before you install it. Enter a package name and instantly see the minified size, gzipped size, download time on slow 3G, and how the package compares to alternatives. It also shows whether the package supports tree shaking (allowing bundlers to remove unused code).

Bundlephobia is invaluable for making informed decisions about dependencies. Before adding a new library, check its size impact. A 50 KB utility library might not seem large, but on a slow mobile connection it adds real load time. The composition view shows the size of a package's dependencies, revealing hidden bloat.

Best use cases

• Evaluating the size impact of npm packages before installing
• Comparing alternative packages to choose the lightest option
• Identifying which dependencies are contributing most to bundle size
• Checking tree-shaking support for existing dependencies

Squoosh

Pricing: Free, open-source — Platform: Web, CLI

Squoosh is Google's image compression tool that lets you compare different formats and quality settings side by side. It supports modern formats like WebP and AVIF alongside JPEG and PNG. The visual comparison slider shows you exactly how much quality you lose at each compression level, making it easy to find the sweet spot between file size and visual quality.

Images are typically the largest assets on a web page. Squoosh can reduce image sizes by 50–90% with minimal visual quality loss, making it one of the highest-impact optimization tools available. The CLI version can be integrated into build pipelines for automated image optimization.

Best use cases

• Compressing images before adding them to your project
• Converting images to modern formats (WebP, AVIF)
• Comparing quality and size tradeoffs visually
• Batch image optimization in build pipelines (CLI)

ImageOptim

Pricing: Free, open-source — Platform: macOS

ImageOptim is a macOS application that optimizes images by removing unnecessary metadata (EXIF data, color profiles, thumbnails) and applying lossless compression. Simply drag images onto the app and it compresses them in place. It supports JPEG, PNG, GIF, and SVG, and typically achieves 20–60% file size reduction with zero visual quality loss.

Best use cases

• Lossless optimization of images before committing to your repository
• Batch processing image assets on macOS
• Stripping metadata from images (privacy and size benefits)

CodeFrog

Pricing: $99/year — Platform: Desktop app (Mac and Windows)

CodeFrog includes page size testing as part of its mega report, measuring total page weight and identifying oversized assets. It checks for uncompressed resources, large images, and excessive JavaScript that contribute to slow load times. Combined with its accessibility, security, and SEO audits, CodeFrog provides a complete picture of page quality including performance considerations.

Best use cases

• Identifying oversized assets and uncompressed resources
• Getting performance context alongside other quality metrics
• Testing page size for localhost development servers