14.0.0 docs (#3079)

docs/_posts/2020-07-09-sitespeed.io-14.0-browsertime-9.0.md

@@ -0,0 +1,129 @@
+---
+layout: default
+title: sitespeed.io 14.0 and Browsertime 9.0  
+description: New fresh dashboards, support for multiple screenshots, the easiest way to get Chrome User Experience data and documentation for how to do synthetic testing.
+authorimage: /img/aboutus/peter.jpg
+intro: New fresh dashboards, support for multiple screenshots, the easiest way to get Chrome User Experience data and documentation for how to do synthetic testing.
+keywords: sitespeed.io, browsertime, webperf
+image: https://www.sitespeed.io/img/8bit.png
+nav: blog
+---
+
+# sitespeed.io 14.0 and Browsertime 9.0 
+
+<img src="{{site.baseurl}}/img/8bit.png" class="pull-right img-big" alt="sitespeed.io the only Web Performance tool that run on a Commodore 64" width="250" height="213">
+
+Let us celebrate over [10 million downloads](https://hub.docker.com/v2/repositories/sitespeedio/sitespeed.io/) of the sitespeed.io Docker container and release sitespeed.io 14 and Browsertime 9!
+
+There are five important new things in the new release:
+* New updated Grafana dashboards with all the goodies from [Grafana 7.0](https://grafana.com/docs/grafana/latest/guides/whats-new-in-v7-0/). All Graphite dashboards is updated: sitespeed.io dashboards, WebPageTest and our plus-1 dashboard.
+* You can now see **all** screenshots for a run in sitespeed.io! This is super useful when you use scripting to test a user journey. You can take screenshots whenever you need and see the result on the result page, making it even easier then before to know what's going on.
+* We have a new section in the documentation: [web performance testing in practice focusing in synthetic testing]({{site.baseurl}}/documentation/sitespeed.io/web-performance-testing-in-practice/)! I've think this is the most comprehensive guide to synthetic testing that's out there.
+* You can [support us at Open Collective](https://opencollective.com/sitespeedio)! We need money to be able to run our test servers, run tests on mobile devices and use a dedicated bare metal server. Helping us with that will make sure we continue to release a bug free, feature rich Open Source tool!
+* You can get CrUx data direct from sitespeed.io (avoid using the +1 container) with the new crux-plugin.
+
+## New dashboards
+
+All the Graphite dashboards have been updated. There are four focused dashboards for sitespeed.io data:
+* [The page timings summary](https://dashboard.sitespeed.io/dashboard/db/page-timing-metrics) -  the dashboard focus on timing metrics for a tested page.
+* [The page summary dashboard](https://dashboard.sitespeed.io/dashboard/db/page-summary) shows metrics for a specific page. The dashboard focus on how your page was built and here you can see Coach score, AXE and other data.
+* [The site summary dashboard](https://dashboard.sitespeed.io/dashboard/db/site-summary) show metrics for a site (a summary of all URLs tested for that domain). 
+* [The leaderboard dashboard](https://dashboard.sitespeed.io/dashboard/db/leaderboard) helps you compare different pages and web sites.
+
+We also have a new and fresh version of the plus 1 dashboard [showing GPSI/CrUx/Lighthouse metrics](https://dashboard.sitespeed.io/dashboard/db/plus1). And the WebPageTest dashboards also got updated!
+
+Lets look at some of the dashboards. 
+
+The [page timings summary](https://dashboard.sitespeed.io/dashboard/db/page-timing-metrics) focus on timing metrics and is the number one dashboard you should use when you look for visual regressions. It also show all other timing metrics that is collected.
+
+![Page timing dashboard]({{site.baseurl}}/img/page-timings-dashboard.jpg)
+{: .img-thumbnail}
+
+And compare the metrics with last weeks metrics.
+
+![Page timing dashboard compared with last week]({{site.baseurl}}/img/page-timings-dashboard-2.jpg)
+{: .img-thumbnail}
+
+You will also see navigation timing, element timing and user timings.
+
+![Page timing with element timings]({{site.baseurl}}/img/page-timings-dashboard-3.jpg)
+{: .img-thumbnail}
+
+
+The [page summary](https://dashboard.sitespeed.io/dashboard/db/page-summary) shows metrics for a specific URL/page. The dashboard focus on how your page was built. The red/yellow/green limits are configurable in Grafana.
+
+![Page summary]({{site.baseurl}}/img/page-summary.png)
+{: .img-thumbnail}
+
+You can also see CPU performance, third party tools and more.
+
+![Page summary and third party]({{site.baseurl}}/img/page-summary-dashboard-2.jpg)
+{: .img-thumbnail}
+
+And AXE, CO2 and errors (and a lot more).
+
+![Page summary co2]({{site.baseurl}}/img/page-summary-dashboard-3.jpg)
+{: .img-thumbnail}
+
+We also added a new dashboard for your sites data from the [Chrome User Experience Report plugin](/documentation/sitespeed.io/crux/).
+
+![CruX]({{site.baseurl}}/img/crux-dashboard.jpg)
+{: .img-thumbnail}
+
+And if you use the +1 container running Google stuff you can graph Google Page Speed Insights data including CrUx out of the box and it looks like this:
+
+![Plus 1 dashboard]({{site.baseurl}}/img/plus-1-dashboard.jpg)
+{: .img-thumbnail}
+
+![Plus 1 dashboard part 2]({{site.baseurl}}/img/plus-1-dashboard-2.jpg)
+{: .img-thumbnail}
+
+You can [read more about the dashboards in the documentation]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/#example-dashboards). 
+
+## Screenshots
+
+Using [scripting]({{site.baseurl}}/documentation/sitespeed.io/scripting/) you can take screenshots whenever you need. That's super useful if your script fails because a content change. Take a screenshot when it fails and you can see that in the result. Choose the run and the tab **Screenshots**.
+
+![Screenshots]({{site.baseurl}}/img/multiple-screenshots.jpg)
+{: .img-thumbnail}
+
+## Documentation for synthetic testing
+
+There's a lot of things you need to know when you start run performance test your web page. I've been working on documenting what I've learned through the years and finally it's ready! Read all about [web performance in practice]({{site.baseurl}}/documentation/sitespeed.io/web-performance-testing-in-practice/). 
+
+## Support sitespeed.io
+
+We've been running sitespeed.io for eight years without financial support. Instead we used host companies to sponsor our test servers and paid for the rest our selves. It worked OK but we want to move away of being dependent of hosting companies and instead being able to choose hosts.
+
+Keeping a performance monitoring tools like sitespeed.io up and running cost money. At the moment we use four cloud instances to run [dashboard.sitespeed.io](https://dashboard.sitespeed.io), run continuous test for sitespeed.io and browsertime. The cost for that is $200 per month.
+
+The next step for us is to add monitoring on real mobile phones. We support both Android and iOS but at the moment the tests we do happens manually per release. We want to continuously run the tests and will use the money to find a company to host our phones.
+
+We also want to have a comprehensive guide on how to run your tests on bare metal and to be able to do that, we need to have a bare metal server.
+
+You can help us by [supporting us at Open Collective](https://opencollective.com/sitespeedio)!
+
+## CrUx data
+We have built a new [Chrome User Experience Report plugin](/documentation/sitespeed.io/crux/) that comes bundled with sitespeed.io. The only thing you need to get CrUX data is a [CrUx API key](https://developers.google.com/web/tools/chrome-user-experience-report/api/guides/getting-started#APIKey). We collect data for the specific URL and for the origin. 
+
+You can get the data per form factor, or for all of them. Read [the documentation on how to best setup CrUx](/documentation/sitespeed.io/crux/)!
+
+## Other changes done earlier in 2020
+We have done a lot of things earlier this year, we added support for Visual Metrics on Safari on OS X, use Safari Technology Preview on desktop and some tuning in using Safari on iOS.
+
+![Run Browsertime Safari]({{site.baseurl}}/img/safari.png)
+{: .img-thumbnail-center}
+
+We also added support for Microsoft Edge ([Linux coming soon?](https://www.microsoftedgeinsider.com/en-us/download?platform=linux)).
+
+![Run Browsertime Edge]({{site.baseurl}}/img/edge.png)
+{: .img-thumbnail-center}
+
+We made sure sitespeed.io works on OS X, Windows and Linux without using Docker. If you want to run sitespeed.io without Docker, you can check [our GitHub Actions](https://github.com/sitespeedio/browsertime/tree/main/.github/workflows) as inspiration.
+
+And we moved to use **main** as default branch for all projects.
+
+## And more in the latest release
+We also done a couple of bug fixes. Checkout the [Browsertime changelog](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md) and the [sitespeed.io changelog](https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md) for the full list. 
+
+/Peter

docs/documentation/browsertime/index.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Documentation Browsertime 8
+title: Documentation Browsertime 9
 description: Read about all you can do with Browsertime.
 keywords: tools, documentation, web performance
 nav: documentation
@@ -9,11 +9,11 @@ image: https://www.sitespeed.io/img/sitespeed-2.0-twitter.png
 twitterdescription: Documentation for Browsertime.
 ---
 
-# Documentation v8
+# Documentation v9
 
 <img src="{{site.baseurl}}/img/logos/browsertime.png" class="pull-right img-big" alt="Browsertime logo" width="200" height="175">
 
-Browsertime is the heart of sitespeed.io that handles everything with the browser. At the moment we support Chrome and Firefox on desktop, Chrome on Android and limited support for Safari on OS X and iOS. You can see all the latest changes in the [Changelog](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md) for the project.
+Browsertime is the heart of sitespeed.io that handles everything with the browser. At the moment we support Chrome, Firefox, Edge and Safari on desktop, Chrome on Android and limited support for Safari on iOS. You can see all the latest changes in the [Changelog](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md) for the project.
 
  * [Introduction](introduction/) - what you can do with Browsertime.
  * [Installation](installation/) - install using npm, yarn or run our Docker containers.

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

@@ -151,8 +151,8 @@ There are a couple of different ways to choose which device to use:
 
 * `--safari.deviceName` set the device name. Device names for connected devices are shown in iTunes.
 * `--safari.deviceUDID` set the device UDID. If Xcode is installed, UDIDs for connected devices are available via the output of instruments(1) and in the Device and Simulators window accessed in Xcode via "Window > Devices and Simulators")
-* `--safari.deviceType` set the device type. If the value of *safari:deviceType* is `iPhone`, safaridriver will only create a sessio using an iPhone device or iPhone simulator. If the value of *safari:deviceType* is `iPad`, safaridriver will only create a session using an iPad device or iPad simulator.
-* `--safari.useSimulator` if the value of useSimulator is true, safaridriver will only use iOS Simulator hosts. If the value of safari:useSimulator is false, safaridriver will not use iOS Simulator hosts. NOTE: An Xcode installation is required in order to run WebDriver tests on iOS
+* `--safari.deviceType` set the device type. If the value of *safari:deviceType* is `iPhone`, SafariDriver will only create a session using an iPhone device or iPhone simulator. If the value of *safari:deviceType* is `iPad`, SafariDriver will only create a session using an iPad device or iPad simulator.
+* `--safari.useSimulator` if the value of useSimulator is true, SafariDriver will only use iOS Simulator hosts. If the value of safari:useSimulator is false, SafariDriver will not use iOS Simulator hosts. NOTE: An Xcode installation is required in order to run WebDriver tests on iOS
 
 #### Use Safari Technology Preview
 If you have Safari Technology Preview installed you can use it to run your test. Add `--safari.useTechnologyPreview` to your test.
@@ -176,7 +176,7 @@ sitespeed.io -b edge https://www.sitespeed.io
 Edge use the exact same setup as Chrome (except the driver), so you use `--chrome.*` to configure Edge :) 
 
 ## Choose when to end your test
-By default the browser will collect data until  [window.performance.timing.loadEventEnd happens + aprox 5 seconds more](https://github.com/sitespeedio/browsertime/blob/d68261e554470f7b9df28797502f5edac3ace2e3/lib/core/seleniumRunner.js#L15). That is perfectly fine for most sites, but if you do Ajax loading and you mark them with user timings, you probably want to include them in your test. Do that by changing the script that will end the test (```--browsertime.pageCompleteCheck```). When the scripts returns true the browser will close or if the timeout time is reached.
+By default the browser will collect data until  [window.performance.timing.loadEventEnd happens + approx 5 seconds more](https://github.com/sitespeedio/browsertime/blob/d68261e554470f7b9df28797502f5edac3ace2e3/lib/core/seleniumRunner.js#L15). That is perfectly fine for most sites, but if you do Ajax loading and you mark them with user timings, you probably want to include them in your test. Do that by changing the script that will end the test (```--browsertime.pageCompleteCheck```). When the scripts returns true the browser will close or if the timeout time is reached.
 
 In this example we wait 10 seconds until the loadEventEnd happens, but you can also choose to trigger it at a specific event.
 
@@ -248,16 +248,16 @@ You can generate a TCP dump with `--tcpdump`.
 docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:{% include version/sitespeed.io.txt %} https://www.sitespeed.io/ --tcpdump
 ~~~
 
-You can then download the tcp dump for each iteration and the SSL key log file from the result page.
+You can then download the TCP dump for each iteration and the SSL key log file from the result page.
 
 Packets will be written when the buffer is flushed. If you want to force packets to be written to the file when they arrive you can do that with `--tcpdumpPacketBuffered`.
 
 ## WebDriver
 We use the WebDriver to drive the browser. We use [Chromedriver](https://chromedriver.chromium.org) for Chrome, [Geckodriver](https://github.com/mozilla/geckodriver/releases) for Firefox, [Edgedriver](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/) for Edge and [Safaridriver](https://developer.apple.com/documentation/webkit/testing_with_webdriver_in_safari) for Safari.
 
-When you install sitespeed.io/Browsertime we also install the latest released driver for Chrome, Edge and Firefox. Safari comes bundled with Safari driver. For Chrome the Chromedriver version needs to match the Chrome version. That can be annying if you want to test on old browsers, coming developer versions or on Android where that version hasn't been released yet.
+When you install sitespeed.io/Browsertime we also install the latest released driver for Chrome, Edge and Firefox. Safari comes bundled with Safari driver. For Chrome the Chromedriver version needs to match the Chrome version. That can be annoying if you want to test on old browsers, coming developer versions or on Android where that version hasn't been released yet.
 
-You can download the Chromedriver yourself from the [Google repo](https://chromedriver.storage.googleapis.com/index.html) and use ```--chrome.chromedriverPath``` to help Browsertime find it or you can choose which version to install when you install sitespeed.io with a environment variable: ```CHROMEDRIVER_VERSION=81.0.4044.20 npm install ```
+You can download the ChromeDriver yourself from the [Google repo](https://chromedriver.storage.googleapis.com/index.html) and use ```--chrome.chromedriverPath``` to help Browsertime find it or you can choose which version to install when you install sitespeed.io with a environment variable: ```CHROMEDRIVER_VERSION=81.0.4044.20 npm install ```
 
 You can also choose versions for Edge and Firefox with `EDGEDRIVER_VERSION` and `GECKODRIVER_VERSION`.
 

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

@@ -0,0 +1,56 @@
+---
+layout: default
+title: Collect Chrome User Experience Report - CrUx using sitespeed.io
+description: Get data for the URL and domain that you test.
+keywords: cpu, documentation, web performance, sitespeed.io
+nav: documentation
+category: sitespeed.io
+image: https://www.sitespeed.io/img/sitespeed-2.0-twitter.png
+twitterdescription: Collect Chrome User Experience Report - CrUx using sitespeed.io
+---
+
+[Documentation]({{site.baseurl}}/documentation/sitespeed.io/) / Collect Chrome User Experience Report (CrUx)
+
+# Collect Chrome User Experience Report
+{:.no_toc}
+
+* Lets place the TOC here
+{:toc}
+
+## Get CrUx data
+sitespeed.io has a CrUx plugin that can collect data from the [Chrome User Experience Report API](https://web.dev/chrome-ux-report-api/). To do that you need a CrUx API key that you can get [from Google](https://developers.google.com/web/tools/chrome-user-experience-report/api/guides/getting-started#APIKey) (click on the button **Get a Key**). When you have the key you can get CrUx data using sitespeed.io.
+
+~~~bash
+sitespeed.io --crux.key $CRUX_API_KEY https://www.sitespeed.io
+~~~
+
+If you send the data to Graphite you want to push the data to its own namespace ```--graphite.namespace sitespeedio.crux``` and you probably want to seperate the data from your sitespeed.io data, so you can disable Browsertime and do one run just to get the CrUx data. CrUx data changes doesn't change so often so you can just run it once per day.
+
+The plugin collect data for the specific URL that you test AND the origin (domain). 
+
+Here's a full example of getting CrUx data, disable browsertime for that run and send the data to the namespace sitespeedio.crux.
+
+~~~bash
+sitespeed.io --crux.key $CRUX_API_KEY --plugins.remove browsertime --graphite.namespace sitespeedio.crux https://www.sitespeed.io
+~~~
+
+You will get a new tab in your result HTML with the CrUx data.
+
+## Form factor
+The CrUx data has four different buckets depending on device: DESKTOP, PHONE, TABLET and ALL. You can choose which data to get with ```--crux.formFactor```. Getting only phone data: ```--crux.formFactor PHONE```. If you want to collect data for multiple form factors, add ```--crux.formFactor`` multiple times.
+
+~~~bash
+sitespeed.io --crux.key $CRUX_API_KEY --crux.formFactor PHONE --crux.formFactor ALL https://www.sitespeed.io
+~~~
+
+
+## Collect URL or origin data or both
+You can choose to collect data specific only for a URL, for the origin (domain) or for both of them (using **ALL**). Use the switch ```--crux.collect```. By default both URL and origin data is collected.
+
+Lets collect only origin data:
+~~~bash
+sitespeed.io --crux.key $CRUX_API_KEY --crux.collect ORIGIN https://www.sitespeed.io
+~~~
+
+## Limitations
+You can not get CrUx data if you use [scripting](/documentation/sitespeed.io/scripting/).

docs/documentation/sitespeed.io/index.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Documentation sitespeed.io 13.x
+title: Documentation sitespeed.io 14.x
 description: Read about all you can do with sitespeed.io.
 keywords: tools, documentation, web performance
 nav: documentation
@@ -9,7 +9,7 @@ image: https://www.sitespeed.io/img/sitespeed-2.0-twitter.png
 twitterdescription: Documentation for sitespeed.io.
 ---
 
-# Documentation v13
+# Documentation v14
 
 <img src="{{site.baseurl}}/img/logos/sitespeed.io.png" class="pull-right img-big" alt="sitespeed.io logo" width="200" height="214">
 
@@ -37,6 +37,7 @@ Sitespeed.io is the complete toolbox to test the web performance of your web sit
  * [Configure HTML output](configure-html/) - change the default HTML output.
  * [Configure Metrics](configure-metrics/) - configure which metrics you want to send to Graphite/InfluxDB.
  * [CPU](cpu/) - measure CPU metrics to see where your page spends the time.
+ * [Chrome User Experience Report](crux/) - collect Chrome User Experience Report data in sitespeed.io.
  * [Developers](developers/) - start here when you want to do PRs or create a plugin.
  * [Google Page Speed Insights](google-page-speed-insights/) - run Google Page Speed Insights (GPSI) from sitespeed.io.
  * [Graphite](graphite/) - how to configure and store your metrics in Graphite (and using StatsD).

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

@@ -42,7 +42,7 @@ That will output the data from the run in the current directory. You can read mo
 
 ### Mac & Linux
 
-Prerequisites: Install [latest NodeJS LTS](https://nodejs.org/en/download/) ([Linux](https://github.com/creationix/nvm)) and make sure you have [npm](https://github.com/npm/npm) or [yarn](https://yarnpkg.com/) installed. Also install Chrome/Firefox (you need them to collect metrics).
+Prerequisites: Install [latest NodeJS LTS](https://nodejs.org/en/download/) ([Linux](https://github.com/creationix/nvm)) and make sure you have [npm](https://github.com/npm/npm) or [yarn](https://yarnpkg.com/) installed. Also install Chrome/Firefox/Edge (you need them to collect metrics).
 
 Make sure you install without sudo using sudo. Checkout [Sindre Sorhus guide](https://github.com/sindresorhus/guides/blob/main/npm-global-without-sudo.md).
 
@@ -62,9 +62,11 @@ yarn global add sitespeed.io
 
 ### Windows
 
-We support Windows using [Docker](https://docs.docker.com/engine/installation/windows/). To be able to support running on Windows with NodeJS we need at least one [core contributor](/aboutus/) that can focus on Windows. Are you that one? Please [get in touch](https://github.com/sitespeedio/sitespeed.io/issues/new)!
+Checkout [our GitHub action running in Windows](https://github.com/sitespeedio/browsertime/blob/main/.github/workflows/windows.yml) to see how to install the dependencies needed.
 
-### Skip installing ChromeDriver/GeckoDriver
+If you run on Windows you can run tests on Firefox, Chrome and Edge.
+
+### Skip installing ChromeDriver/GeckoDriver/EdgeDriver
 If you don't want to install ChromeDriver, EdgeDriver or GeckoDriver when you install through npm you can skip them with an environment variable.
 
 Skip installing ChromeDriver:
@@ -83,4 +85,15 @@ Skip installing EdgeDriver:
 
 ~~~bash
 EDGEDRIVER_SKIP_DOWNLOAD=true npm install sitespeed.io -g
-~~~
+~~~
+
+### Updating ChromeDriver/GeckoDriver/EdgeDriver
+
+Using Docker the browser and driver is bundled with the correct versions. If you install everything yourself you may need to update driver versions.
+
+Since the ChromeDriver team decided that a ChromeDriver version needs to match a browser version, it has been more work to test other Chrome versions.
+
+You can download the ChromeDriver yourself from the [Google repo](https://chromedriver.storage.googleapis.com/index.html) and use ```--chrome.chromedriverPath``` to help Browsertime find it or you can choose which version to install when you install sitespeed.io with a environment variable: 
+```CHROMEDRIVER_VERSION=81.0.4044.20 npm install ```
+
+You can also choose versions for Edge and Firefox with `EDGEDRIVER_VERSION` and `GECKODRIVER_VERSION`.

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

@@ -59,37 +59,121 @@ When you choose one of the values in a template, the rest will be populated. You
 The default namespace is *sitespeed_io.default* and the example dashboards are built upon a constant template variable called $base that is the first part of the namespace (that default is *sitespeed_io* but feel free to change that, and then change the constant).
 
 ## Page summary
-The [page summary](https://dashboard.sitespeed.io/dashboard/db/page-summary) shows metrics for a specific URL/page.
+The [page summary](https://dashboard.sitespeed.io/dashboard/db/page-summary) shows metrics for a specific URL/page. The dashboard focus on how your page was built.
 
+![Page summary]({{site.baseurl}}/img/page-summary.png)
+{: .img-thumbnail}
+
+You can also see CPU performance, third party tools and more.
+
+![Page summary and third party]({{site.baseurl}}/img/page-summary-dashboard-2.jpg)
+{: .img-thumbnail}
+
+And AXE, CO2 and errors (and a lot more).
+
+![Page summary co2]({{site.baseurl}}/img/page-summary-dashboard-3.jpg)
+{: .img-thumbnail}
 
 ## The page timings summary
 
-The [page timings summary](https://dashboard.sitespeed.io/dashboard/db/page-timing-metrics) focus on Visual Metrics and is the number one dashboard you should use when you look for visual regressions.
+The [page timings summary](https://dashboard.sitespeed.io/dashboard/db/page-timing-metrics) focus on timing metrics and is the number one dashboard you should use when you look for visual regressions. It also show all other timing metrics that is collected.
+
+You can follow visual metrics.
+
+![Page timing dashboard]({{site.baseurl}}/img/page-timings-dashboard.jpg)
+{: .img-thumbnail}
+
+And compare the metrics with last weeks metrics.
+
+![Page timing dashboard compared with last week]({{site.baseurl}}/img/page-timings-dashboard-2.jpg)
+{: .img-thumbnail}
+
+You will also see navigation timing, element timing and user timings.
+
+![Page timing with element timings]({{site.baseurl}}/img/page-timings-dashboard-3.jpg)
+{: .img-thumbnail}
+
 
 ## 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).
 
+![Site summary]({{site.baseurl}}/img/site-summary-dashboard.jpg)
+{: .img-thumbnail}
+
+
+![Site summary with more metrics]({{site.baseurl}}/img/site-summary-dashboard-2.jpg)
+{: .img-thumbnail}
+
+
 ## 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/).
+We are so proud of our [leaderboard dashboard](https://dashboard.sitespeed.io/dashboard/db/leaderboard) so it has it own [documentation page](/documentation/sitespeed.io/leaderboard/). Use the dashboard when you compare different sites or URLs.
+
+![Page summary]({{site.baseurl}}/img/leaderboard-dashboard.jpg)
+{: .img-thumbnail}
+
+
+## Chrome User Experience Report
+
+Using our [Chrome User Experience Report plugin](/documentation/sitespeed.io/crux/) you can get the metrics Chrome collect from real users. We have a [ready made dashboard](https://dashboard.sitespeed.io/dashboard/db/chrome-user-experience-report) where you can look at the data on URL and origin level.
+
+![CruX]({{site.baseurl}}/img/crux-dashboard.jpg)
+{: .img-thumbnail}
 
 ## WebPageTest dashboards
-We have two optional dashboards for WebPageTest to show how you can build them if you use WebPageTest through sitespeed.io.
+We have four optional dashboards for WebPageTest that you can use if you drive WebPageTest using sitespeed.io. They follow the same pattern as the sitespeed.io dashboards with WebPageTest data.
 
 ### WebPageTest page summary
-Have we told you that we love WebPageTest? Yes, we have and here is an example of a default [WebPageTest page summary](https://dashboard.sitespeed.io/dashboard/db/webpagetest-page-summary) where you can look at results for individual URLs.
+We have and here is an example of a default [WebPageTest page summary](https://dashboard.sitespeed.io/dashboard/db/webpagetest-page-summary) where you can look at results for individual URLs.
+
+
+![Page summary]({{site.baseurl}}/img/webpagetest-pagesummary-dashboard.jpg)
+{: .img-thumbnail}
+
+
+### WebPageTest timing metrics
+And then there is also a dashboard for [the timing metrics](https://dashboard.sitespeed.io/dashboard/db/webpagetest-page-timing-metrics).
+
+![Timing metrics WebPageTest]({{site.baseurl}}/img/webpagetest-metricsummary-dashboard.jpg)
+{: .img-thumbnail}
 
 ### WebPageTest site summary
 And then there is also a dashboard for [all tested pages of a site](https://dashboard.sitespeed.io/dashboard/db/webpagetest-site-summary).
 
+![Site summary]({{site.baseurl}}/img/webpagetest-sitesummary-dashboard.jpg)
+{: .img-thumbnail}
+
+
+### WebPageTest leaderboard
+And then there is also a [leaderboard dashboard](https://dashboard.sitespeed.io/dashboard/db/webpagetest-leaderboard).
+
+![Leaderboard for WebPageTest]({{site.baseurl}}/img/webpagetest-leaderboard-dashboard.jpg)
+{: .img-thumbnail}
+
+
+## Plus 1
+We also have a dashboard for [showing GPSI/CrUx/Lighthouse metrics](https://dashboard.sitespeed.io/dashboard/db/plus1) if you use those products.
+
+![Plus 1 dashboard]({{site.baseurl}}/img/plus-1-dashboard.jpg)
+{: .img-thumbnail}
+
+![Plus 1 dashboard part 2]({{site.baseurl}}/img/plus-1-dashboard-2.jpg)
+{: .img-thumbnail}
+
+
 ## Whatever you want
 Do you need anything else? Since we store all the data in Graphite and use Grafana you can create your own dashboards, which is super simple!
 
 If you are new to [Grafana](https://grafana.com) you should checkout the [basic concepts](https://grafana.com/docs/guides/basic_concepts/) as a start. Grafana is used by Cern, NASA and many many tech companies like Paypal, Ebay and Digital Ocean and it will surely work for you too :)
 
+You can also configure all the thresholds (green/yellow/red) so they match what you need:
+
+![Configure thresholds in Grafana]({{site.baseurl}}/img/configuring-thresholds-grafana.jpg)
+{: .img-thumbnail}
+
 # Configure running your tests
 You have the dashboard and you need to collect metrics. You do that on one or multiple other servers. Do not do it on the same server as the dashboard setup since you want to have an as isolated environment as possible for your tests.
 
-Go to the docmumentation on how to [continuously run your tests](/documentation/sitespeed.io/continuously-run-your-tests/) and learn how you can do that.
+Go to the documentation on how to [continuously run your tests](/documentation/sitespeed.io/continuously-run-your-tests/) and learn how you can do that.
 
 When you run the dashboard on a standalone server, you need to make sure your agents send the metrics to your Graphite server. Configure `--graphite.host` to the public IP address of your server. The default port when sending metrics to Graphite is 2003, so you don't have to include that.
 

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

@@ -878,7 +878,10 @@ Add the *text* to the element by using the attribute name. If the element is not
 Add the *text* to the element by using class name. If the element is not found the command will throw an error.
 
 ### Screenshot
-Take a screenshot. The image will automatically be stored in the screenshot directory for the URL you are testing. This can be super helpful to use in a catch block if something fails. 
+Take a screenshot. The image is stored in the screenshot directory for the URL you are testing. This can be super helpful to use in a catch block if something fails. If you use sitespeed.io you can find the image in the screenshot tab for each individual run. 
+
+![Screenshots]({{site.baseurl}}/img/multiple-screenshots.jpg)
+{: .img-thumbnail-center}
 
 #### screenshot.take(name) 
 Give your screenshot a name and it will be used together with the iteration index to store the image.