7.9 KiB
| layout | title | description | authorimage | intro | keywords | nav |
|---|---|---|---|---|---|---|
| default | sitespeed.io 5.0 | Six months ago we released 4.0 and now it's it time for 5.0!! | /img/aboutus/peter.jpg | With the latest release we add support for storing metrics in InfluxDB, add your own request headers, block requests by domain and a massive HTML update. | sitespeed.io, sitespeed, release, 5.0 | blog |
Say hello to 5.0
Almost 6 months ago we released 4.0 and it was a lot of hard work to get that out: Adding HTTP/2 support, complete rewriting everything and making it more modular. We needed to release 4.0 but everything wasn't crisp. My personal opinion is that we missed out the final touch on the HTML result pages. We have that now with 5.0 :)
But first lets check what we have added the last months:
- Video with SpeedIndex/firstVisualChange/lastVisualChange and VisualComplete 85%. This is real SpeedIndex where we record a video of the screen and use VisualMetrics to analyze and get the metrics.
- Upload the HTML result to Amazon S3.
- A better way to set connectivity using Docker networks.
- Cleaner default Grafana dashboard with links to the HTML results.
- Newer and cleaner version of PerfCascade that makes the waterfall of the HAR files look great!
- Collect the timeline log and netlog from Chrome.
Before we go on about the new things in 5.0 we wanna tell you about the status of the project: We have had more 500 000 downloads of sitespeed.io (588k + the ones we had before we moved to NodeJS and Docker)! We have a lot of more things we want to add and now are the time to help us!
We have a Slack channel for developers that you should join! There you can get help with building plugins or if you want to contribute to sitespeed.io. If you have questions how to run sitespeed.io, please use Github issues.
Between latest 4.7 and now 5.0 we have focused on getting the HTML mean and clean. Let's check out the changed in 5.0.
UX improvements
We structure the data better now, the whole experience using 5.0 is so much better than 4.0 :)
Video
If you have tried sitespeed.io since we introduced video support you have seen that we have a really crisp video. One cool thing is that we display the visual metrics in the video when it happens. The video now also includes Visual Complete 85% so it is easy to see when that happens.
We also made it easier to download the video. Checkout the yellow button for downloading. You can download the video, the HAR files, Chrome timeline (if you configured that) and the sitespeed.io log from that run. It's not a big thing but it makes life a little easier.
{: .img-thumbnail}
The video includes metrics by default but you can turn that off if you want.
Timing metrics
The Browsertime result page was a little hard to read. To make it easier we have split the metrics in visual metrics and metrics from the browser.
{: .img-thumbnail}
If you click on the metric you will get to the definition of the metric
Find that run
On the page summary (where you see summary metrics for all the runs) it is now super easy to match a metric to a specific run. All min/median/max metrics are linked to the run that hold that metric.
This is super useful if come from Grafana and want to match a specific run that was graphed.
{: .img-thumbnail}
All metric numbers are now links, pointing to that run that had that metric
WebPageTest
We are still in love with WebPageTest and improved the look and feel of the WebPageTest result page. We also automatically download the HAR file, Chrome timeline JSON and the images for the waterfall graphs, so that the result is self contained. No more beacons back when your user access your result pages.
We show more metrics than before and also follow the structure of metrics that we use for Browsertime.
{: .img-thumbnail}
Logs
As we mentioned before you can now download the logs easily from the HTML by adding --html.logDownloadLink to your CLI parameters.
{: .img-thumbnail}
InfluxDB
We have had a long time goal to support one other TSDB than Graphite and now we officially support InfluxDB. We have one example dashboard that you can use and maybe we can have more example dashboards in the future.
This is extremely new so it could be miss out on functionality, if that's the case, create an issue and we will fix that!
A special thank you @theist and @eripa who helped us fix the InfluxDB integration so the structure is better than we had in the original version.
{: .img-thumbnail}
Browsertime 1.1
Sitespeed.io 5.0 used Browsertime 1.1. And what a ride it has been for the first beta 1.0 of Browsertime eight months ago! We will soon do a blog post about 1.0 but I want to talk about the latest thing we added before releasing that final version.
Video and SpeedIndex from your Android device
I would still call it experimental support for video and SpeedIndex for Chrome on Android. We need help to test it out on different devices. Right now you need to setup the dependencies needed for VisualMetrics yourself so it some work to get that going. Check out the how to what you need to setup.
{: .img-thumbnail}
Warning: This is really addictive! When I integrated latest Browsertime in sitespeed.io I got stuck a couple of hours testing different sites on my low end Huawei Android phone.
Our Docker container don't support Android at the moment but we hope we can add it in the future. Let us know if you can help us with that!
Your own request headers and blocking request
We finally have been able to add support for adding your own request headers and blocking requests by domain, by creating our own Browser extension. In this release it works in Chrome and soon in Firefox (we need Tobias fix to land in Selenium for supporting the new extension layout in Firefox).
Adding a request header:
$ docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ -r Name:Value
Blocking all request on my.example.com:
$ docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ --block my.example.com
Not backward compatible changes in 5.0
There's one change in 5.0 that changes the default behavior: TSProxy isn't default for connectivity since it doesn't work as we want together with Selenium. We also removed tc as default running Docker. When you change connectivity you should use our Docker network setup!
/Peter