Skip to content
This repository has been archived by the owner on Feb 8, 2018. It is now read-only.

Full performance report #4262

Closed
5 of 16 tasks
EdOverflow opened this issue Dec 24, 2016 · 4 comments
Closed
5 of 16 tasks

Full performance report #4262

EdOverflow opened this issue Dec 24, 2016 · 4 comments

Comments

@EdOverflow
Copy link
Contributor

EdOverflow commented Dec 24, 2016

performance

Introduction

The following is a report on the overall performance of https://gratipay.com/. I hope by sharing this we can get more people involved in improving the performance of the website and keep track of what is done and needs doing.

Note: Target values may not be attainable. They are simply there to demonstrate that there is room for improvement.

Table of Contents

  1. Page load performance is fast
  2. Site is progressively enhanced
  3. Network connection is secure
  4. Mobile-friendly
  5. Modern protocols
  6. CSS
  7. JavaScript
  8. Best practices

1. Page load performance is fast

Users notice if sites and apps don't perform well. These top-level metrics capture the most important perceived performance concerns.

First meaningful paint: 9689.3ms
First meaningful paint measures when the primary content of a page is visible.

  • Target: 1,600ms

Perceptual Speed Index: 5186
Speed Index shows how quickly the contents of a page are visibly populated.

  • Target: 1250

First Visual Change: 916ms

Last Visual Change: 14079ms

Estimated Input Latency: 1706ms
The score above is an estimate of how long Gratipay takes to respond to user input, in milliseconds. There is a 90% probability that a user encounters this amount of latency, or less. 10% of the time a user can expect additional latency.

  • Target: 50ms

Time To Interactive: 14186.8ms
Time to Interactive identifies the time at which Gratipay appears to be ready enough to interact with.

  • Target: 5,000ms

Critical Request Chains: 27
The Critical Request Chains below show you what resources are required for first render of this page.
Longest request chain (shorter is better): 3
Longest chain duration (shorter is better): 8296.49ms
Longest chain transfer size (smaller is better): 449.78KB

/ (gratipay.com)
|-- css/fonts.css (cloud.typography.com)
|-- 244520/1BA9B830F035F9E44.css (downloads.gratipay.com) - 4556.72ms, 800.64KB
|-- /gratipay.css (assets.gratipay.com) - 1110.17ms, 466.45KB
|-- /AAEAAAABc3MwMQAIAAAAAQAAAAIABgAOAAYAAAABABAAAQAAAAEAKAABAAgAAQA... () - 6743.56ms, 449.78KB
|-- /AAEAAAABc3MwMQAIAAAAAQAAAAIABgAOAAYAAAABABAAAQAAAAEAKAABAAgAAQA... () - 6794.16ms, 449.78KB
|-- School-Idol-Tomodachi/image (gratipay.com) - 4990.14ms, 452.32KB
|-- Timefounder/image (gratipay.com) - 5047.67ms, 451.41KB
|-- KnightTouchBar-2000/image (gratipay.com) - 5090.69ms, 451.35KB
|-- cagatay/image (gratipay.com) - 5105.57ms, 451.58KB
|-- roomify/image (gratipay.com) - 5140.21ms, 454.40KB
|-- fonts/icomoon.woff (assets.gratipay.com) - 5154.81ms, 454.29KB
|-- Screna/image (gratipay.com) - 5163.51ms, 457.72KB
|-- Zerodark-theme/image (gratipay.com) - 5226.16ms, 454.64KB
|-- Laravel-Mage2-Ecommerce/image (gratipay.com) - 5248.63ms, 452.58KB
|-- simple-redis-cache/image (gratipay.com) - 5275.46ms, 451.24KB
|-- simple-redis-store/image (gratipay.com) - 5289.77ms, 451.24KB
|-- 8AAQAAAAFzczAxAAgAAAABAAAAAgAGAA4ABgAAAAEAEAABAAAAAQAoAAEACAABAA... () - 6998.27ms, 449.78KB
|-- UAParser.js/image (gratipay.com) - 5341.00ms, 453.24KB
|-- The-Void-Linux-Distribution/image (gratipay.com) - 5376.20ms, 453.18KB
|-- /banner.jpg (assets.gratipay.com) - 5397.64ms, 493.92KB
|-- datatamers/image (gratipay.com) - 5412.02ms, 451.39KB
|-- atom-autocomplete-lua/image (gratipay.com) - 5435.16ms, 451.33KB
|-- Conductor/image (gratipay.com) - 5477.47ms, 453.06KB
|-- /tipr.min.js (assets.gratipay.com) - 7553.90ms, 450.58KB
|-- /bootstrap-dropdown.js (assets.gratipay.com) - 7644.22ms, 451.74KB
|-- /chosen.jquery.min.js (assets.gratipay.com) - 7859.21ms, 457.54KB
|-- /gratipay.js (assets.gratipay.com) - 7982.02ms, 463.90KB
|-- /jquery.min.js (assets.gratipay.com) - 8296.49ms, 487.34KB

