make it easier to copy/paste example code (#1773)
This commit is contained in:
Peter Hedenskog
GitHub
parent
d76783d341
commit
a998d0abf2
|
|
@ -1,8 +1,13 @@
|
|||
.white {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.lightblue {
|
||||
background-color: #e1e4fd;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.copy {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
@ -92,6 +97,10 @@ font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.language-bash code:before {
|
||||
content: '$ ';
|
||||
}
|
||||
|
||||
.note-info {
|
||||
background-color: #f0f7fd;
|
||||
border-color: #d0e3f0;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@
|
|||
* * *
|
||||
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.
|
||||
|
||||
~~~ bash
|
||||
$ docker pull sitespeedio/sitespeed.io
|
||||
$ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ -b firefox
|
||||
~~~bash
|
||||
docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ -b firefox
|
||||
~~~
|
||||
|
||||
To set the connectivity follow our [connectivity guide]({{site.baseurl}}/documentation/sitespeed.io/connectivity) for Docker.
|
||||
|
|
|
|||
|
|
@ -2,15 +2,22 @@ Use our [Docker container](https://hub.docker.com/r/sitespeedio/sitespeed.io/) t
|
|||
|
||||
**Docker**
|
||||
|
||||
~~~ bash
|
||||
$ docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
**npm**
|
||||
|
||||
~~~ bash
|
||||
$ npm install -g sitespeed.io
|
||||
$ sitespeed.io -h
|
||||
Install sitespeed.io globally:
|
||||
|
||||
~~~bash
|
||||
npm install -g sitespeed.io
|
||||
~~~
|
||||
|
||||
And then run help to see what you can do:
|
||||
|
||||
~~~bash
|
||||
sitespeed.io --help
|
||||
~~~
|
||||
|
||||
Follow our [connectivity guide]({{site.baseurl}}/documentation/sitespeed.io/connectivity) when to emulate real users connectivity.
|
||||
|
|
|
|||
|
|
@ -16,16 +16,15 @@ Yes we have finally released 4.0. We ([Peter](https://twitter.com/soulislove)/[T
|
|||
|
||||
Before reading, you should just try it out:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
Or using npm:
|
||||
|
||||
|
||||
~~~ bash
|
||||
$ npm install -g sitespeed.io
|
||||
$ sitespeed.io -h
|
||||
~~~bash
|
||||
npm install -g sitespeed.io
|
||||
~~~
|
||||
|
||||
## Background
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ Recording a video and slicing and dicing the result needs a lot of extra softwar
|
|||
|
||||
If you wanna collect SpeedIndex (and First Visual Change, Last Visual Change and Perceptual Speed Index) you run like this:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --video --speedIndex -c cable https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --video --speedIndex -c cable https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
All metrics will automatically be shown in the result report and sent to Graphite if you run is configured to do that. You will also get a video on your Browsertime result tab that looks like this:
|
||||
|
|
@ -39,8 +39,8 @@ Also a very special thanks to [Walter Ebert](https://github.com/walterebert) tha
|
|||
## Introducing pre URL and second view
|
||||
The other big thing in 4.1 is that we made it easy to test second view. Ehh, second view you say? Well many tools have the repeat view (they access the same URL twice), to make it easy to see how the cache works. In real user scenarios it's better to first access one URL and then go to another that you want to measure (exactly as a user would do). In 4.0 we had support for that, but you needed to supply your own preScript. In 4.1 we made it super easy, just add the URL in the cli:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -c cable --preURL https://www.sitespeed.io/ https://www.sitespeed.io/documentation/
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -c cable --preURL https://www.sitespeed.io/ https://www.sitespeed.io/documentation/
|
||||
~~~
|
||||
|
||||
The browser will first access the preURL and then the URL you want to measure. If you have assets that are cached between requests, you can see that now. With this update you will now have a more realistic way of measuring when your user first go to your sites start page and then accesses the next.
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ With 4.4.0 we added support for some of what we think are really nice features:
|
|||
In a [previous post]({{site.baseurl}}/usertimings-best-practices) on best practices for user timings we talked about concerns and how to manage your user timings by namespacing them. This feature
|
||||
allows you to now define that namespace to filter out all other that do not match. Yay! The following will whitelist and capture only user timings that are prefixed with `sitespeedio_`.
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --userTimingWhitelist "^sitespeedio_" https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --userTimingWhitelist "^sitespeedio_" https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
|
||||
|
|
@ -32,8 +32,8 @@ This is great since it now easy to filter out only the user timings that you nee
|
|||
|
||||
This feature allows for annotations automatically to be sent to Graphite and picked up Grafana, so we can link between metrics in Grafana and HTML result pages. These annotations can be configure along side of S3, so it's super easy to keep the result and have everything you need to keep track of your sites performance. Finally the gap between Grafana and the HTML generated results by sitespeedio is here :)
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox -n 1 --graphite.host <your graphite host> --resultBaseURL https://example.yoursite.com https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox -n 1 --graphite.host <your graphite host> --resultBaseURL https://example.yoursite.com https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
|
||||
|
|
@ -47,8 +47,8 @@ Note: if you have authentication setup you will need to pass `--graphite.auth <u
|
|||
This feature will allow for capturing resulting HTML reports/videos and HAR files and uploading them to an S3 bucket for storage. And then you can setup S3 to serve HTML as a server.
|
||||
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox -n 1 --graphite.host <location to your graphite instance> --resultBaseURL https://example.yoursite.com --s3.key <insert key here> --s3.secret <insert secret here> --s3.bucketname <insert your bucket name here> https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox -n 1 --graphite.host <location to your graphite instance> --resultBaseURL https://example.yoursite.com --s3.key <insert key here> --s3.secret <insert secret here> --s3.bucketname <insert your bucket name here> https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
This is nice because you can setup S3 to keep the result for your runs for X days and have the same configuration for Graphite, so that you go back and forth from the graphs to the result pages (see next feature!).
|
||||
|
|
|
|||
|
|
@ -24,14 +24,13 @@ We have [Docker images](https://hub.docker.com/r/sitespeedio/browsertime/) with
|
|||
|
||||
### Mac & Linux
|
||||
|
||||
~~~ bash
|
||||
$ docker pull sitespeedio/browsertime
|
||||
$ docker run --shm-size=1g --rm -v "$(pwd)":/browsertime sitespeedio/browsertime --video --speedIndex https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --shm-size=1g --rm -v "$(pwd)":/browsertime sitespeedio/browsertime --video --speedIndex https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
### Windows
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
C:\Users\Vicky> docker pull sitespeedio/browsertime
|
||||
C:\Users\Vicky> docker run --rm -v "$(pwd)":/browsertime sitespeedio/browsertime https://www.sitespeed.io -b firefox
|
||||
~~~
|
||||
|
|
@ -47,17 +46,15 @@ Prerequisites: Install [latest NodeJS LTS](https://nodejs.org/en/download/) ([Li
|
|||
#### npm
|
||||
If you prefer npm, just run:
|
||||
|
||||
~~~ bash
|
||||
$ npm install browsertime -g
|
||||
$ browsertime --help
|
||||
~~~bash
|
||||
npm install browsertime -g
|
||||
~~~
|
||||
|
||||
#### yarn
|
||||
Or with [yarn](https://yarnpkg.com/):
|
||||
|
||||
~~~ bash
|
||||
$ yarn global add browsertime
|
||||
$ browsertime --help
|
||||
~~~bash
|
||||
yarn global add browsertime
|
||||
~~~
|
||||
|
||||
### Windows
|
||||
|
|
|
|||
|
|
@ -81,8 +81,13 @@ Visit http://localhost:4000/ in the browser of your choice.
|
|||
## Debugging with Chrome
|
||||
You can debug sitespeed.io using Chrome and NodeJS > 6. Thanks [@moos](https://github.com/moos) for sharing.
|
||||
|
||||
~~~ bash
|
||||
$ node --inspect --debug-brk bin/sitespeed.js -m25 -n1 http://0.0.0.0:8082
|
||||
~~~bash
|
||||
node --inspect --debug-brk bin/sitespeed.js -m25 -n1 http://0.0.0.0:8082
|
||||
~~~
|
||||
|
||||
And you will get something like this:
|
||||
|
||||
~~~
|
||||
Debugger listening on port 9229.
|
||||
Warning: This is an experimental feature and could change at any time.
|
||||
To start debugging, open the following URL in Chrome:
|
||||
|
|
|
|||
|
|
@ -38,22 +38,22 @@ We lock down the browsers to specific versions for maximum compatibility and sta
|
|||
|
||||
The simplest way to run using Chrome:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
Note: The shm-size increases the memory for the GPU (default is 64mb and that is too small) see [https://github.com/elgalu/docker-selenium/issues/20](https://github.com/elgalu/docker-selenium/issues/20).
|
||||
|
||||
In the real world you should always specify the exact version (tag) of the Docker container to make sure you use the same version for every run. If you use the latest tag you will download newer version of sitespeed.io as they become available, meaning you can have major changes between test runs (version upgrades, dependencies updates, browser versions, etc). So you should always specify a tag after the container name(X.Y.Z). Know that the tag/version number will be the same number as the sitespeed.io release:
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:X.Y.Z -b chrome https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
If you want to use Firefox:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:X.Y.Z -b firefox https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:X.Y.Z -b firefox https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
Using `-v "$(pwd)":/sitespeed.io` will map the current directory inside Docker and output the result directory there.
|
||||
|
|
@ -70,7 +70,7 @@ If you run on Windows, it could be that you need to map a absolute path. If you
|
|||
## Update (download a newer sitespeed.io)
|
||||
When using Docker upgrading to a newer version is super easy, change X.Y.Z to the version you want to use:
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker pull sitespeedio/sitespeed.io:X.Y.Z
|
||||
~~~
|
||||
|
||||
|
|
@ -82,8 +82,8 @@ If you want to make sure your containers have the same time as the host, you can
|
|||
|
||||
Full example:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --rm -v "$(pwd)":/sitespeed.io -v /etc/localtime:/etc/localtime:ro sitespeedio/sitespeed.io -b firefox https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --rm -v "$(pwd)":/sitespeed.io -v /etc/localtime:/etc/localtime:ro sitespeedio/sitespeed.io -b firefox https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
## Change connectivity
|
||||
|
|
@ -94,8 +94,8 @@ To change connectivity you should use Docker networks, read all about it [here](
|
|||
|
||||
If you run a server local on your machine and want to access it with sitespeed.io you can do that on your Mac by using the Docker fixed ip 192.168.65.1:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox http://192.168.65.1:4000/
|
||||
~~~bash
|
||||
docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox http://192.168.65.1:4000/
|
||||
~~~
|
||||
|
||||
## Troubleshooting
|
||||
|
|
@ -103,7 +103,7 @@ $ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox
|
|||
### Inspect the container
|
||||
In 4.0 we autostart sitespeed.io. If you want to check what's in the container, you can do that by changing the entry point.
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker run -it --entrypoint bash sitespeedio/sitespeed.io:4.0.0
|
||||
~~~
|
||||
|
||||
|
|
|
|||
|
|
@ -24,14 +24,13 @@ We have [Docker images](https://hub.docker.com/r/sitespeedio/sitespeed.io/) with
|
|||
|
||||
### Mac & Linux
|
||||
|
||||
~~~ bash
|
||||
$ docker pull sitespeedio/sitespeed.io
|
||||
$ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io -b firefox
|
||||
~~~bash
|
||||
docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io -b firefox
|
||||
~~~
|
||||
|
||||
### Windows
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
C:\Users\Vicky> docker pull sitespeedio/sitespeed.io
|
||||
C:\Users\Vicky> docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io -b firefox
|
||||
~~~
|
||||
|
|
@ -47,17 +46,15 @@ Prerequisites: Install [latest NodeJS LTS](https://nodejs.org/en/download/) ([Li
|
|||
#### npm
|
||||
If you prefer npm, just run:
|
||||
|
||||
~~~ bash
|
||||
$ npm install sitespeed.io -g
|
||||
$ sitespeed.io --help
|
||||
~~~bash
|
||||
npm install sitespeed.io -g
|
||||
~~~
|
||||
|
||||
#### yarn
|
||||
Or with [yarn](https://yarnpkg.com/):
|
||||
|
||||
~~~ bash
|
||||
$ yarn global add sitespeed.io
|
||||
$ sitespeed.io --help
|
||||
~~~bash
|
||||
yarn global add sitespeed.io
|
||||
~~~
|
||||
|
||||
### Windows
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ The summary holds information per group, or specifically per domain. If you test
|
|||
## List configured metrics
|
||||
You can list the metrics that are configured by **\-\-metrics.filterList**. The list is dependent on which plugins you are loading, so you will need to do an actual run to generate the list. The list is stored in the data folder in a file named **configuredMetrics.txt**.
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --metrics.filterList
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --metrics.filterList
|
||||
~~~
|
||||
|
||||
The file will look something like this:
|
||||
|
|
@ -52,8 +52,8 @@ browsertime.pageSummary.statistics.custom.*
|
|||
## List metrics
|
||||
You can also list all possible metrics that you can send. You can do that by using **\-\-metrics.list**. It will generate a text file named **metrics.txt** in the data folder.
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --metrics.list
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --metrics.list
|
||||
~~~
|
||||
|
||||
|
||||
|
|
@ -86,21 +86,26 @@ coach.pageSummary.advice.performance.adviceList.thirdPartyAsyncJs.weight
|
|||
|
||||
The score is ... yes the score and the weight is how important it is. You probably only need the score, so setting a filter like this **coach.pageSummary.advice.performance.adviceList.\*.score** will send them all (setting a wildcard for the name).
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --metrics.filter coach.pageSummary.advice.performance.adviceList.*.score -n 1
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --metrics.filter coach.pageSummary.advice.performance.adviceList.*.score -n 1
|
||||
~~~
|
||||
|
||||
The best way to test and verify on your local, is to checkout the sitespeed.io project and then start a TCP server that logs everything:
|
||||
|
||||
~~~ bash
|
||||
$ tools/tcp-server.js
|
||||
~~~bash
|
||||
tools/tcp-server.js
|
||||
~~~
|
||||
|
||||
And you will see something like this:
|
||||
|
||||
~~~
|
||||
$ Server listening on :::52860
|
||||
~~~
|
||||
|
||||
It will output the port, so you can then use it when you run sitespeed.io:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --net host --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --metrics.list https://www.sitespeed.io -n 1 --metrics.filter coach.pageSummary.advice.performance.adviceList.*.score --graphite.host 127.0.0.1 --graphite.port 52860
|
||||
~~~bash
|
||||
docker run --privileged --net host --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --metrics.list https://www.sitespeed.io -n 1 --metrics.filter coach.pageSummary.advice.performance.adviceList.*.score --graphite.host 127.0.0.1 --graphite.port 52860
|
||||
~~~
|
||||
|
||||
The the previous example it will log all metrics you send to Graphite to the console.
|
||||
|
|
@ -109,7 +114,7 @@ The the previous example it will log all metrics you send to Graphite to the con
|
|||
|
||||
By default the total score for performance, accessibility and best practice is configured to send to Graphite. Previously we looked at sending all the score for the performance advice. If you want to send all the scores for all advice, you can do that easily, by adding all three categories in the CLI:
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
--metrics.filter coach.pageSummary.advice.performance.adviceList.*.score coach.pageSummary.advice.bestpractice.adviceList.*.score coach.pageSummary.advice.accessibility.adviceList.*.score
|
||||
~~~
|
||||
|
||||
|
|
@ -118,7 +123,7 @@ If you have a lot of different metrics that you want to send to Graphite the com
|
|||
|
||||
If you want to send the three coach metrics, you can add them as a config file like this and pass the filename to the <code>--config</code> parameter:
|
||||
|
||||
~~~ json
|
||||
~~~json
|
||||
{
|
||||
"metrics": {
|
||||
"filter": [
|
||||
|
|
@ -134,6 +139,6 @@ If you want to send the three coach metrics, you can add them as a config file l
|
|||
Sitespeed.io does not currently have support removal of a single metric, but you can
|
||||
remove all configured metrics with the parameter value *\*-*. Here is an example sending only the **coach.pageSummary.advice.performance.adviceList.\*.score** metrics.
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --net host --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --metrics.list https://www.sitespeed.io -n 1 --metrics.filter *- coach.pageSummary.advice.performance.adviceList.*.score --graphite.host 127.0.0.1 --graphite.port 52860
|
||||
~~~bash
|
||||
docker run --privileged --net host --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --metrics.list https://www.sitespeed.io -n 1 --metrics.filter *- coach.pageSummary.advice.performance.adviceList.*.score --graphite.host 127.0.0.1 --graphite.port 52860
|
||||
~~~
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ The most basic things you can do is list configured plugins (which are currently
|
|||
## List configured plugins
|
||||
You can list the plugins that will be used when you do a run:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --plugins.list https://en.wikipedia.org/wiki/Barack_Obama
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --plugins.list https://en.wikipedia.org/wiki/Barack_Obama
|
||||
~~~
|
||||
|
||||
And you will get a log entry that looks something like this:
|
||||
|
|
@ -40,20 +40,20 @@ The default plugins lives in the [plugin folder](https://github.com/sitespeedio/
|
|||
## Disable a plugin
|
||||
You can disable default plugins if needed. For instance you may not want to output HTML and strictly send the data to Graphite.
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.disable html
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.disable html
|
||||
~~~
|
||||
|
||||
If you want to disable multiple plugins say you don't need the html or screenshots:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.disable html screenshot
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.disable html screenshot
|
||||
~~~
|
||||
|
||||
At anytime if you want to verify that disabling worked, add the plugins.list to your command:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.disable html screenshot --plugins.list
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.disable html screenshot --plugins.list
|
||||
~~~
|
||||
|
||||
## Add a plugin
|
||||
|
|
@ -61,27 +61,27 @@ You can also add a plugin. This is great if you have plugins you created yoursel
|
|||
|
||||
There's a plugin bundled with sitespeed.io called *analysisstorer* plugin that isn't enabled by default. It stores the original JSON data from all analyzers (from Browsertime, Coach data, WebPageTest etc) to disk. You can enable this plugin like so:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.load analysisstorer
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io --plugins.load analysisstorer
|
||||
~~~
|
||||
|
||||
If you want to run plugins that you created yourself or that are shared from others, you can either install the plugin using npm (locally) and load it by name or point out the directory where the plugin lives.
|
||||
|
||||
If you run in Docker and you should. You will need to mount your plugin directory as a volume. This is the recommended best practice. Practically you should clone your repo on your server and then mount it like this.
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox --plugins.load /sitespeed.io/myplugin -n 1 https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
If you are running outside of docker you can load it relative locally.
|
||||
|
||||
~~~ bash
|
||||
$ sitespeed.io https://www.sitespeed.io --plugins.load ../my/super/plugin
|
||||
~~~bash
|
||||
sitespeed.io https://www.sitespeed.io --plugins.load ../my/super/plugin
|
||||
~~~
|
||||
|
||||
If you want to create an image of sitespeedio with your plugins pre-baked for sharing you can also do so using the following Dockerfile.
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
FROM sitespeedio/sitespeed.io:<insert version here>
|
||||
|
||||
COPY <path to your plugin> /my-custom-plugin
|
||||
|
|
@ -89,13 +89,13 @@ COPY <path to your plugin> /my-custom-plugin
|
|||
|
||||
Then build the docker image
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker build -t my-custom-sitespeedio ./plugins
|
||||
~~~
|
||||
|
||||
Finally you can run it the same way as mentioned above without the volume mount.
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io my-custom-sitespeedio firefox --plugins.load /my-custom-plugin --my-custom-plugin.option test -n 1 https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ First let us know about your cool plugin! Then share it with others by publish i
|
|||
### Basic structure
|
||||
Your plugin needs to follow this structure.
|
||||
|
||||
~~~ javascript
|
||||
~~~javascript
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ We use the NodeJs version of Selenium, you can find the [API documentation here]
|
|||
## Login example
|
||||
Create a script where you login the user. The following is an example to login the user at Wikipedia. Start by creating a file login.js with the following.
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
module.exports = {
|
||||
run(context) {
|
||||
return context.runWithDriver((driver) => {
|
||||
|
|
@ -62,8 +62,8 @@ Make sure to change the username & password
|
|||
|
||||
Then run it like this:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --preScript /sitespeed.io/login.js https://en.wikipedia.org/wiki/Barack_Obama
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --preScript /sitespeed.io/login.js https://en.wikipedia.org/wiki/Barack_Obama
|
||||
~~~
|
||||
|
||||
The script will then login the user and access https://en.wikipedia.org/wiki/Barack_Obama and measure that page.
|
||||
|
|
@ -84,7 +84,7 @@ One other thing you can do with a pre script is simulate a user that browsed a c
|
|||
|
||||
Create a pre script (pre.js):
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
module.exports = {
|
||||
run(context) {
|
||||
return context.runWithDriver((driver) => {
|
||||
|
|
@ -97,8 +97,8 @@ module.exports = {
|
|||
|
||||
And then run it like this:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --preScript /sitespeed.io/pre.js -b chrome https://www.sitespeed.io/documentation/
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --preScript /sitespeed.io/pre.js -b chrome https://www.sitespeed.io/documentation/
|
||||
~~~
|
||||
|
||||
The browser will first access https://www.sitespeed.io/, this will fill the cache and then go to https://www.sitespeed.io/documentation/ where it will collect all the metrics.
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ Internally sitespeed.io uses the [WebPageTest API](https://github.com/marceldura
|
|||
|
||||
By default we have the following configuration options:
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
--webpagetest.host The domain of your WebPageTest instance.
|
||||
--webpagetest.key The API key for you WebPageTest instance.
|
||||
--webpagetest.location The location for the test
|
||||
|
|
@ -44,15 +44,15 @@ If you need anything else adding your own CLI parameter will propagate to the We
|
|||
|
||||
Example: So say that you want to change the user agent of your test. In the API you can do that with <code>--useragent</code>. Pass the same to sitespeed.io by prefixing webpagetest like so <code>--webpagetest.useragent</code> in the cli.
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --webpagetest.host my.wpt.host.com --webpagetest.useragent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36" https://www.sitespeed.io
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --webpagetest.host my.wpt.host.com --webpagetest.useragent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36" https://www.sitespeed.io
|
||||
~~~
|
||||
|
||||
## Default configurations
|
||||
|
||||
The default configuration for WebPageTest looks like this:
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
{
|
||||
pollResults: 10,
|
||||
timeout: 600,
|
||||
|
|
@ -73,7 +73,7 @@ WebPageTest has scripting capability where you can easily automate a multi-step
|
|||
|
||||
You can create your script file (checkout [WebPageTest documentation](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting) for what you can do). It can look something like this (wptScript.txt):
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
logData 0
|
||||
|
||||
// put any urls you want to navigate
|
||||
|
|
@ -88,7 +88,7 @@ navigate news.aol.com/world
|
|||
|
||||
Then change your URL you want test (probably the last one) to \{\{\{URL\}\}\} and then all occurrences of \{\{\{URL\}\}\} will then be replaced with the current URL that should be tested. Now run sitespeed.io with the additional parameters:
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --webpagetest.file /sitespeed.io/wptScript.txt --webpagetest.host my.wpt.host.com http://example.org
|
||||
~~~
|
||||
|
||||
|
|
@ -96,7 +96,7 @@ It is also possible to pass the WebPageTest script as a string into the `--webpa
|
|||
|
||||
{% assign bashURLString = '{{{URL}}}}' %}
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --webpagetest.script "navigate \t www.aol.com \n navigate \t {{bashURLString}}" --webpagetest.host my.wpt.host.com http://example.org
|
||||
~~~
|
||||
|
||||
|
|
@ -104,7 +104,7 @@ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio
|
|||
|
||||
Hey we love custom metrics and you can fetch them using WPT. Checkout the [metrics docs](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/custom-metrics) for WPT and then create a file containing your metrics:
|
||||
|
||||
~~~ bash
|
||||
~~~
|
||||
[iframe-count]
|
||||
return document.getElementsByTagName("iframe").length;
|
||||
|
||||
|
|
@ -125,6 +125,6 @@ return viewport;
|
|||
|
||||
You can then run sitespeed.io to pick up the new custom metrics:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --webpagetest.custom /sitespeed.io/myScriptFile.txt --webpagetest.host my.wpt.host.com https://www.sitespeed.io
|
||||
~~~bash
|
||||
docker run --privileged --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --webpagetest.custom /sitespeed.io/myScriptFile.txt --webpagetest.host my.wpt.host.com https://www.sitespeed.io
|
||||
~~~
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ image: https://www.sitespeed.io/img/sitespeed-2.0-twitter.png
|
|||
|
||||
Sitespeed.io uses Browsertime, the Coach and PageXray to collect and generate the result, so looking at result pages from sitespeed.io will give you a idea of what you can get from all tools. Analyzing two pages using Chrome looks like this:
|
||||
|
||||
~~~ bash
|
||||
$ docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome --video --speedIndex https://en.wikipedia.org/wiki/Main_Page https://en.wikipedia.org/wiki/Barack_Obama
|
||||
~~~bash
|
||||
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome --video --speedIndex https://en.wikipedia.org/wiki/Main_Page https://en.wikipedia.org/wiki/Barack_Obama
|
||||
~~~
|
||||
|
||||
Gives the following [report](https://examples.sitespeed.io/5.0/2017-04-24-04-44-04/). The standard use case for sitespeed.io is to run it continously and send the data to Graphite/Grafana and create dashboards looking like this:
|
||||
|
|
@ -30,8 +30,8 @@ Checkout our [example dashboard](https://dashboard.sitespeed.io/dashboard/db/pag
|
|||
## Browsertime
|
||||
Browsertime collects metrics using JavaScript and will record the browser window using FFMPED and produce a JSON file with the metrics collected, a HAR file that describes the request/responses and video and screenshots.
|
||||
|
||||
~~~ bash
|
||||
$ docker run --shm-size=1g --rm -v "$(pwd)":/browsertime sitespeedio/browsertime --video --speedIndex https://www.sitespeed.io/
|
||||
~~~bash
|
||||
docker run --shm-size=1g --rm -v "$(pwd)":/browsertime sitespeedio/browsertime --video --speedIndex https://www.sitespeed.io/
|
||||
~~~
|
||||
|
||||
## Coach
|
||||
|
|
@ -46,8 +46,8 @@ PageXray will convert your HAR file to a new JSON format. If your HAR file is fr
|
|||
|
||||
Run it locally in NodeJS or in the browser:
|
||||
|
||||
~~~ bash
|
||||
$ pagexray --pretty /path/to/my.har
|
||||
~~~bash
|
||||
pagexray --pretty /path/to/my.har
|
||||
~~~
|
||||
|
||||
Will convert the HAR to the following structure:
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@ Two kind of big releases in the same week with two important new things:
|
|||
|
||||
We haven't updated to PhantomJS 2 yet (since it isn't fully available as binaries on Linux). If you want to use it today across all the tests, you can either use SlimerJS:
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
sitespeed.io -u http://www.example.com --headless slimerjs -b chrome
|
||||
~~~
|
||||
|
||||
or install PhantomJS 2 on the side and feed it to sitespeed like this:
|
||||
|
||||
~~~ bash
|
||||
~~~bash
|
||||
sitespeed.io -u http://www.example.com --phantomjsPath /path/to/phantomjs -b chrome
|
||||
~~~
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue