Ahmed Bouchefra - Performance Tools

Performance simply matters. Technology may allow us to go bigger, but maybe not necessarily be better when it comes to performance. Servers and Internet connections are getting more sophisticated, and as a result, we feel the need to keep filling them. However, this isnt the time to become lazy. This is the time to utilize the amazing tools that are available for making websites faster, and to learn how to improve user experience and satisfaction.

This is a practical collection of tutorials on some of the most popular and powerful website performance tools available today. Its packed with useful, real world hints and tips that you can use on your sites today.

This book is for all developers who wish to build sites and apps that run faster. It covers a range of performance tools; some familiarity with web performance terms and techniques is assumed.

Code in this book is displayed using a fixed-width font, like so:

Where existing code is required for context, rather than repeat all of it, will be displayed:

Some lines of code should be entered on one line, but weve had to wrap them because of page constraints. An indicates a line break that exists for formatting purposes only, and should be ignored:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

When dealing with performance, it's hard to remember all the tools that might help you out during development. For that purpose, we've compiled a list of 23 performance tools for your reference. Some you'll have heard of, others probably not. Some have been covered in detail in our performance month, others are yet to be covered future articles; but all are very useful and should be part of your arsenal.

Googles Test My Site is an online tool offered by Google and powered by the popular website performance tool WebPageTest.org.

You can either visualize your report on site or have it emailed to you via your email address.

The tool gives you your website loading time (or Speed Index) calculated using a Chrome browser on a Moto G4 device within a 3G network. It also gives you the estimated percentage of visitors lost due to loading time. Among other things it also:

• compares your site speed with the top-performing sites in your industry
• gives you top fixes that can help you speed up your website loading time.

SiteSpeed.io is an open-source tool or a set of tools that can help you measure your website performance and improve it.

• Coach: gives you performance advice and fixes for your website based on best practices.
• Browsertime: collects metrics and HAR files from your browser.
• Chrome-HAR: helps you compare HAR files.
• PageXray: extracts different metrics (from HAR files) such as size, number of requests, and so on.

You can install these tool(s) using npm:

Or Docker:

Lighthouse is an open-source tool for running audits to improve web page quality. It's integrated into Chrome's DevTools and can be also installed as a Chrome extension or CLI-based tool. It's an indispensable tool for measuring, debugging and improving the performance of modern, client-side apps (particularity PWAs).

You can find the extension from the Chrome Web Store.

Or you can install Lighthouse, from npm, on your system with:

Then run it with:

You can use Lighthouse programmatically to build your own performance tool or for continuous integration.

Make sure to check these Lighthouse-based tools:

• webpack-lighthouse-plugin: a Lighthouse plugin for Webpack
• treo: Lighthouse as a service with a personal free plan.
• calibreapp: a paid service, based on Lighthouse, that helps you track, understand and improve performance metrics using real Google Chrome instances.
• lighthouse-cron: a module which can help you track your Lighthouse scores and metrics overtime.