Weekend roundup time! From the multitude of Grunt and Gulp plugins to web apps that can help us visualize our websites with data, learning all the ins and outs of performance tooling is tough. I thought it might be useful to catalogue as many tools out there as I could find.

Content Delivery Networks (CDNs)

A CDN distributes your website's assets across the world in order to deliver them as fast as possible, regardless of the geographic location of that particular user.

CloudFlare

CloudFlare works all it's magic (CDN being just a part of that) by being your DNS server, so all requests to your site go through them.

CloudFlare designed its CDN without the legacy of the last 15 years. Our proprietary technology takes advantage of recent changes to hardware, web server technology and network routing. In other words, we've built the next-generation CDN. The result is a CDN that is easier to setup, more affordable, and performs better than any legacy CDN you've tried before.

MaxCDN

CSS-Tricks uses MaxCDN to host all our static assets. It integrates nicely with WordPress and W3 Total Cache such that we really don't do anything special, assets are just moved to the CDN and linked to properly.

Our network is equal part site accelerator and realtime control center. We built it so that both your customers and DevOps will get the maximum benefit of a next-gen CDN.

CloudFront

Amazon Web Services version of a CDN.

Amazon CloudFront is a content delivery web service. It integrates with other Amazon Web Services products to give developers and businesses an easy way to distribute content to end users with low latency, high data transfer speeds, and no minimum usage commitments.

CDNperf

There are CDNs out there that don't host your own arbitrary assets like the above do. They just host popular files and welcome you to link to them there. Typically not the greatest idea for production sites (you might as well concatenate your assets and server from your own CDN), it's still useful for easy (and quick!) access to these assets.

CDNperf finds you fast and reliable JavaScript CDNs that make your websites snappy and happy!

Performance Testing

These services use metrics such as time to first byte or the render time of a website to grade its performance. Some will also check as to whether or not particular assets have been cached or whether there are multiple CSS or JS files that should be concatenated together.

WebPagetest

WebPagetest is kind of the gold standard in performance testing, as it gives you all kinds of useful metrics to work with, like a general score to work on improving, a filmstrip to see what is visible when as your site loads, network waterfalls in browsers that don't normally offer that, and more.

Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.

WebPagetest's services are also available as an NPM module and command-line tool with the API wrapper.

• webpagetest-mapper: Map WebPageTest result data into human-readable document formats.
• WPT Bulk Tester: Use Google Docs to test multiple URLs using WebPageTest (either webpagetest.org if you have an API key, or another publicly accessible instance)

Yslow

YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites.

Google PageSpeed

The PageSpeed tools analyze and optimize your site following web best practices.

There's also a CLI for access to PageSpeed Insights with reporting:

Run mobile and desktop performance tests for your deployed site using Google PageSpeed Insights with tidy reporting for your build process.

What does my site cost?

Find out how much it costs for someone to use your site on mobile networks around the world.

Pingdom website speed test

Enter a URL to test the load time of that page, analyze it and find bottlenecks.

Speedcurve

SpeedCurve allows you to track your own performance as well as the performance of your competitors. With SpeedCurve, you can start making speed one of your competitive differentiators. Speed is especially important to mobile users who expect websites to load faster on phones than desktop, and are quicker to abandon pages that are too slow.

Calibre

Calibre tracks how long your pages take to load, how big or small your pages are becoming. Janky page? You'll know about it straight away.

GT Metrix

A service that utilises Google PageSpeed and YSlow to help you develop a faster, more efficient and all-around improved website experience.

perf.js

Super simple example of adding perf timing to the page display during dev work.

perf bar

Simple way to collect and look at your website performance metrics quickly, that supports budgeting and adding custom metrics.

grunt-perfbudget

Grunt task for Performance Budgeting. grunt-perfbudget uses either a public or private instance of WebPagetest to perform tests on a specified URL. It compares test results to budgets you specify. If the budget is met, the tasks successfully completes. If it the page exceeds your performance budgets, the task fails and informs you why.

Sitespeed

Sitespeed.io is an open source tool that helps you analyze your website speed and performance based on performance best practices and timing metrics. It collects data from multiple pages on your website, analyze them using the rules and output the result as HTML or send the metrics to Graphite.

speedgun

This site allows you to point Speedgun.js at any public facing website to gather important web performance data. It runs five times providing a good view on understanding how a web page is loaded.

gulp size

Display the size of your project.

Browser tools and plugins

Chrome's Developer Tools

Two super useful tabs in Chrome's DevTools for measuring performance: Audits and Network.

The Audit panel can analyze a page as it loads. Then provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness.

The Network panel provides insights into resources that are requested and downloaded over the network in real time. Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.

Firefox Developer Browser

The only browser made just for developers, Firefox Developer Edition was created with your workflow in mind. Build, test, scale and more all from one place, for the first time ever.

Visit Firefox's Network Monitor on MDN

Page performance

This extension is a hack that provides a quick analysis, of page performance, on a modern Chrome browser. If multiple tabs are open, the extension automatically provides performance analysis for the page on the active tab.

Audits

PerfAudit

We audit the page load and rendering performance of your website. Hating slow and janky websites, we are on a mission to help load websites in milliseconds and perform jank-free.

Perfmonkey

PerfMonkey makes it very simple to keep track of your website's rendering performance.

SVGs + Images

ImageOptim

ImageOptim is a 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.

Also available as a Grunt or Gulp plugin.

SVGO

SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.

If you need an interface rather than a CLI to do that then you can download the app.

SVGOMG

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

Manually optimising SVGs

Like it's raster brethren, SVG should be optimized before being used on production sites. There are several great tools for that, but as Raymond is about to show you, the best results come from a deeper understanding and a little manual work.

Trimage

Trimage is a cross-platform GUI and command-line interface to optimize image files for websites, using optipng, pngcrush, advpng and jpegoptim, depending on the filetype (currently, PNG and JPG files are supported).

CSS

CSS Triggers

A website for working out which CSS properties effect the layout, paint and composite operations of a browser.

You can read more about CSS-triggers in the complimentary explainer post.

CSS Stats

Webapp to visualize various stats about your CSS.

CSS Shrink

CSS minified. Because CSS is on the critical path to rendering pages. It must be small! Or else!

uncss

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

Available as a Grunt or Gulp plugin.

Critical path

Critical extracts & inlines critical-path (above-the-fold) CSS from HTML.

Markup

HTMLMinifier

HTMLMinifier is a highly configurable, well-tested, Javascript-based HTML minifier, with lint-like capabilities.

gulp-htmlmin

gulp plugin to minify HTML.

grunt-contrib-htmlmin

Minify HTML

JavaScript

uglifyjs

JavaScript parser, mangler/compressor and beautifier toolkit.

Also available as a Gulp or Grunt plugin.

You might not need jQuery plugins

jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.

If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.

---

More information about performance

• Usertiming API
• Jank Free
• Scrolling performance
• Mobile web performance auditing
• Gone in 60 frames per second
• Udacity course on rendering performance

Share On

Twitter Facebook Google+