9.1 docs (#2486)

* Documentation for sitespeed.io 9.1

* typeos

docs/_includes/index/box3.md

@@ -3,6 +3,6 @@
 
 [<img src="{{site.baseurl}}/img/pippi.png" class="pull-left img-big" alt="The power of sitespeed.io - Pippi Longstocking logo" width="180" height="151">](https://dashboard.sitespeed.io)
 
-If you want to measure the performance and are only interested in timing metrics, you should focus on using [Browsertime]({{site.baseurl}}/documentation/browsertime/). If you want it all: use [sitespeed.io]({{site.baseurl}}/documentation/sitespeed.io/). It is the main tool that uses all sitespeed.io tools and add supports for testing multiple pages as well as adds the ability to report the metrics to a TSDB (Graphite and InfluxDB).
+If you want to measure the performance and are only interested in timing metrics, you should focus on using [Browsertime]({{site.baseurl}}/documentation/browsertime/). If you want it all: use [sitespeed.io]({{site.baseurl}}/documentation/sitespeed.io/). It is the main tool that uses all sitespeed.io tools and add supports for testing multiple pages as well as adds the ability to report the metrics to a TSDB (Graphite and InfluxDB). Use it to monitor the performance of your web site.
 
 If you are a performance tool maker you should look at  [The coach]({{site.baseurl}}/documentation/coach/), [Browsertime]({{site.baseurl}}/documentation/browsertime/), [Chrome-HAR](https://github.com/sitespeedio/chrome-har), [PageXray]({{site.baseurl}}/documentation/pagexray/) and [Throttle]({{site.baseurl}}/documentation/throttle/). They can all help you depending on what you are building.

docs/_includes/index/box4.md

@@ -1,7 +1,7 @@
-## We believe in privacy
+## Performance leaderboard
 * * *
-We take your privacy really serious: Our [documentation site](https://www.sitespeed.io/), our [dashboard](https://dashboard.sitespeed.io) and our [compare tool](https://dashboard.sitespeed.io) do not use any tracking software at all (no Google Analytics or any other tracking software). None of the sitespeed.io tools call home.
+[<img src="{{site.baseurl}}/img/leaderboard.png" class="pull-left img-big" alt="Performance leaderboard" width="200" height="141">]({{site.baseurl}}/documentation/sitespeed.io/leaderboard/)
 
-But beware: Chrome and Firefox can call home (we know for fact that they both do). We would love PRs and tips how to make sure browsers don't call home when you run your tests.
+Do you want to compare your performance against other web sites? Use the performance leaderboard! You can check out our [example dashboard](https://dashboard.sitespeed.io/dashboard/db/leaderboard) or go directly to the [documention]({{site.baseurl}}/documentation/sitespeed.io/leaderboard/). 
 
-[Read more]({{site.baseurl}}/important/) about how we do things.
+You can compare performance timings, how the page is built, how much CPU the page is using and many many more things. And the leaderboard is also configurable through Grafana, so you can add the metrics that are important to you!

docs/_includes/index/box5.md

@@ -1,10 +1,7 @@
-## What does it cost?
+## We believe in privacy
 * * *
+We take your privacy really serious: Our [documentation site](https://www.sitespeed.io/), our [dashboard](https://dashboard.sitespeed.io) and our [compare tool](https://dashboard.sitespeed.io) do not use any tracking software at all (no Google Analytics or any other tracking software). None of the sitespeed.io tools call home.
 
-[<img src="{{site.baseurl}}/img/public.png" class="pull-left img-big" alt="The power of sitespeed.io" width="150" height="150" alt="sitespeed.io Public Enemy logo">]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/#cost)
+But beware: Chrome and Firefox can call home (we know for fact that they both do). We would love PRs and tips how to make sure browsers don't call home when you run your tests.
 
-Sitespeed.io is Open Source and totally free. But what does it cost to have an instance of sitespeed.io up and running?
-
-If you don't run on your own servers, we recommend running on [Digital Ocean](https://www.digitalocean.com/) optimized droplets 2 vCPUs or on [AWS](https://aws.amazon.com/) c5.large, storing the data at S3. On one instance you can run something like 80000+ runs per month for a total cost of $695 per year.
-
-Look more into the details [here]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/#cost).
+[Read more]({{site.baseurl}}/important/) about how we do things.

docs/_includes/index/box6.md

@@ -1,5 +1,10 @@
-## Browsertime 5.0
+## What does it cost?
 * * *
-[<img src="{{site.baseurl}}/img/browsertime-ff-chrome.png" class="pull-left img-big" alt="Browsertime logo" width="180" height="162">]({{site.baseurl}}/documentation/browsertime)
 
-Browsertime 5.0 supports testing multiple pages within the same browser session and scriptinmg. You should use Browsertime if you want a raw JSON result for timings and/or execute your own JavaScript. Browsertime is perfect if you wanna build your own performance tool, as VoxMedia did when they created [Lightbike](https://github.com/voxmedia/lightbike) built on top of Browsertime.
+[<img src="{{site.baseurl}}/img/public.png" class="pull-left img-big" alt="The power of sitespeed.io" width="150" height="150" alt="sitespeed.io Public Enemy logo">]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/#cost)
+
+Sitespeed.io is Open Source and totally free. But what does it cost to have an instance of sitespeed.io up and running?
+
+If you don't run on your own servers, we recommend running on [Digital Ocean](https://www.digitalocean.com/) optimized droplets 2 vCPUs or on [AWS](https://aws.amazon.com/) c5.large, storing the data at S3. On one instance you can run something like 80000+ runs per month for a total cost of $695 per year.
+
+Look more into the details [here]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/#cost).

docs/_includes/index/dashboard.md

@@ -0,0 +1,10 @@
+## Monitor your site 
+* * *
+[<img src="{{site.baseurl}}/img/dashboard-front.png" class="pull-left img-big" alt="Performance dashboard" width="500" height="227">]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/)
+
+Using sitespeed.io together with Grafana and Graphite enables you to monitor the performance of your web site. We have a prepared [docker-compose file](https://github.com/sitespeedio/sitespeed.io/blob/master/docker/docker-compose.yml) for your setup and some ready made [generic Grafana dashboards](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/master/dashboards/graphite) that will make it easy for you to get it up and running. You can get it up and running in almost 5 minutes!
+
+We have a version of the dashboard at [dashboard.sitespeed.io](https://dashboard.sitespeed.io/d/000000044/page-timing-metrics?orgId=1) where you can have look and try it out.
+
+We've been using the dashboards for years and years and it works really good. Read the [documentation]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/) on how to set it up and get going.
+

docs/_includes/index/install.md

@@ -1,7 +1,7 @@
 
 #### Docker
 
-Use our [Docker container](https://hub.docker.com/r/sitespeedio/sitespeed.io/) to get an environment with Firefox, Chrome, XVFB and sitespeed.io up and running as fast as you can download them. They work [extremely well]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/) together with Graphite/InfluxDB and Grafana.
+Use our [Docker container](https://hub.docker.com/r/sitespeedio/sitespeed.io/) to get an environment with Firefox, Chrome, XVFB and sitespeed.io up and running as fast as you can download them. They work [extremely well]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/) together with Graphite/InfluxDB and Grafana that you can use to monitor your web site.
 
 ~~~bash
 docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:{% include version/sitespeed.io.txt  %} https://www.sitespeed.io/

docs/_layouts/startpage.html

@@ -106,6 +106,14 @@ layout: compress
 				</section>
 			</div>
 		</div>
+		<div class="grid">
+			<div class="col-1-1">
+				<section>
+					{% capture dashboard %}{% include index/dashboard.md %}{% endcapture %}
+					{{ dashboard | markdownify }}
+				</section>
+			</div>
+		</div>
 		<div class="grid">
 			<div class="col-1-2">
 				<section>

docs/_posts/2019-05-30-sitespeed.io-9.1.md

@@ -0,0 +1,39 @@
+---
+layout: default
+title: sitespeed.io 9.1 - performance leaderboard
+description: 
+authorimage: /img/aboutus/peter.jpg
+intro: Do you want to compare your performance against other web sites? Use the new performance leaderboard! 
+keywords: sitespeed.io, browsertime, webperf
+nav: blog
+---
+
+# sitespeed.io 9.1 - Performance leaderboard
+
+Grafana is the Open Source tool that just continues to give! In 6.2 there's a new panel type that we used to create the new [performance leaderboard](https://dashboard.sitespeed.io/d/000000060/leaderboard). I'm pretty sure this is the best and most appealing way to compare performance between different pages.
+
+Within the 9.1 release we have re-worked the dashboards and added the new leaderboard dashboard. It looks like this:
+![Leaderboard example]({{site.baseurl}}/img/leaderboard-example.png)
+{: .img-thumbnail}
+ 
+It helps communicate performance within you organisation. You can (and should) of course edit/change your own version of the dashboard:
+* You can configure the red/yellow/green limits for each dashboard
+* You can remove/add your own dashboards
+* You can make each dashboard larger/smaller depending on how many URLs you wanna test
+
+If you use Chrome to test you URLs you can see things like how many and how long CPU long tasks each page uses:
+
+![CPU Long tasks leaderboard]({{site.baseurl}}/img/long-task-leaderboard.png)
+{: .img-thumbnail}
+
+
+Or you can compare Coach performance and privacy score:
+
+![Score leaderboard]({{site.baseurl}}/img/score-leaderboard.png)
+{: .img-thumbnail}
+
+You can read more about the new leaderboard in the [documentation](/documentation/sitespeed.io/leaderboard/).
+
+We have some more changes and some bug fixes that you can read about in the [changelog](https://github.com/sitespeedio/sitespeed.io/blob/master/CHANGELOG.md).
+
+/Peter

docs/documentation/browsertime/configuration/config.md

@@ -25,7 +25,7 @@ chrome
   --cpu                                              Easy way to enable both chrome.timeline and CPU long tasks.  [boolean]
   --chrome.CPUThrottlingRate                         Enables CPU throttling to emulate slow CPUs. Throttling rate as a slowdown factor (1 is no throttle, 2 is 2x slowdown, etc)  [number]
   --chrome.includeResponseBodies                     Include response bodies in the HAR file. At the moment we only support the HTML of the main request.  [choices: "none", "html"] [default: "none"]
-  --chrome.cdp.performance                           Collect Chrome perfromance metrics from Chrome DevTools Protocol  [boolean] [default: true]
+  --chrome.cdp.performance                           Collect Chrome performance metrics from Chrome DevTools Protocol  [boolean] [default: true]
   --chrome.blockDomainsExcept, --blockDomainsExcept  Block all domains except this domain. Use it multiple time to keep multiple domains. You can also wildcard domains like *.sitespeed.io. Use this when you wanna block out all third parties.
 
 firefox

docs/documentation/index.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Documentation for all sitespeed.io tools.
-description: Here's the documentation of how to use all the sitespeed.io tools. Use latest LTS release 8.x of NodeJs or Docker containers to get them up and running.
+description: Here's the documentation of how to use all the sitespeed.io tools. Use latest LTS release 10.x of NodeJs or Docker containers to get them up and running.
 keywords: tools, documentation, web performance, version, nodejs.
 nav: documentation
 image: https://www.sitespeed.io/img/sitespeed-2.0-twitter.png
@@ -9,7 +9,7 @@ twitterdescription: Documentation for the sitespeed.io.
 ---
 # Documentation
 
-Use Docker or the latest LTS release (8.x) of NodeJS to run the sitespeed.io tools.
+Use Docker or the latest LTS release (10.x) of NodeJS to run the sitespeed.io tools.
 
  * [sitespeed.io]({{site.baseurl}}/documentation/sitespeed.io/) - continuously monitor your web sites web performance  (including the Coach, Browsertime, PageXray and the rest).
  * [Coach]({{site.baseurl}}/documentation/coach/) - get help from the Coach how you can make your web page faster.
@@ -17,4 +17,4 @@ Use Docker or the latest LTS release (8.x) of NodeJS to run the sitespeed.io too
  * [Compare]({{site.baseurl}}/documentation/compare/) - compare two HAR files with each other and find regressions.
  * [PageXray]({{site.baseurl}}/documentation/pagexray/) - convert HAR files to a more usable format.
  * [Throttle]({{site.baseurl}}/documentation/throttle/) - simulate slow network connections on Linux and Mac OS X.
- * [Chrome-HAR]({{site.baseurl}}/documentation/chrome-har/) - create Chrome HAR files bases on events from the Chrome Debugging Protocol.
+ * [Chrome-HAR]({{site.baseurl}}/documentation/chrome-har/) - create Chrome HAR files based on events from the Chrome Debugging Protocol.

docs/documentation/sitespeed.io/index.md

@@ -37,6 +37,7 @@ Sitespeed.io is the complete toolbox to test the web performance of your web sit
  * [Mobile phones](mobile-phones/) - test using your mobile phone (Android only).
  * [Performance Budget](performance-budget/) - make sure you are within your performance budget.
  * [Performance Dashboard](performance-dashboard/) - keep track of your metrics and performance.
+ * [Performance Leaderboard](leaderboard/) - compare your pages with your competition.
  * [Plugins](plugins/) - list/disable/enable or create your own plugin.
  * [Pre/post scripting](prepostscript/) - run Selenium scripts before/after you test a URL.
  * [Setup S3](s3/) - how to setup S3 for your html result/videos and screenshots.

docs/documentation/sitespeed.io/leaderboard/index.md

@@ -0,0 +1,70 @@
+---
+layout: default
+title: Performance Leaderboard
+description: Setup up your own web performance leaderboard.
+keywords: dashboard, leaderboard, documentation, web performance, sitespeed.io
+nav: documentation
+category: sitespeed.io
+image: https://www.sitespeed.io/img/sitespeed-2.0-twitter.png
+twitterdescription: The web performance leaderboard.
+---
+
+[Documentation]({{site.baseurl}}/documentation/sitespeed.io/) / Performance Leaderboard
+
+# Performance Leaderboard
+{:.no_toc}
+
+* Let's place the TOC here
+{:toc}
+
+The [leaderboard dashboard](https://dashboard.sitespeed.io/dashboard/db/leaderboard) is the easist way to compare how you are doing against your competition. To get it going you need [Grafana](https://grafana.com) (6.2 or later) and Graphite. If you don't have that already, you can follow the instructions in [performance dashboard documentation](/documentation/sitespeed.io/performance-dashboard/#up-and-running-in-almost-5-minutes).
+
+The dashboard list the pages that you test. With fastest/best URL first (yes it is a leaderboard!). It looks like this:
+![Leaderboard example]({{site.baseurl}}/img/leaderboard-example.png)
+{: .img-thumbnail}
+
+But you really should try out our demo at [dashboard.sitespeed.io](https://dashboard.sitespeed.io/dashboard/db/leaderboard)  to really get a feel for it. The dashboard is generic and will work out of the box. But you can also modify it!
+
+The current version compares visual metrics, how the page is built, CPU time spent metrics and how many 3rd parties that is used.
+
+You can (and should) of course edit/change your own version of the dashboard:
+* You can configure the red/yellow/green limits for each dashboard
+* You can remove/add your own dashboards
+* You can make each dashboard larger/smaller depending on how many URLs you wanna test
+
+If you use Chrome to test you URLs you can see things like how many and how long CPU long tasks each page uses:
+
+![CPU Long tasks leaderboard]({{site.baseurl}}/img/long-task-leaderboard.png)
+{: .img-thumbnail}
+
+
+Or you can compare Coach performance and privacy score:
+
+![Score leaderboard]({{site.baseurl}}/img/score-leaderboard.png)
+{: .img-thumbnail}
+
+
+The easiest way is to setup is to create a text file with the URLs you wanna compare and then push the tests under the same Graphite namespace (`--graphite.namespace`). Then you automatically compare all the URLs.  Here's what it looks like for one of our tests:
+
+```
+https://www.google.com/
+https://www.youtube.com/
+https://www.facebook.com/
+https://www.baidu.com/
+https://en.wikipedia.org/wiki/Main_Page
+https://en.wikipedia.org/wiki/Barack_Obama
+http://xw.qq.com/
+https://world.taobao.com/
+https://www.tmall.com/
+https://us.yahoo.com/
+https://www.amazon.com/
+```
+
+And then we just use the namespace **alexaDesktop**. 
+
+When you try out our setup at [dashboard.sitespeed.io](https://dashboard.sitespeed.io/d/000000060/leaderboard) you should also look at the namespaces **alexaMobile**, **news** and **publicSectorDesktop** to check out more examples. And one more thing: you can also combine namespaces and compare multiple tests by using the namespace path: 
+
+![Score leaderboard]({{site.baseurl}}/img/combine-namespaces.png)
+{: .img-thumbnail-center}
+
+If you have any problem with dashboard, let us know in a [Github issue](https://github.com/sitespeedio/sitespeed.io/issues/new)!

docs/documentation/sitespeed.io/performance-dashboard/index.md

@@ -14,6 +14,8 @@ twitterdescription: Web performance dashboard using sitespeed.io.
 # Performance Dashboard
 {:.no_toc}
 
+Monitor the performance of your web site using the performance dashboard.
+
 * Let's place the TOC here
 {:toc}
 
@@ -67,10 +69,8 @@ The [page timings summary](https://dashboard.sitespeed.io/dashboard/db/page-timi
 ## Site summary
 The [site summary](https://dashboard.sitespeed.io/dashboard/db/site-summary) show metrics for a site (a summary of all URLs tested for that domain).
 
-## 3rd vs. 1st party
-How much does 3rd party code impact your page? To get this up and running, you should only need to configure the <code>--firstParty</code> parameter/regex when you run.
-
-You can see the [3rd vs. 1st party dashboard here](https://dashboard.sitespeed.io/dashboard/db/3rd-vs-1st-party).
+## The leaderboard
+We are so proud of our [leaderboard dashboard](https://dashboard.sitespeed.io/dashboard/db/leaderboard) so it has it owns [documentation page](/documentation/sitespeed.io/leaderboard/).
 
 ## WebPageTest dashboards
 We have two optional dashboards for WebPageTest to show how you can build them if you use WebPageTest through sitespeed.io.