User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Web Performance Optimization

A curated list of Web Performance Optimization. Everyone can contribute here!

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Dec. 1, 2020, 9:07 p.m.

Thank you davidsonfellipe & contributors
View Topic on GitHub:
davidsonfellipe/awesome-wpo

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Books

Rick Viscomi, Andy Davies, Marcel Duran

Case studies

Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.

Documentation

A collaborative guide about frontend performance.

The list includes 35 best practices divided into 7 categories, created by Yahoo! Exceptional Performance team.

Conferences

At Velocity, web operations, performance, and DevOps professionals learn to build fast, resilient, and highly available sites and apps.

Analyzers

Uses PhantomJS to headlessly analyze web pages and generate manifests.

890
105
8y 9m
n/a

Automated auditing, performance metrics, and best practices for the web.

21.2K
7.44K
1d
Apache-2.0

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

2.13K
384
6y 8m
BSD-3-Clause

Grunt WebPageTest plugin for measure with time

36
3
2y 16d
MIT

Test web page performance using the YSlow library invoked by a grunt task

92
15
6y 12d
MIT

Grunt task for performance budgeting.

861
43
10m
MIT

Web Tracing Framework libraries and extensions.

2.6K
228
1y 0d
BSD-3-Clause

Load and performance benchmark tool

1.94K
234
4m
LGPL-2.1

Collect performance metrics for your library/application.

1.86K
46
2y 7m
MIT

Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.

DebugBear is a site monitoring tool based on Lighthouse. See how your scores and metrics changed over time, with a focus on understanding what caused each change. DebugBear is a paid product with a free 30-day trial.

The PageSpeed family of tools is designed to help you optimize the performance of your site. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.

YSlow for PhantomJS also introduces new output formats for automated test frameworks: TAP (Test Anything Protocol) and JUnit.

Online quick and easy tool that audits frontend bad practices, reveals performance issues and profiles JavaScript.

A web performance optimization and analysis tool.

Test your site to see if it follows the Google guidelines for speed.

Compare size of a page to a compressed image of the same page

Speedrank monitors the performance of your site in the background. It displays Lighthouse reports over time and delivers recommendations for improvement. Speedrank is a paid product with 14-day-trial.

Analyzers - API

