Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
59 lines (29 sloc) 4.01 KB

Performance Budgeting

This work is licensed under a Creative Commons Attribution 4.0 International License.

Challenge introduction

A reliable, well structured, and enjoyable user interface are the foundation for creating a great website. But what good is a great website if a user has to wait a considerable amount of time for the page to load? A faster website leads to a more satisfied user and can dramatically increase a sites conversion rate. Performance budgeting provides a metric by which a sites design and functionality can be measured. This measurement allows a design and development team to begin or optimize an existing website to provide the best possible solution to the end user by designing and developing around a set of budgeted resource constraints.

Background research

Challenge outline

Pick an existing website and create a list of the resources currently being utilized on the homepage. How many images? How many JavaScript files? etc. Next, choose 3 - 5 competitor websites and create a performance budget to evaluate your chosen site compared to these competitors. You will then use this performance budget to target areas for improvement and key steps a development team could take to improve the overall performance of the site.

Recommended process

  1. Begin by reading through the background research above to gain an insight into why performance matters and the metrics and reasons behind page speed.

  2. Identify a website of your own choosing as well as 3 to 5 competitor websites.

  3. Utilize the steps outlined in "How to make a performance budget" by Dan Mall to create a performance budget of your chosen site and its competitors.

  4. Utilize the newly created performance budget and your previous research to analyze areas for improvement and steps that can be taken to improve the overall page speed.


  • An initial audit of the existing resources of your chosen site.

  • A performance budget comparing the site you chose and 3 - 5 of its competitors.

  • Alongside the performance budget provide key improvements that could be taken to improve the page speed of the site you chose and the reasons why.


You’ll have just under two weeks to develop your performance budget. The challenge starts on a Monday and is due for evaluation by Tim Wright or another member of the front-end dev team the following Thursday. We highly recommend checking in several times with members of the front-end team along the way. There will not be any project extensions, you are responsible for delivering on time. Part of delivering on time is making sure you’re on the correct path at several intervals along the way.

Your brief talk will be due for presentation the day after the challenge is due.