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 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.
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.
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.
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.
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 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 analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
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.
Find out how much it costs for someone to use your site on mobile networks around the world.
Enter a URL to test the load time of that page, analyze it and find bottlenecks.
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 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.
A service that utilises Google PageSpeed and YSlow to help you develop a faster, more efficient and all-around improved website experience.
Super simple example of adding perf timing to the page display during dev work.
Simple way to collect and look at your website performance metrics quickly, that supports budgeting and adding custom metrics.
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.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.
Display the size of your project.
Browser tools and plugins
Chrome’s Developer Tools
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.
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
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.
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 makes it very simple to keep track of your website’s rendering performance.
SVGs + Images
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.
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 is SVGO’s Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.
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 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).
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.
Webapp to visualize various stats about your CSS.
CSS minified. Because CSS is on the critical path to rendering pages. It must be small! Or else!
Critical extracts & inlines critical-path (above-the-fold) CSS from HTML.
gulp plugin to minify HTML.
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.