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: March 1, 2021, 3:06 a.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.

889
105
9y 16d
n/a

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

21.82K
7.67K
4d
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.14K
384
6y 11m
BSD-3-Clause

Grunt WebPageTest plugin for measure with time

36
3
2y 105d
MIT

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

92
15
6y 101d
MIT

Grunt task for performance budgeting.

863
42
1y 40d
MIT

Web Tracing Framework libraries and extensions.

2.63K
228
1y 89d
BSD-3-Clause

Load and performance benchmark tool

1.98K
239
89d
LGPL-2.1

Collect performance metrics for your library/application.

1.85K
46
2y 10m
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 105d
n/a

PageSpeed Insights Reporting for Node

3.03K
137
53d
Apache-2.0

Bundle Analyzer

Keep your bundle size in check

4.08K
200
53d
MIT

Analyze and debug space usage through source maps

3.11K
97
52d
Apache-2.0

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

10.74K
405
39d
MIT

📊 Analyzing bundles created by Lasso js.

2
1
8m
MIT

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

1.22K
101
49d
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.

577
26
3y 8m
MIT

Benchmark - JavaScript

Simple, easy, javascript benchmark testing

171
14
10y 6m
n/a

A caffeine driven, simplistic approach to benchmarking.

544
36
4y 12m
n/a

Navigation Timing API measurement helpers

1.5K
124
11m
n/a

JavaScript Performance Monitor

6.95K
1.12K
56d
MIT

JavaScript inheritance performance tests done right

1
0
5y 10m
n/a

minimal monitor for JS Heap Size via performance.memory

2.04K
117
5y 8m
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 4m
Apache-2.0

Benchmarking PHP, the easy way

12
1
6y 29d
n/a

Bookmarklets

Front-end performance heatmap bookmarklet.

3.8K
142
3y 9m
n/a
556
55
7y 94d
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.

994
84
81d
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.66K
1.95K
12d
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 111d
MIT

Replaces script references with Google CDN ones

79
8
59d
MIT

Extensions

The easiest way to measure your performance budget

125
7
4y 9m
n/a

Image Optimizers

Grunt task to optimize images using reSmush.it

86
19
4y 11m
MIT

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

33
2
4y 11m
n/a

Minify images seamlessly

4.57K
242
35d
MIT

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

19.01K
948
7d
Apache-2.0

GraphicsMagick for node

6.35K
591
3y 64d
n/a

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

10.54K
1.03K
6d
n/a

Minify PNG, JPG, GIF and SVG images.

1.22K
177
11m
MIT

Minify PNG, JPEG, GIF and SVG images

1.81K
159
57d
MIT

Convert your images to WebP format.

118
16
6y 4m
MIT

Convert images to WebP

187
15
59d
MIT

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

485
18
1y 7m
n/a

Make optimisation of images part of your automated build process

3.11K
114
1y 118d
MIT

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

14
3
7m
GPL-3.0

Improved JPEG encoder.

4.43K
370
36d
n/a

jpegoptim - utility to optimize/compress JPEG files

1.03K
80
9m
n/a

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

2.91K
274
96d
Apache-2.0

lightweight lossless file minifier/optimizer

687
67
96d
MIT

CLI image optimization tool

545
14
4m
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

939
156
13d
MIT

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

6.63K
438
73d
MIT

Loaders

The only script in your HEAD.

4.19K
387
7y 90d
MIT

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

68
10
8y 7m
n/a

InstantClick makes following links in your website instant.

5.4K
274
3y 11m
MIT

JIT(Just In Time) plugin loader for Grunt.

509
34
5y 8d
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.17K
154
5d
BSD-2-Clause

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

25
4
5y 5m
n/a

A model driven framework for the evaluation web page performance

98
14
2y 11m
n/a

Grunt plugin wrapping phantomas to measure frontend performance

291
25
4y 52d
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.52K
165
8m
MIT

Minifiers - HTML

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

493
72
35d
BSD-2-Clause

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

4.38K
567
1y 10m
MIT

