Page MenuHomePhabricator

Rework https://performance.wikimedia.org
Closed, ResolvedPublic

Description

We should discuss what we should do with https://performance.wikimedia.org

  • Why
  • Who is the audience?
  • Content?

Why?

I kind of like the idea that this is the starting point for performance. Going to performance.wikimedia.org should give you an of overview of the performance of Wikipedia and make it easy to dig deeper. I think we also should give the user an overview what we are measuring and why.

Who is the audience?

Performance interested users and web engineers.

Action items

  • Make front-end as performant as possible (skip Bootstrap CSS, inline CSS, defer/async js where possible)
  • Add descriptions to coal graphs. T97088
  • Display median number next to graph. https://gerrit.wikimedia.org/r/356837

Ideas for later

  • Make the site responsive. One important use case is to make it work on mobile. because the graphs here are easier to see that in Grafana. Right now we don't set width=device-width, initial-scale=1 so the graphs are really small. We need to check if metricsgraph support responsive graphs.
  • List the latest blog posts from the performance team. (Create sidebar?) T163932
  • Coal graphs like today and make it easier to dig deeper into the data
  • Iframe graphs from Grafana? The Grafana graphs is better in the way that we compare metrics that are 7 days back, so it is easier to understand if we get an regression or not.
  • Collect alert JSONs from Grafana and show alert status
  • Describe each tool we use, not only link to them.
  • How can you help out (link to Phabricator and what we do and how you can help).

Event Timeline

Peter created this task.Mar 28 2017, 7:36 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 28 2017, 7:36 AM

Change 345106 had a related patch set uploaded (by Phedenskog):
[performance/docroot@master] Link to WebPageTest Grafana in the header

https://gerrit.wikimedia.org/r/345106

Peter updated the task description. (Show Details)

Change 345119 had a related patch set uploaded (by Krinkle; owner: Phedenskog):
[performance/docroot@master] Upgrade to latest d3 and metricsgraphics

https://gerrit.wikimedia.org/r/345119

Change 345106 merged by jenkins-bot:
[performance/docroot@master] Link to WebPageTest Grafana in the header

https://gerrit.wikimedia.org/r/345106

We can solve T97088 by using the description feature of MetricsGraphcs. See https://www.metricsgraphicsjs.org/examples.htm for example where each graph title has a question mark that produces an information bubble.

Peter renamed this task from Cleanup https://performance.wikimedia.org to Rework https://performance.wikimedia.org.Mar 29 2017, 7:30 PM
Krinkle triaged this task as Low priority.Apr 19 2017, 7:29 PM
Krinkle removed a project: Patch-For-Review.
Krinkle raised the priority of this task from Low to High.Apr 26 2017, 6:39 PM
Krinkle updated the task description. (Show Details)Apr 26 2017, 6:48 PM
Krinkle updated the task description. (Show Details)
Gilles assigned this task to Peter.May 17 2017, 6:42 PM
Gilles moved this task from Inbox to Doing on the Performance-Team board.

Change 356816 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Add Performance Blog to the header

https://gerrit.wikimedia.org/r/356816

Peter added a comment.Jun 2 2017, 11:32 AM

@Krinkle I wanna move away from Bootstrap it seems so much overhead for us. I can do it next week but wanna sync with you first. I've used http://getskeleton.com/ before and I kind of like that. Do you have anything you prefer?

Peter added a comment.Jun 2 2017, 12:31 PM

@Krinkle tried out

graph title has a question mark that produces an information bubble.

We need JQuery for that :| It seems overhead for just that little thing if we can come up with another way of doing it. But I'll make a PR so you can have a look. Also the question mark is hardcoded to FontAwesome, I'll check how we can remove that.

Change 356837 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Show median value for each graph

https://gerrit.wikimedia.org/r/356837

Peter added a comment.Jun 2 2017, 8:14 PM

What about adding baselines (at least for firstPaint and save timings): https://www.metricsgraphicsjs.org/examples.htm#annotations

Peter added a comment.Jun 4 2017, 4:50 PM

This is a summary of how it looks like before our changes.

https://www.webpagetest.org/result/170604_QM_edcea1b4f5b38f8c3e192c44c5aa285c/

Size

Median run of 9

Screenshot

Peter added a comment.Jun 4 2017, 6:24 PM

