This work is licensed under a Creative Commons Attribution 4.0 International License.
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.
-
Why Performance Matters, Part 1 by Denys Mishunov
-
Why Performance Matters, Part 2 by Denys Mishunov
-
How to make a performance budget by Dan Mall
-
Performance as Design by Brad Frost
-
Preventing the Performance Hit from Custom Fonts by Chris Coyier
-
Image Performance by Lara Swanson
-
Website Performance: What To Know and What You Can Do by Christian Heilmann
-
Improving UX Through Front-End Performance by Lara Hogan
-
Performance Budget Builder by Brad Frost
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.
-
Begin by reading through the background research above to gain an insight into why performance matters and the metrics and reasons behind page speed.
-
Identify a website of your own choosing as well as 3 to 5 competitor websites.
-
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.
-
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.