We are working on releasing 1.0 that will happen sometimes after Firefox 57 is released (14th of November).
The coach helps you find performance problems on your web page. You can think of the coach as a modern version of YSlow.
You know, it's hard to get everything right! The world is complex: HTTP/1 vs HTTP/2. Some of the previous performance best practices are now worst practices. The coach will detect that the page is accessed using HTTP/2, and adjust its advice accordingly.
Ten reasons why we love the coach:
You can use the coach in a couple of different ways.
You need Node.js LTS (you need to be on 8 or later). And you need Chrome and/or Firefox installed.
If you want to use Chrome (Chrome is default):
Try it with Firefox (needs Firefox 57 or later):
npm install webcoach -gwebcoach https://www.sitespeed.io --browser firefox
If you also want to show the offending assets/details and the description of the advice:
webcoach https://www.sitespeed.io --details --description
By default, the coach only tells you about advice where you don't get the score 100. You can change that. If you want to see all advice, you can do that too:
webcoach https://www.sitespeed.io --limit 101
If you want to test as a mobile device, that's possible too, by faking the user-agent.
webcoach https://www.sitespeed.io --mobile -b chrome
... but hey, I want to see the full JSON?
Yes, you can do that!
webcoach https://www.sitespeed.io -f json
This will get you the full JSON, the same as if you integrate the coach into your tool.
... but hey, I don't want any color in the table output?
That's possible as well!
webcoach https://www.sitespeed.io --noColor
We also produce a bookmarklet. The bookmarklet only uses advice that you can run inside the browser (it doesn't have HAR file to analyse even though maybe possible in the future with the Resource Timing API).
The bookmarklet is really rough right now and logs the info to the browser console. Help us make a cool front-end :)
You can generate the bookmarklet by running
npm run bookmarklet
and then you will find it in the dist folder.
Installing the Coach Panel Chrome Extension, will add a 'Coach' tab inside your Chrome Dev Tools from there you can analyse and view your page's results.
Like the bookmarklet it only uses advice that you can run inside the browser - just until that Resource Timing API supports sizes in Chrome!
Alternatively view the Source Code.
Thank you Matt for creating the extension!
In the simplest version you use the default configuration (default DOM and HAR advice and using Firefox):
const api = ;const result = api;
The full API method:
// get the APIconst api = ;const result = api;
Say that your tool run on Windows, you start the browsers yourself and you generate your own HAR file. Create your own wrapper to get the coach to help you.
Generate the script
npm run combine
and it will be in the dist folder.
Or you just get it from the API:
// get the APIconst api = ;// get the DOM scripts, it's a promiseconst domScriptPromise = api;
Take the domScript and run it in your browser and take care of the result.
To test the HAR you need to generate the HAR yourself and then run it against the advice.
const api = ;// You read your HAR file from disk or however you get hold of itconst harJson = //// if your har contains multiple pages (multiple runs etc) you can use the API// to get the page that you wantconst firstPageHar = api;// the result is a promiseconst myHarAdviceResultPromise = api;
When you got the result from both the DOM and the HAR you need to merge the result to get the full coach result:
// Say that you got the result from the browser in domAdviceResult// and the HAR result in harAdviceResultconst coachResult = api;
Now you have the full result (as JSON) as a coachResult.
The coach will give you advice on how to do your page better. You will also get a score between 0-100. If you get 100 the page is great, if you get 0 you can do much better!
The coach tests your site in two steps:
You can run the different steps standalone but for the best result run them together.
The coach knows more than just performance. She also knows about accessibility and web best practice.
Make sure your site is accessible and usable for everyone. You can read more about making the web accessible here.
You want your page to follow best practices, right? Making sure your page is set up for search engines, have good URL structure and so on.
The world is complex. Some things are great to know but hard for the coach to give advice about.
The coach will then just tell you how the page is built and you can draw your own conclusions if something should be changed.
The coach has a clock and knows how to use it! You will get timing metrics and know if you are doing better or worse than the last run.
Checkout the developers guide to get a better feeling how the coach works.
The coach is automatically tested in latest Chrome and Firefox. To get best results you need Chrome or Firefox 48 (or later) to be able to know if the server is using HTTP/2.
We hope that the coach works in other browsers but we cannot guarantee it right now.