Arrow Down Arrow Right Arrow Down Arrow Right Arrow Arrow Down Arrow Left Arrow Right Articles Case Study Close Facebook GitHub Google+ Menu Information Link LinkedIn x five Interview Location Code Snippet Twitter Tick Timer Users Card Discount Magnifier Time Quote

Web Performance Awards – April 2016

by Lubos Kmetko on May 26, 2016
Published in Performance Add Comment

How did Awwwards winning websites deal with performance optimization in April 2016?

We have tested 30 winners of the Awwwards Site of the Day. (Check the end of the article for How we test.)

Top 10

1. Studio Rotate° – 90/100

  • PageSpeed Insights Mobile: 90
  • PageSpeed Insights Desktop: 96
  • WebPagetest: 87

2. Vanderlanth Portfolio – 82/100

  • PageSpeed Insights Mobile: 71
  • PageSpeed Insights Desktop: 91
  • WebPagetest: 83

3. The MoviePass Quest – 81/100

  • PageSpeed Insights Mobile: 70
  • PageSpeed Insights Desktop: 86
  • WebPagetest: 83

4th – 10th place

  1. Airforce.com – 78/100
  2. Poignée de main virile – 75/100
  3. Quechua Lookbook Spring Summer 2016 – 74/100
  4. EPIC Ireland – 71/100
  5. Studio Marani – 70/100
  6. Diadora: Bright Delivery – 69/100
  7. Falter Inferno – 68/100

Last 3

The lowest 3 results in our test were:

  1. VITY’S DESIGN – 33/100
  2. Eyezen Challenge – 31/100
  3. World Chess – 17/100

Complete results

To increase transparency of our testing we have made all results publicly available. You can find them in this spreadsheet.

Google PageSpeed Insights

The following table shows how many sites passed Google PageSpeed Insights rules:

Mobile Desktop
Passed Consider Fixing Should Fix Passed Consider Fixing Should Fix
Avoid landing page redirects 1oo% 0% o% 100% 0% 0%
Reduce server response time 70% 27% 3% 70% 30% 0%
Leverage browser caching 3% 53% 4% 3% 63% 33%
Enable compression 43% 23% 33% 43% 23% 33%
Minify HTML 63% 37% 0% 67% 33% 0%
Minify CSS 77% 23% 0% 80% 20% 0%
Minify JavaScript 57% 40% 3% 53% 43% 3%
Optimize images 40% 40% 20% 43% 27% 30%
Prioritize visible content 60% 37% 3% 60% 40% 0%
Eliminate render-blocking JS and CSS in above-the-fold content 0% 13% 87% 3% 47% 50%

Legend:

  • Passed – No significant issues found. Good job!
  • Consider Fixing – Consider fixing this if it is not a lot of work
  • Should Fix – Fixing this would have a measurable impact on page performance

WebPagetest

What optimization grades did websites get from WebPagetest?

A-B C-D F (X)
First Byte Time 80% 3% 17%
Keep-alive Enabled 93% 0% 7%
Compress Transfer 63% 13% 23%
Compress Images 27% 30% 43%
Cache static content 20% 17% 53%
Effective use of CDN 30% 70%

Commentary

  • The average score of all tested sites was 61, which is slightly worse than last month when the average score was 63.
  • This month’s winner, Studio Rotate°, is a React site. Despite its first place it’s not without performance optimization flaws, eg. it could save almost 700kB on the image optimization. It could also cache resources better.
  • Recently we documented development of our own website which was aimed at performance. How does it stand in comparison to the Awwwards winning websites? Here are the results:
    • PageSpeed Insights Mobile: 99
    • PageSpeed Insights Desktop: 98
    • WebPagetest: 77
    • Total Score: 91

Fail of the month

A website with around 100 static assets none of which leverage browser caching. This means that after some time, on subsequent visit, the user’s browser will download resources again. For an explanation of how a browser calculates cache expiration time when you don’t control it explicitly, check the MDN’s explanation.

How we test

Google PageSpeed Insights

We test each website home page with Google PageSpeed Insights and count the average score from the Mobile and Desktop results.

WebPagetest

We test each website home page with WebPagetest and calculate the score from the result grades as follows:

  • A – 100
  • B – 80
  • C – 60
  • D – 40
  • F – 0

Effective use of CDN criteria is either Yes (100) or X (No – 0).

Total Score

The total score is calculated as an average from the Google PageSpeed Insights score and the WebPagetest score. The maximum score any site can get is 100.

About the author

Lubos Kmetko

Lubos Kmetko started to work for Xfive (formerly XHTMLized) as a front-end developer in 2006. He currently helps with business operations and writes for the Xfive blog.

More articles from Lubos

Comments

Would you like to add something?

All fields are required. Your email address will not be published.

More from the blog

Work with us