Awwwards sites of the day
Awwwards is a long running showcase site that, in their own words, “recognize(s) the talent and effort of the best web designers, developers and agencies in the world.” Primarily design-focused Awwwards doesn’t place much stock in performance when selecting their sites of the day. We decided to evaluate the performance of five recent winners in the Web Agencies category.
We decided to just look at the mobile PageSpeed scores of the home page for each site. Here are the results:
The highest score was 89 and the lowest score was 67.
Page speed scores are fairly low for all of these sites and that is the result of fairly common performance issues not unique to them at all. There is minimal attention paid to caching of static resources, HTML, CSS and JS aren’t minified, JS is loaded in the head and there are too many requests.
The biggest problem with these sites is the sheer size of their home pages. With the exception of Locomotive which comes in at a fairly respectable 1mb, page size for the others ranges from a minimum of 4.6mb all the way up to around 8mb. These are unacceptably large numbers and it is images that are the main culprit.
Summary of images
|Site||Size||Requests||No. of images||Image size|
|We Like Small||6mb||35||9||4.5mb|
One might expect that a major concern for design agencies would be to effectively showcase the visual aspects of their work and this is perfectly reasonable. However what is not reasonable is the subsequent bloat that seems to be the norm rather than the exception with agency websites. One may perhaps also assume that if this is the case on their own websites the same is true for those they are building.
In addition to implementing standard performance strategies like caching and minifying, reducing the number of images and optimising them would go a long way to improving performance. If Locomotive can effectively showcase their work with 755kb of images the same can be done by other agency websites. If there must be a large number of images they should be optimised and an image loading strategy should be considered. The
srcset tags could also be used to reduce the page size on mobile devices where an 8mb home page is a serious payload, affecting not only page speed but also the cost to the user.
Published on 23 September 2016.
Steve Barnett (@maxbarners) and Justin Slack (@justin_r_slack)
CTFEDs Organising Team