Progressive Tooling

A list of community-built, third-party tools that can be used to improve page performance

Website/GUI

Package

CI

CLI

API (Web/Server)

Framework

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

Minify images seamlessly
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
Show this project some ❤