Other:

2 resources delayed first paint by 703ms:

https://assets.gratipay.com/gratipay.css?etag=t7Tkt7Jp52vWje7Wgmm-Sg~~ (delayed first paint by 405ms)
https://cloud.typography.com/6540672/615104/css/fonts.css (delayed first paint by 298ms)
  • Page contains some content when its scripts are not available

2. Site is progressively enhanced

Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.

  • Test website for cross browser compatibility on real browsers.

3. Network connection is secure

Security is an important part of the web for both developers and users. Moving forward, Transport Layer Security (TLS) support will be required for many APIs.

  • Site is on HTTPS
  • Site redirects HTTP traffic to HTTPS

https

4. Mobile-friendly

Users increasingly experience Gratipay on mobile devices, so it's important to ensure that the experience can adapt to smaller screens.

  • Use theme-color meta tag.
  • HTML has a viewport .
  • Content is sized correctly for the viewport.

5. Modern protocols

  • Serve gratipay.com over HTTP/2.
  • Serve team images over HTTP/2.
https://gratipay.com/ (http/1.1)
https://gratipay.com/School-Idol-Tomodachi/image?size=small (http/1.1)

6. CSS

The following elements do not have sufficient colour contrast:

#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .details.room‐
for‐numbers > .i
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .details.room‐
for‐numbers > .status
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .details.room‐
for‐numbers > .status > a
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .details.room‐
for‐numbers > .status > a > .status‐icon.approved
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .details.room‐
for‐numbers > .ctime
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .details.room‐
for‐numbers > .owner
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .details.room‐
for‐numbers > .owner > .owner
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .numbers.mono >
tbody > tr:nth‐of‐type(2) > td:nth‐of‐type(2)
#content > .tabs > table:nth‐of‐type(1) > tbody > tr:nth‐of‐type(n) > .item > .numbers.mono >
tbody > tr:nth‐of‐type(2) > td:nth‐of‐type(3)

contrast

7. JavaScript

  • Minify JavaScript files.
https://assets.gratipay.com/gratipay.js?etag=Y59-7dhkyAPyCn-tcouk5w~~
https://assets.gratipay.com/bootstrap-dropdown.js?etag=dl7yT22DdV0LK-kWZQEv4w~~

8. Best practices

@mattbk
Copy link
Contributor

mattbk commented Dec 24, 2016

#4234 is part of 8, but all projects are still being loaded.

@JessaWitzel
Copy link
Contributor

Are the italics portions our current times/metrics?

How did you set those targets? Are they standard?

@EdOverflow
Copy link
Contributor Author

Are the italics portions our current times/metrics?
How did you set those targets? Are they standard?

https://gratipay.slackarchive.io/gratipay/page-55/ts-1486065489005059

@rohitpaulk
Copy link
Contributor

  1. Modern protocols

We can't do this for dynamic pages, since Heroku doesn't support HTTP/2 yet. However, we can do this for assets served via the CDN (where it is definitely important, given the number of small requests)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants