speedtracker / speedtracker

📉 Visualisation layer and data store for SpeedTracker

Front-end

v1.2.3

Visualisation layer and data store for SpeedTracker

---

Installation

1. Click here to request a WebPageTest API key.
2. Fork this repository into your own GitHub account or organisation.
3. Enable GitHub Pages for the repository under Settings > Options > GitHub Pages. Select the branch you want to serve your site from (typically master).
4. Add speedtracker-bot as a collaborator on your repository (under Settings > Collaborators).
5. Use the connect tool to establish a connection between SpeedTracker and your repository.
6. Edit the main configuration file (speedtracker.yml).
7. Edit _profiles/default.html to define your first profile.
8. Commit and push the changed files.
9. Use the test tool to run a test.

Development

1. Install dependencies

npm install

1. Start the Jekyll server

jekyll serve --watch --port SOME_PORT

1. Start Webpack

npm run watch

1. When you're done with your changes, build the bundle for production

npm run build

---

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! [Become a backer]

Sponsors

Thank you to all our sponsors! (please ask your company to also support this open source project by becoming a sponsor)

License

This project is licensed under the MIT license:

The MIT License (MIT)

Copyright (c) 2016 Eduardo Bouças

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

speedtracker's Issues

Add information about render-blocking resources

I think we should have a graph to show critical blocking resources (mainly CSS/JS). A graph like seen below along with links to specific tests as requested in another enhancement (#36), can be very useful in quickly spotting the delays introduced on sites.

Delete incorrect measures (outliers)

One of my measures reported a load time of 54 seconds, which is clearly an outlier, and not a correct representation of the load time: https://jacobworsoe.github.io/speedtracker/default/?period=year

The problem is that a spike like that, makes the rest of the chart almost flatline and difficult to read.

It would be cool to be able to delete such outliers. Maybe from https://speedtracker.org using the encryption key, so only the admin can delete measures?

Graphs showing no data despite tests running for 3 months

As of this morning a few of my tests are showing no results with the message "We need some more test results to draw a chart".

These tests have been running for about three months, showing results correctly.
When I check the github repo the results are all still there (although some haven't been updated as frequently as they should, I have raised a separate bug for that).

Cannot read property 'url' of undefined

With the latest release (v1.2.0), it now get the following error when I use the UI to switch to a new profile.

bundle.js?v=1.2.1:28 Uncaught (in promise) TypeError: Cannot read property 'url' of undefined
    at t.value (bundle.js?v=1.2.1:28)
    at c._renderValidatedComponentWithoutOwnerOrContext (bundle.js?v=1.2.1:41)
    at c._renderValidatedComponent (bundle.js?v=1.2.1:41)
    at c.performInitialMount (bundle.js?v=1.2.1:41)
    at c.mountComponent (bundle.js?v=1.2.1:41)
    at Object.mountComponent (bundle.js?v=1.2.1:7)
    at Object.updateChildren (bundle.js?v=1.2.1:40)
    at f._reconcilerUpdateChildren (bundle.js?v=1.2.1:42)
    at f._updateChildren (bundle.js?v=1.2.1:42)
    at f.updateChildren (bundle.js?v=1.2.1:42)
    at f._updateDOMChildren (bundle.js?v=1.2.1:41)
    at f.updateComponent (bundle.js?v=1.2.1:41)
    at f.receiveComponent (bundle.js?v=1.2.1:41)

I believe this error was introduced in #41 when Dashboard.js tries to do const profileUrl = this.props.profile.parameters.url. Looking at the code in App.js, _changeProfile finds the profile data from profiles.json and sets that in the state which is then passed to Dashboard. However, profiles.json does not define parameters. It looks like we probably need "parameters":{{ profile.parameters | jsonify }} in profiles.json.

I may be over looking something but that's my best guess. Anyone else seeing this error?

Use Markdown for Profiles Collection

Currently a Profiles Jekyll collection is used to create and manage profiles. Those files contain YAML front matter and are currently suffixed with an html extension. The presence of an html extension can trip up code editors like Atom as the editor will not properly parse and interpret front matter in an HTML document.

Moving to a md or markdown file extension helps mitigate this problem, affords a better developer experience, provides backwards compatibility, enables support for certain Jekyll cloud editors, such as Siteleaf; and enables highlighting, completions and keyboard shortcuts for supporting editors.

Unless there are any concerns, I will create a pull which will change the default file extension to md to resolve this issue.

Related issues:
jekyll/jekyll#1654

Add CI Integration

Leverage CI to automate stuff. Given this repo is open source this can be accomplished in a secure way for free using Travis, reduce friction for repetitious tasks (e.g. changelog generation, deployments, version updates) and, perhaps more importantly, helps mitigate risk of human error.

Doest seem to fetch any data

I've followed the docs and set up everything as described. Also triggered a run at the speedtracker website. Nothing is happening in though.

Github Pages link: https://tidal-engineering.github.io/speedtracker/
Repolink: https://github.com/tidal-engineering/speedtracker

Display monthly average load time when period is year

Feature suggestion. When selecting year as the period, it would be great to display the average load time for each month, instead of all the daily load times.

That way you get a much more robust measure without spikes and it is much easier to see the trend.

This quickly becomes difficult to analyze: https://demo.speedtracker.org/?period=year

"No url"

Hello
Awesome project.

I set up everything as the doc said but i keep getting
"NO_URL" error even tho it is present in my configuration:
https://github.com/danielhq/speedtracker/blob/master/_profiles/default.html

What am i missing?
Thanks

Inaccurate Google Pagespeed results

The dashboard shows numbers between 46 and 54, however, when I click one of the data points, the rank is around 70.

Add custom Headers to the test

It seems there is no parameter in the profile to specify custom headers as you could do on WPT UI and apparently also via the WPT API (see here).

Thanks for the support,
Filippo

Is it broken? Or did I not set it up right?

https://nigelbeauty.github.io/speedtracker/

I thought it passed the tests and was set up fine but it's been over 8 hours and nothing has shown up yet.

Slack Hook URL

speedtracker.yml says;
hookUrl: "ENCRYPTED_SLACK_HOOK_URL"

But on https://speedtracker.org/encrypt you cannot encrypt the URL.

What to do?

Add visualization of 3rd party requests

It will be good to create a visualization on 3rd party requests or add this metric as part of 'content breakdown' graph.

Reason - Most of the time site webmasters have very little control on what 3rd party requests are being included on their site due to usage of technologies like tag managers etc. Adding a visualization for this can help them track any increased in 3rd party requests on their pages.

Point to consider - Many sites use CDN for images. So some request may look like third party (by just looking at domain) but actually those will be first party requests.. So we should look at providing ability to white-list domains as part of their profile setup so that any requests with white-listed domains can still be counted as first party requests.

Thoughts on this?

Running a test throws "404 - Not Found"

10 days ago, the bot stopped committing webpagetests to my speedtracker. I think I narrowed it down to a 404 error when running the test. I'm not sure, however, where it comes from.

Steps to reproduce:

• https://speedtracker.org/test
• Running test with the correct credentials
• Result in the grey box:(!) Error: "404"
• The Ajax request to https://api.speedtracker.org/v1/test/landinsicht/speedtracker/master/XYZ?key=XYZ returns a 500 status code and the following JSON:
  { code: 404, status: "Not Found", message: "{"message":"Not Found","documentation_url":"https://developer.github.com/v3"}" }

My speedtracker repository:
https://github.com/landinsicht/speedtracker

What could be the issue?

Innacurate Google PageSpeed results

The number reported in Speedtracker is 87 as opposed to 98 for mobile / 100 for desktop on PageSpeed Insights' website (possibly related issue #60)

No repeated tests

Hello,
I tried to setup Speedtracker, but the automated tests are not running.
The speedtracker-bot is in my Collaborators list.

Is there something else that I need to run the automated tasks?

The test on https://speedtracker.org/test was running, but no more speed tests since that.

thanks
Jochen

Integrate Tracking with Google Analytics

Pull request to follow shortly...

Tests not running as scheduled

I have a number of tests setup, all of them have run at least once so I know the profiles are correct and they have been scheduled to run automatically.

When I look at the graphs, most the tests don't run every 12 hours like they are supposed to. Some run once a day, some seem to run once every few days and others have stopped running for over a week or more.

Is there any way to see if and why a test failed to run?

Add support for repeat view

I am trying to configure dashboard for repeatView and tried something like this -

parameters:
connectivity: "Cable"
location: "ec2-eu-west-1:Chrome"
runs: 1
repeatView: true
chartType: waterfall
url: "www.example.com"
video: true

but this is not working? I used 'repeatView: true' as per WPT API documentation in parameters section/

"Rendering" and "Load times" charts are empty

Can you help with it?
Dashboard here: https://pltnkv.github.io/speedtracker/

Use with BitBucket?

Is it posible to use this tool with BitBucket instead of Github?

Speedtracker URL structure

Hi,

First of all, I want to thank you for this great tool.

I just noticed that the visualisation layer modify the web address using the history API.
It looks great but it breaks the ability to share the url or reload the page.

I don't know if github has an option to redirect all traffic to the index but if it doesn't it might be worth considering a different url structure.

Replace React with Preact

There is no reason why we couldn't use Preact instead of React for the dashboard, given that it's such a simple application, and I'd really like to see the reduction in bundle size.

Any takers?

Support PerfCascade

Would be great to incorporate https://github.com/micmro/PerfCascade into the dashboard

Speedtracker test bot is down since 2019-09-19

I checked on multiple websites using Speedtracker and the data are missing since 2019-09-19.
The bot on https://speedtracker.org/test shows errors when trying to launch tests.

Make setup process easier

Currently, the process of setting up a new dashboard can trip up some people. After obtaining a WebPageTest API key, users need to:

1. Add the bot to their repository
2. Use the connect tool to prompt the bot accept the invitation
3. Use the encrypt tool to create an encrypted version of a chosen passkey
4. Add the encrypted passkey to the config file
5. Use the encrypt tool to create an encrypted version of the WPT API key with the previously created passkey
6. Add the encrypted version of the WPT API key to the config file
7. Edit the default profile file and edit the name of the property and the URL

I'd like to have a UI tool that displays a form including:

• Repository URL
• Chosen passkey
• WPT API key
• Name of the default property
• URL of the default property

By filling in these details, the API would then take care of encrypting everything it needs to and write both the config file (staticman.yml) and the first profile (_profiles/default.html).

This endpoint will be open, as in people will be able to run this against their newly created repository without providing any sort of authentication. For this reason, we need to make sure this procedure can be ran only once, when the repository hasn't yet been modified by its owner (not sure how to determine this).

To achieve all this, I see two separate components:

1. A new API endpoint (or an extension of the /connect endpoint to optionally accept the extra parameters)
2. A new page on speedtracker.org containing a form and all the necessary logic to create and send the request to the above-mentioned endpoint. Instead of being a new page, this could also be an extension to the Connect page, adding new elements to the existing form.

I can handle most (if not all) of part 1, but I could use a hand with part 2, the UI for it. The existing markup and logic for the Connect, Encrypt and Run Test pages is a bit messy. I can see the need for more robust, responsive UI controls, perhaps using something like React/Preact.

How to start with visualization?

I have set-upped everything and the test-run shows success, now where to see my visualizations. Like this - https://demo.speedtracker.org/ ??

Deep linking to historical reports

The ability to deep link to graph states currently is supurb, enabling users to deep link to cuts of data segmented by day, week and month. Given some users may not track using intervals (e.g. for research purposes) it would be useful to provide the ability to either:

• Ability to deep link to a specific date range, or;
• Ability to freeze time when deep linking to a segment of data taken in the past

Without it users may drop into a deep link which is not timeless and become confused as to why they are not seeing data, as exemplified here:

http://speed.habd.as/wordcamp_habd_as-cable/?period=week

Gettting 500 internal error

Request has all the right details:-
curl 'https://api.speedtracker.org/v1/test/kakumar/speedtracker/master/default?key=game2pipe' --2.0 -H 'Host: api.speedtracker.org' -H 'User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0' -H 'Accept: /' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Referer: https://speedtracker.org/test' -H 'Origin: https://speedtracker.org' -H 'Connection: keep-alive'

Response headers
Access-Control-Allow-Origin: *
Content-Type: text/html; charset=utf-8
Date: Mon, 24 Oct 2016 19:43:26 GMT
Server: cloudflare-nginx
Set-Cookie: __cfduid=d71a022572395d6facdab21947df82b941477338206; expires=Tue, 24-Oct-17 19:43:26 GMT; path=/; domain=.speedtracker.org; HttpOnly
Via: 1.1 vegur
X-Firefox-Spdy: h2
cf-ray: 2f6feaed0f1a22a0-LAX
x-powered-by: Express

Enhancement - Add link to WebPageTest results page when hover specific data points on chart

When you hover on a specific data point in chart, currently it shows timestamp of the test and values of key metric.

It will be good to add a link to webpagetest results so that users can start investigating using granular data when there is a sudden spike. We can either add a new link or just to save space, we can make timestamp a link.

If making it a link is difficult in hover, it should at least display the testid so that user can self navigate by typing www.webpagetest.org/result/170317_YP_2M5B (Where 170317_YP_2M5B is an example test id)

Don't get automatic updates

The app is here: https://romanovma.github.io/accuchek-speedtracker/?period=year

I keep default interval: 12, but the only test results I see are those done manually. And they where run 4 days ago.
Speed_Tracker bot is connected through collaborators but there are no any new commits from it.

Could you please advice what should be my next move? Thank you.

update: now I don't get manual updates as well :(

All tests are blank

Hallo!
Unfortunately all of our tests on the homeday-de fork are not reporting any data.
Is there something broken on the server side we should be aware of?

Thank you in advice!

Make the header sticky

When scrolling through a result, it would be nice to have the header sticky in the browser so you constantly see which result you're looking at

I can create a fix for this if you like

Content breakdown as metric

Hi!
Is it possible to add total images size as a budget/metric?

Add data from Google Lighthouse

Hi @eduardoboucas,

You recently added graph for Google page speed. Any plans to add LightHouse score ?

Lighthouse has API now - http://help.lighthouseapp.com/kb/api

Rockey

Internal Server error when using special characters in encryption key

Apparently the encryption tool crashes when a "%" is present in the key

INVALID_CONFIG when attempting to enable Slack alert

Hi Eduardo,

First off, thanks for building and maintaining such a fantastic app! Our team has been pretty excited since we discovered it.

I'm currently trying to set up Slack integration, but I've been getting a 500 error when uncomment and complete the block of slack settings. Here's what my block of alert settings looks like:

alerts:
  emailAlert:
    type: "email"
    recipients: ["0d2506eea47a1a60f30f332d044bffc6f14de97d44f814f2"]
#  otherEmailAlert:
#    type: "email"
#    recipients: ["ENCRYPTED_EMAIL_ADDRESS2", "ENCRYPTED_EMAIL_ADDRESS3"]
   slackAlert:
     type: "slack"
     hookUrl: "1f3011f5f92c503df5052e061504fed8f542ec2a09f416b0adef6ecf552c16949005b130ae3b6f33ab0af782ebebd56540bd255ac700c5b02843572db57cd7c110d797a0b9c0d076fc4cd8cd65"
     channel: "#speedtracker"
     username: "SpeedTracker"
     iconEmoji: ":grimacing:"

Here's the url that the error displays in inspector (with the key obscured):

https://api.speedtracker.org/v1/test/zalerner/speedtracker/master/caruso?key=XXXXXXXXXXXXX

When loading that I get the following instead of what it typically returns when the test has been submitted successfully:

{"success":false,"error":{"code":"INVALID_CONFIG"}}

I noticed that my encrypted hook url looks kind of long, so I'm not sure if I'm maybe entering the wrong thing when encrypting. Here's what my hook url looks like (more or less) before encrypting it:

https://hooks.slack.com/services/T02XXXXXXX1H/B33XXXXXXZ2R/fCXetKrXXXXXXXXX1jkTnyp

Let me know if there's anything I may be missing!

Dropdowns in the header are unreadable in Chrome when clicked

In Google Chrome the dropdowns, when clicked, in the header aren't properly readable because of the transparent background and white text

I can create a fix for this if you like

Add JavaScript Linter

I think a style linter would be great. For example:

• http://eslint.org
  • https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
  • ...
• https://github.com/sindresorhus/xo
• ...

Do you prefer a style linter?

Works only for the default profile

Hi,
SpeedTracker works good with my default profile. For my second profile it only showing:

"We need some more tests results to draw a chart."

The test tool shows me this for my both profiles:
(First is my default profile and the other is the second.)

Hang on...

--> {"success":true,"nextRun":1487206194480,"testId":"170215_19_J2HQ"}

Hang on...

--> {"success":true,"nextRun":null,"testId":"170215_RA_J0SD"}

Both profiles are identical - except the url parameter of course.

Here is my side:
https://heikomamerow.github.io/speedtracker/default/?period=week

...Is it to strong or I am too weak? ;-)

Increase visibility

https://jamstack.org/examples/
example submission https://github.com/jamstack/jamstack.org/pull/34/files

Running test with scripts

Help needed,

By default webpagetest records at a small screensize how can i pass the scripts throught the profiles.html

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-setViewportSize

Please suggest

Application error when running test

I trigger speedtracker test as a part of my deploy process, but I started getting heroku’s application errors some time ago:

$ curl https://api.speedtracker.org/v1/test/DietLabs/perf-HdbaPl/master/default?key=$SPEEDTRACKER_KEY
<!DOCTYPE html>
        <html>
          <head>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta charset="utf-8">
                <title>Application Error</title>
                <style media="screen">
                  html,body,iframe {
                        margin: 0;
                        padding: 0;
                  }
                  html,body {
                        height: 100%;
                        overflow: hidden;
                  }
                  iframe {
                        width: 100%;
                        height: 100%;
                        border: 0;
                  }
                </style>
          </head>
          <body>
                <iframe src="//www.herokucdn.com/error-pages/application-error.html"></iframe>
          </body>
        </html>

Also does not work when using web UI (https://speedtracker.org/test):

Hang on...

(!) Error: "Unknown"

CloudFlare DNS resolution error for https://speedtracker.org/

Hi, just in case if you don't know yet there is a DNS resolution error on CloudFlare side (see attached image) when you navigate to https://speedtracker.org/.

No data

Already 2 Issues, hope I'm not bugging you :)

Anyway, after i setup everything its not displaying anything
https://danielhq.github.io/speedtracker/?period=day
Doc said i should allow a couple minutes to fetch and display data, 2 hours have passed and still nothing.

Content breakdown metrics show as 'undefined' in alert emails

I am trying to use breakdown.image.bytes and breakdown.image.requests as metrics and I have defined performance budgets but when I receive alert email, I see it as undefined (see screenshot attached).

Feels like a bug. Can somebody please look into this? Here is link to my dashboard - https://rockeynebhwani.github.io/speedtracker/George-Blog/?period=week

getVideoFrameURL is hard-coded to use https://www.webpagetest.org as the domain

We're using a private instance of webpagetest and not publishing our results publicly. As a result, the images are not pushed up to https://www.webpagetest.org. However, they are published on our private ec2 instance.

Looking at getVideoFrameURL though, it's hard-coded to always try to load the images form webpagetest.org.

speedtracker/app/Utils.js

Line 44 in 2c5b717

return `https://www.webpagetest.org/getfile.php?test=${id}&video=video_1&file=frame_${frame}.jpg`

Is it possible to instead use the value in wptUrl instead as the base URL for getVideoFrameURL?

Encrypted URLs Break PageSpeed External Link

speedtracker/speedtracker-api#23 introduced support for encrypted URLs in profile configs, which I feel is stellar. However, the UI feature which allows one to deep link to reports like PageSpeed interprets the encrypted URL literally and attempts to re-run metrics against the encrypted URL as shown here:

Client version: https://github.com/speedtracker/speedtracker/releases/tag/1.2.2

WPT_ERROR - possible reasons?

Getting this error when attempting to run a test via the API:

curl -s https://api.speedtracker.org/v1/test/flm/speedtracker/master/devote_beta_blogpost?key=XXX {"success":false,"error":{"code":"WPT_ERROR"}}

Is there a way to get a more verbose error message?

Thanks for a really cool service btw :-)