Node.js wrapper for phantomjs yslow.js (see: http://yslow.org/phantomjs/).

9
6
5y 16d
n/a

PageSpeed Insights Reporting for Node

3.02K
137
85d
Apache-2.0

Bundle Analyzer

Keep your bundle size in check

4.04K
199
28d
MIT

Analyze and debug space usage through source maps

3.04K
96
5d
Apache-2.0

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

10.49K
388
1d
MIT

📊 Analyzing bundles created by Lasso js.

2
1
5m
MIT

Prepare compressed versions of assets to serve them with Content-Encoding

1.19K
92
20d
MIT

Helps you find the performance impact of adding an npm package to your frontend bundle.

Visualise the module tree of browserify project bundles and track down bloat.

Check your webpack bundle stats on every pull request, and track them over time.

Benchmark - CSS

Archived. Derping around with measuring CSS performance.

581
26
3y 5m
MIT

Benchmark - JavaScript

Simple, easy, javascript benchmark testing

170
14
10y 100d
n/a

A caffeine driven, simplistic approach to benchmarking.

541
36
4y 9m
n/a

Navigation Timing API measurement helpers

1.5K
123
8m
n/a

JavaScript Performance Monitor

6.8K
1.07K
8m
MIT

JavaScript inheritance performance tests done right

1
0
5y 7m
n/a

minimal monitor for JS Heap Size via performance.memory

2.03K
114
5y 5m
n/a

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

A robust benchmarking library that works on nearly all JavaScript platforms, supports high-resolution timers, and returns statistically significant results.

Benchmark - PHP

Realtime benchmarks for PHP code

49
4
1y 43d
Apache-2.0

Benchmarking PHP, the easy way

12
1
5y 10m
n/a

Bookmarklets

Front-end performance heatmap bookmarklet.

3.81K
142
3y 6m
n/a
556
55
7y 5d
n/a

Performance-Bookmarklet helps to analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - requests by type, domain, load times, marks and more. Sort of a light live WebPageTest.

986
83
4m
MIT

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

CSS Stress is a Testing and Performance Profiling.

CDN

A free, fast, and reliable Open Source CDN for npm and GitHub

3.5K
1.94K
52d
MIT

A content delivery network that uses next-gen tech to deliver a fast, reliable, CDN services

A state of the art opensource CDN with aggressive content optimization using brotli-11 compression, HTTP/2 server push, better HTTP/2 multiplexing, and more. Supports 100s of libraries and 2000+ WordPress themes already. Easy to use, easy to link and very fast.

Google Hosted Libraries is a content distribution network for the most popular, open-source JavaScript libraries.

An open source CDN for JavaScript and CSS sponsored by CloudFlare that hosts everything from jQuery and Modernizr to Bootstrap.

jQuery CDN – Latest Stable Versions, powered by MaxCDN.

CDN provided by upyun.

Bootstrap Chinese net open CDN service (only HTTP).

Yandex Content Delivery Network hosts popular third party JavaScript and CSS libraries (best for use in Russia).

CDN - Monitor

finds you fast and reliable JavaScript CDNs that make your sites snappy and happy.

CDN - Utilities

[DEPRECATED] Prepend cdn urls to your html and css

25
1
4y 22d
MIT

Replaces script references with Google CDN ones

79
8
1y 107d
MIT

Extensions

The easiest way to measure your performance budget

126
7
4y 6m
n/a

Image Optimizers

Grunt task to optimize images using reSmush.it

87
19
4y 8m
MIT

Gulp plugin to optimize PNG and JPG using reSmush.it.

33
1
4y 8m
n/a

Minify images seamlessly

4.41K
237
113d
MIT

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.

18.29K
924
16d
Apache-2.0

GraphicsMagick for node

6.28K
592
2y 11m
n/a

A curated list of amazingly awesome Elixir and Erlang libraries, resources and shiny things. Updates:

10.36K
1.02K
11d
n/a

Minify PNG, JPG, GIF and SVG images.

1.22K
178
8m
MIT

Minify PNG, JPEG, GIF and SVG images

1.81K
159
114d
MIT

Convert your images to WebP format.

119
16
6y 50d
MIT

Convert images to WebP

183
14
1y 60d
MIT

Make ImageOptim, ImageAlpha and JPEGmini part of your automated build process

487
20
1y 4m
n/a

Make optimisation of images part of your automated build process

3.08K
109
1y 29d
MIT

CLI bash script to optimize images in parallel easily and efficiently!

13
3
4m
GPL-3.0

Improved JPEG encoder.

4.33K
367
10d
n/a

jpegoptim - utility to optimize/compress JPEG files

999
79
6m
n/a

Zopfli Compression Algorithm is a compression library programmed in C to perform very good, but slow, deflate or zlib compression.

2.86K
270
7d
Apache-2.0

lightweight lossless file minifier/optimizer

674
66
7d
MIT

CLI image optimization tool

545
14
33d
MIT

Smush it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a "lossless" tool, which means it optimizes the images without changing their look or visual quality.

GUI app to remove exif metadata from images and video files with drag and drop. Free and open source.

OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information.

Free app that makes images take up less disk space and load faster, without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles.

Advanced lossy compression for PNG images that preserves full alpha transparency.

Optimize your images and will be available for download for 12 hours.

Online image compressor for JPG, PNG, SVG and GIF.

One-click optimization for images in your GitHub repos

Recompress PNG files to get the smallest possible size.

A cross-platform tool for losslessly optimizing PNG and JPG files.

Cloud service for optimizing, resizing and caching images on the fly with great mobile support.

Intelligent real-time image optimizations, image transformations with a global delivery network and storage.

Lazyloaders

Lazyload images, iframes, widgets with a standalone JavaScript lazyloader

940
154
6m
MIT

🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more

6.53K
427
9d
MIT

Loaders

The only script in your HEAD.

4.19K
387
7y 1d
MIT

Async Everything: Make the meat of your pages load faster with this JS morsel

68
10
8y 4m
n/a

InstantClick makes following links in your website instant.

5.34K
276
3y 8m
MIT

JIT(Just In Time) plugin loader for Grunt.

510
34
4y 9m
n/a

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node.js.

is an open-source (MIT license) project supported by Getify Solutions. The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time.

Metrics Monitor

Headless Chromium-based web performance metrics collector and monitoring tool

2.16K
154
2d
BSD-2-Clause

Benchmark a web page and display results with a pretty UI.

25
4
5y 75d
n/a

A model driven framework for the evaluation web page performance

99
14
2y 8m
n/a

Grunt plugin wrapping phantomas to measure frontend performance

291
25
3y 10m
MIT

open source tool that helps monitor various site performance metrics over time. It captures the results of YSlow, Page Speed Insights, WebPageTest and dynaTrace Ajax Edition.

GTmetrix uses Google Page Speed and Yahoo! YSlow to grade your site's performance and provides actionable recommendations to fix these issues.

Free site and SSL Monitoring with response time alerting (on Slack, Twitter, Mattermost, Discord or custom Webhook).

Test the load time of that page, analyze it and find bottlenecks.

analyze your website's speed in real browsers from 20 locations worldwide.

Run a free site speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

Sitespeed.io is an open source tool that will check your site against web performance best practice rules and use the Navigation Timing API to collect metrics. It will create XML & HTML output of the result.

Runtime Browser Performance regression suite (Demo).

Continually checks web page load times in Internet Explorer, Chrome and Firefox from multiple points around the world.

Monitor your browser-side applications in real time, with a focus on real end users’ experiences.

Real Browser Monitoring. Offers complete reports about web performance and quality using YSlow, Page Speed and numerous custom tips.

Metrics Monitor - API

WebPageTest API wrapper for NodeJS

1.51K
163
5m
MIT

Minifiers - HTML

HTML minifier for Python frameworks (not only Django, despite the name).

492
70
9m
BSD-2-Clause

Javascript-based HTML compressor/minifier (with Node.js support)

4.32K
567
1y 8m
MIT

Minify HTML.

431
67
1y 38d
MIT

Minify HTML

717
62
2y 86d
MIT

grunt plugin for html compression, using htmlcompressor.jar

36
5
6y 11m
MIT

Ruby wrapper for kangax html-minifier

10
6
7y 12m
n/a

🚨 [deprecated] Ruby gem for compressing html

35
7
7y 6m
MIT

minify HTML responses like some crazy guy

26
4
4m
MIT

Minimize HTML

149
21
2y 10m
MIT

A simple command line tool to minify your HTML, Razor views & Web Forms views

123
46
1y 48d
MIT

A HTML min tool by kangax (HTMLMinifier Creator).

Minifiers - JS & CSS

YUI Compressor

2.92K
660
1y 6m
n/a

JavaScript parser / mangler / compressor / beautifier toolkit

11.13K
1.16K
3d
n/a

CSS minifier with structural optimizations

3.2K
192
6d
MIT

YUI Compressor

76
40
9y 88d
n/a

Concatenate files.

808
176
4y 7m
MIT

Minify files with UglifyJS.

1.47K
369
4m
MIT

Fast and efficient CSS optimizer for node.js and the Web

3.64K
299
14d
MIT

Compresses linked and inline javascript or CSS into a single cached file.

2.39K
560
30d
n/a

Pipeline is an asset packaging library for Django.

1.38K
350
108d
MIT

Javascript Minifier built in PHP

631
128
2d
BSD-3-Clause

CSS minifier

1.07K
90
6y 5m
n/a

A grunt wrapper for CSS Shrink

26
4
4y 9m
MIT

Shrinks CSS files using cssshrink

22
0
4y 8m
n/a

Prettify or uglify CSS code

7
1
6y 5m
n/a

Compress CSS files.

794
152
79d
MIT

A grunt task for removing unused CSS from your projects.

3.87K
183
15d
MIT

DEPRECATED. Remove unused CSS selectors.

969
44
3y 4m
MIT

The most minimalistic online JS Compress tool.

Miscellaneous

Find unused and duplicate CSS

1.63K
70
3y 10m
n/a

A no-dependencies HTTP client library for browsers and Node.js with a promise-based or Node.js-style callback-based API to progress events, text and binary file upload and download, partial response body, request and response headers, status code.

351
20
4y 10m
MIT

Extract & Inline Critical-path CSS in HTML pages

8.77K
350
17d
Apache-2.0

CSS color minification module

12
1
1y 10m
n/a

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

14.47K
1.46K
39d
MIT

TMI (Too Many Images) - discover your image weight on the web

1.65K
59
3y 9m
Apache-2.0

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event.

Perf Tooling is a shared resource to keep track of new and existent performance tools.

Generators

Use JavaScript to generate JavaScript

5
0
22d
n/a

Glue is a simple command line tool to generate CSS sprites

2.56K
183
3y 6m
n/a

Pythonic dynamic sprite generator

18
3
6y 55d
Apache-2.0

Grunt task for converting a set of images into a spritesheet and corresponding CSS variables

1.16K
96
1y 81d
MIT

gulp task for creating image sprites and the corresponding stylesheets

15
1
6y 9m
n/a

Create SVG sprites or compile to

335
47
3y 4m
MIT

renders SVG in CSS file using data URIs or base64

2
1
4y 6m
n/a

AssetGraph plugin for creating sprites from background images

36
5
8d
BSD-3-Clause

A image sprite generator

464
72
5y 16d
MIT

Automatic CSS Sprite Generator

614
72
4y 11m
MIT

Grunt task that generates a sprite from images referenced in a style sheet and then updates the references with the new sprite image and positions.

SVG sprites & stacks galore — Grunt plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours.

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable CSS.

Create, integrate, and maintain CSS sprites with ease.

ZeroSprites is a CSS sprites generator aimed at area minimization using algorithms used in the field of VLSI floorplanning.

CSS sprites allow you to combine multiple images into a single file.

SVG

Node.js tool for optimizing SVG files

15.13K
1.12K
11m
n/a

Minify SVG

437
46
4m
MIT

svgcleaner could help you to clean up your SVG files from the unnecessary data.

1.23K
60
24d
GPL-2.0

SVGOMG is SVGO's Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.

Scour is an open-source Python script that aggressively cleans SVG files, removing a lot of 'cruft' that certain tools or authors embed into their documents.

Web Components

Polymer Tools Monorepo

377
194
4m
n/a

Concatenate a set of Web Components into one file

101
28
2y 25d
MIT

Web server Benchmarks

The httperf HTTP load generator

812
133
4m
GPL-2.0

Ruby driver for httperf - automated load and performance testing

181
22
6y 50d
n/a

Simple interface for calling httperf via ruby.

13
4
5y 8m
n/a

Simple PHP Port of HTTPerf.rb [https://github.com/jmervine/httperfrb]

5
1
6y 7m
MIT

NodeJS port of HTTPerf.rb

24
2
6y 9m
n/a

Python port of httperfrb

11
7
5y 11m
MIT

Go Port of HTTPerf.rb - https://github.com/jmervine/httperfrb

5
0
5y 4m
MIT

Modern HTTP benchmarking tool

26.9K
2.24K
1y 7m
n/a

A utility for arming (creating) many bees (micro EC2 instances) to attack (load test) targets (web applications).

5.98K
649
2y 11m
MIT

Open source load testing tool: It is a Java platform application.

An open source load testing tool. Define user behaviour with Python code, and swarm your system with millions of simultaneous users.

k6

An open source load testing tool built for developers. Easy to integrate into CI pipelines. Tests are written in ES6 JS and you can test APIs, microservices and sites using HTTP/1.1, HTTP/2 and WebSocket.

Web server Modules

WebP with Accept negotiation

235
22
2y 59d
n/a

PageSpeed speeds up your site and reduces page load time. This open-source web server module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. PageSpeed is available as a module for Apache 2.x and Nginx 1.x.

Specs

The mission of the Web Performance Working Group, part of the Rich Web Client Activity, is to provide methods to measure aspects of application performance of user agent features and APIs.

This specification defines a means for site developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient web applications.

This specification defines a unified interface to store and retrieve high resolution performance metric data related to the navigation of a document.

This specification defines an interface for web applications to access the complete timing information for resources in a document.

This specification defines an interface to help web developers measure the performance of their applications by giving them access to high precision timestamps.

This specification defines a unified interface to store and retrieve performance metric data. This specification does not cover individual performance metric interfaces.

This specification defines the will-change CSS property which allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they’re needed. This way, when the actual change happens, the page updates in a snappy manner.

This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (<link>). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.

Stats

It's a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

Other Awesome Lists

A curated list of webpack tools for web performance

784
20
4m
n/a

A curated list of awesome awesomeness

26.92K
3.32K
8d
n/a

😎 Awesome lists about all kinds of interesting topics

147.36K
19.29K
4d
CC0-1.0