You’ve probably been there: it’s time to redesign a site, and everyone has a different target in mind. Some are thinking about how the site will look and feel—imagery and animations and typography. Some are focusing on how well the site will perform—load times and SpeedIndex scores and such. Others are focusing on accessibility or SEO or click-through and conversion rates.
But what do you do when these goals seem to collide? Especially when it comes to performance. We all know that a performant site is a good thing. But how fast is fast enough? And when, if ever, is it appropriate to compromise?
Now, if the only goal in redesigning a site is to make it smaller and faster, how do you decide when to stop? If fewer images help, why not go all the way and remove all images from the site? That would speed things up, right? Or, since fewer web fonts could help with performance, why not get rid of all of them? That would make things faster.
If performance was the only goal, then this might make sense. But usually there are plenty of other concerns that need to be considered. Things like branding, and messaging, and overall user experience. How do you balance these factors? When is it okay to take a slight performance hit in order to meet your team’s other objectives?
A performance budget
This is where a performance budget can be extremely valuable. By defining what is acceptable performance up front, everyone has a target to shoot for. And having a defined target in place forces discussions about what the trade-offs would be for choosing a certain design or adding another feature as opposed to going a different route.
Do you add in a couple custom fonts, but dial back some of the imagery? Do you really need that 3rd party plugin for social sharing or commenting? or could those resources be better used elsewhere?
Now, a performance budget, like a real budget, only works if you stick to it. But if your team can agree to one, and work within it, not only will it guarantee that you meet a certain performance baseline, but it will also provide you with some margin to explore different designs or features.
Setting the targets
So how do you get started in defining a performance budget?
If you’re redesigning or updating an existing site, the very first step is to know where you’re at. What are the current SpeedIndex scores, times to first byte, request counts, page weights, etc. for the pages of your site (WebPageTest is a great place to start)? Which of these are most important to the team? Determining which metrics you care most about, and documenting where you currently stand, will be valuable in determining what goals to shoot for.
Once you know where you’re at, it’s time to decide what targets you want to aim at. There are a few approaches you could try:
First, do no harm. If you’re site is already performant, one approach is to agree that any future features or updates will not make the site less performant. So while a redesign of the site may not make the site faster, it also won’t make it worse.
Incremental gains. Another approach is to shoot to improve your current metrics by a certain percentage. Say 10% or 20%. And while this may not get you to your ultimate performance goals right away, it’s still a step in the right direction.
Current recommendations. You can also check and see if there are current recommendations from industry leaders. For instance, Google recently published some recommendations for mobile performance. You may want to shoot higher, but it’s certainly not a bad place to start.
For any goals to work, though, it’s best to set a performance budget early, and check it regularly. In the end, the decision of what metrics to use, and what targets to aim for, is up to you.
The challenge and benefits of constraints
Ultimately, a performance budget provide constraints. And although constraints aren’t usually fun, they do tend to be helpful. They can force your team to clarify what’s most important, and to figure out ways to hit the agreed upon goals. They can be used to ensure that performance doesn’t get neglected, but at the same time give team members freedom to make design decisions within the agreed upon parameters.
A site’s goal is usually to make the user’s experience as good as possible. That experience undoubtedly includes performance, but there are usually other considerations that need to be taken into account. And using a performance budget can help balance these various considerations into something the whole team can buy into.