Minify HTML.

431
68
1y 4m
MIT

Minify HTML

719
62
2y 5m
MIT

grunt plugin for html compression, using htmlcompressor.jar

36
5
7y 77d
MIT

Ruby wrapper for kangax html-minifier

10
6
8y 84d
n/a

🚨 [deprecated] Ruby gem for compressing html

35
7
7y 9m
MIT

minify HTML responses like some crazy guy

29
4
7m
MIT

Minimize HTML

150
21
3y 42d
MIT

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

123
46
1y 4m
MIT

A HTML min tool by kangax (HTMLMinifier Creator).

Minifiers - JS & CSS

YUI Compressor

2.93K
663
1y 9m
n/a

JavaScript parser / mangler / compressor / beautifier toolkit

11.29K
1.17K
6d
n/a

CSS minifier with structural optimizations

3.25K
194
95d
MIT

YUI Compressor

76
40
9y 5m
n/a

Concatenate files.

810
177
4y 10m
MIT

Minify files with UglifyJS.

1.47K
369
78d
MIT

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

3.69K
300
11d
MIT

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

2.43K
563
48d
n/a

Pipeline is an asset packaging library for Django.

1.39K
359
42d
MIT

Javascript Minifier built in PHP

631
133
91d
BSD-3-Clause

CSS minifier

1.07K
90
6y 7m
n/a

A grunt wrapper for CSS Shrink

26
4
5y 11d
MIT

Shrinks CSS files using cssshrink

22
0
4y 11m
n/a

Prettify or uglify CSS code

7
1
6y 8m
n/a

Compress CSS files.

793
154
14d
MIT

A grunt task for removing unused CSS from your projects.

3.87K
183
26d
MIT

DEPRECATED. Remove unused CSS selectors.

966
44
3y 7m
MIT

The most minimalistic online JS Compress tool.

Miscellaneous

Find unused and duplicate CSS

1.63K
70
4y 35d
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.

349
20
5y 37d
MIT

Extract & Inline Critical-path CSS in HTML pages

8.92K
363
106d
Apache-2.0

CSS color minification module

12
1
2y 25d
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.84K
1.53K
37d
MIT

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

1.66K
59
4y 16d
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
111d
n/a

Glue is a simple command line tool to generate CSS sprites

2.56K
183
3y 9m
n/a

Pythonic dynamic sprite generator

19
3
6y 4m
Apache-2.0

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

1.16K
97
1y 5m
MIT

gulp task for creating image sprites and the corresponding stylesheets

15
1
7y 13d
n/a

Create SVG sprites or compile to <symbols>

336
46
3y 7m
MIT

renders SVG in CSS file using data URIs or base64

2
1
4y 9m
n/a

AssetGraph plugin for creating sprites from background images

36
5
84d
BSD-3-Clause

A image sprite generator

466
71
5y 105d
MIT

Automatic CSS Sprite Generator

614
71
5y 57d
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.67K
1.15K
5d
MIT

Minify SVG

434
47
59d
MIT

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

1.28K
64
7d
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
7m
n/a

Concatenate a set of Web Components into one file

101
28
2y 114d
MIT

Web server Benchmarks

The httperf HTTP load generator

827
137
85d
GPL-2.0

Ruby driver for httperf - automated load and performance testing

180
22
6y 4m
n/a

Simple interface for calling httperf via ruby.

13
4
5y 11m
n/a

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

5
1
6y 10m
MIT

NodeJS port of HTTPerf.rb

24
2
7y 3d
n/a

Python port of httperfrb

11
7
6y 76d
MIT

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

5
0
5y 7m
MIT

Modern HTTP benchmarking tool

27.66K
2.3K
24d
n/a

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

6.03K
647
3y 72d
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

237
23
2y 4m
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

805
20
7m
n/a

A curated list of awesome awesomeness

27.24K
3.34K
9d
n/a

😎 Awesome lists about all kinds of interesting topics

153.57K
19.99K
20d
CC0-1.0