@Krinkle I'm gonna skip bootstrap and just do simple CSS for the menu/footer, that would do it and no need for library, hope to have something for you to test tomorrow ... or if you have something you want us to use let me know now :)

Peter added a comment.Jun 4 2017, 7:00 PM

Or on second thoughts, lets merge the upgrade of the metrics/bootstrap upgrade when you feel ok and I can clean it up from there.

Change 357130 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Short explanation about the performance page

https://gerrit.wikimedia.org/r/357130

Peter updated the task description. (Show Details)Jun 5 2017, 7:03 AM

Change 357188 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Make graphs fit on om small screens

https://gerrit.wikimedia.org/r/357188

Peter added a comment.Jun 5 2017, 7:54 AM

Adding the current look on mobile:

Change 356816 merged by jenkins-bot:
[performance/docroot@master] Add Performance Blog to the header

https://gerrit.wikimedia.org/r/356816

Change 345119 merged by jenkins-bot:
[performance/docroot@master] Upgrade to latest d3 and metricsgraphics

https://gerrit.wikimedia.org/r/345119

Change 356837 merged by jenkins-bot:
[performance/docroot@master] Show median value for each graph

https://gerrit.wikimedia.org/r/356837

Change 357130 merged by jenkins-bot:
[performance/docroot@master] Short explanation about the performance page

https://gerrit.wikimedia.org/r/357130

Change 357188 merged by jenkins-bot:
[performance/docroot@master] Make graphs fit on small screens

https://gerrit.wikimedia.org/r/357188

Peter added a comment.Jun 13 2017, 3:00 AM

This starts to look good now! Lets fix the metrics description and fine tune the CSS with uncss and the task is ok for now. Then we can think about using graphs from Grafana later on.

Krinkle updated the task description. (Show Details)Jun 19 2017, 3:14 PM
Krinkle updated the task description. (Show Details)

Change 360311 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Remove unused CSS from Bootstrap

https://gerrit.wikimedia.org/r/360311

Change 361237 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Remove unused CSS from Bootstrap

https://gerrit.wikimedia.org/r/361237

Change 360311 abandoned by Phedenskog:
Remove unused CSS from Bootstrap

Reason:
Use 361237 instead.

https://gerrit.wikimedia.org/r/360311

Change 361237 merged by jenkins-bot:
[performance/docroot@master] Remove unused CSS from Bootstrap

https://gerrit.wikimedia.org/r/361237

Krinkle closed this task as Resolved.Jun 28 2017, 8:12 PM
Krinkle reopened this task as Open.

Change 362174 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Display descriptions without using jQuery.

https://gerrit.wikimedia.org/r/362174

Change 362174 merged by jenkins-bot:
[performance/docroot@master] Display descriptions without using jQuery

https://gerrit.wikimedia.org/r/362174

Peter added a comment.Jun 29 2017, 8:55 PM

Made another run with the change for WebPageTest (using Linux version, because there's something going on where I cannot get through a test on the normal Dulles instances):

https://www.webpagetest.org/result/170629_7K_06b5ed7aa4ec303297b86b6236be8081/

Start render moving from 0.784 -> 0.245 (that's good)!
Visual complete not so big diff: 0.800 -> 0.720.
SpeedIndex: 800 -> 363.

Peter updated the task description. (Show Details)Jun 29 2017, 8:55 PM
Peter updated the task description. (Show Details)

Change 362414 had a related patch set uploaded (by Phedenskog; owner: Phedenskog):
[performance/docroot@master] Add mark for firstPaint about the hidden tab incident

https://gerrit.wikimedia.org/r/362414

Peter added a comment.Jul 3 2017, 8:23 AM

I think we should skip "List the latest blog posts from the performance team. (Create sidebar?" - I've added the link to the blog in the header. We need to redesign the page to include the posts, but lest do that when we have more posts.

Peter added a comment.Jul 3 2017, 8:31 AM

The new mobile versions looks like:

And we can use the stats from T161588#3392771 to show the change in performance.

Change 362414 merged by jenkins-bot:
[performance/docroot@master] Add mark for firstPaint about the hidden tab incident

https://gerrit.wikimedia.org/r/362414

Krinkle closed this task as Resolved.Jul 3 2017, 11:18 PM
Krinkle updated the task description. (Show Details)
Krinkle removed a project: Patch-For-Review.