A list of community-built, third-party tools that can be used to improve page performance
Accessibility
Visualize, audit and test accessibility parameters in your project
An accessibility visualization toolkit
CSS file that provides warnings for possible risks and mistakes and can help evaluate a site's quality
Color combination contrast tester
Automated accessibility testing using HTML CodeSniffer
Warns about potential accessibility issues with your React elements
A library of accessibility-related testing and utility code
An automated accessibility testing tool which crawls and tests pages to produce detailed reports
Performance auditing
Audit and test the performance of your web page
Run tests on actual devices with different locations, browsers, and connection speeds
An open-source auditing tool that you can use to test and improve your webpage
Track and monitor performance of webpages during ongoing development
A devtool for inspecting the performance of React Components
A devtool for inspecting the performance of Vue Components
Monitor web performance and how real users experience your site
Service by Netlify that rates your site based on its initial global load times and its security settings
An easy way to measure site performance across devices powered by WebPageTest
Get speed field data and suggestions for optimization improvements
Compare your mobile site speed with 10 other domains as well as estimate your revenue impact
Generate a node map visualization of all third-party interactions
Linting tool that can help improve accessibility, speed and more by checking for best practices
Progressive web metrics at your fingertipz
Google PageSpeed Reports sent directly to your inbox every week
A tool for speed and SEO optimization checks and guides
Bundle analysis
Analyze and measure your bundle and package sizes
Find the cost of adding a npm package to your bundle
Visual Studio Code extension that displays the size of imported packages inline
Visualize the size of webpack output files with a treemap
Visualize the size of parcel output files with a treemap
CLI dashboard for your webpack dev server
Electron Desktop GUI for Webpack Dashboard
An intelligent browser-based Webpack dashboard
An online visualization tool for webpack bundles
Analyze and debug code bloat through source maps
Tool to help you find source code duplication across your javascript chunks/splits
Tool for monitoring webpack optimization metrics through the development process
Interactive pie chart for webpack stats
Bundle budgeting
Set up budgets to keep your bundle sizes in check
Keep an eye on your bundle size through a CI hook
Prevent library bloat by having error checks when including large dependencies
Automatically track the size of your build artifacts with a CircleCI integration
Image optimization
Optimize and compress images
Reduce JPEG file sizes while retaining quality and compatibility
Save disk space & bandwidth by compressing images without losing quality
A GUI tool for losslessly optimizing PNG and JPG files
A free tool for optimizing JPEG and PNG files
Video optimization
Optimize and compress videos
Convert videos from live sources and resize them on the fly
Lazy loading
Asynchronously load elements (DOM nodes, images, components or routes) when needed
Higher order component for loading components with dynamic imports
A fast, flexible, and small image lazy loader
High performance and SEO friendly lazy loader for images, iframes and more
Detect if a DOM element intersects with another element such as the document viewport
Split bundles for lazy loading using entry points or dynamic imports
Use dynamic imports to split application code into separate bundles
Service Worker
Cache static or dynamic assets for offline support using service workers
Set of tools that simplify process of caching assets
Tiny JavaScript library that makes sure your users can always access your site's content
A webpack plugin that uses ServiceWorker (and AppCache) to provide an offline experience
Node module to generate a ServiceWorker that will precache specific resources
Collection of service worker tools for offlining runtime requests
Flash of invisible/unstyled text
Tools to minimize unstyled/invisible text rendered to the web page while external styles are still being fetched
Minimize flash of unstyled text by comparing between a fallback and an intended font
Track download progress and define lazy loading behavior of font faces
Control how a font is displayed while it is still being fetched
A fast and simple web font loader
Server-side rendering/pre-rendering
Send down static HTML to improve perceived load times and SEO
Universal javascript support for Angular
Zero-configuration framework-agnostic static prerendering for SPAs
React.js server-side rendering optimization with component memoization and templatization
Create a Preact PWA quickly with built-in pre-rendering
Add server-side rendering capabilities to a web server using Headless Chrome
Data Analytics
Tools that use analytics or machine learning models to improve user experience
Libraries and tools for enabling data-driven user-experiences on the web