The Principles of Performance by Design

Because great performance starts with design.

First, we must understand and acknowledge that performance is our responsibility when we create websites. We need to treat it as a critical matter alongside design, development, and marketing.

The problem with slow loading pages is not mere impatience:

“Information stored in our short-term memory decays quickly, which is why we don’t perform as well when we have to wait, even for just a few seconds. And after 10 seconds? You can pretty much forget about it. Literally.” — Our need for web speed: It’s about neuroscience

So, we are not wired to wait for web pages to load. If you’re still skeptical here are a few things to consider:

• Firefox estimated that an additional 10.28 million downloads will be achieved yearly by improving landing page load time by 2.2 seconds.
• Site speed is one of Google’s ranking signals.
• Websites are getting slower
• Web Performance Today has a large list of retailers and websites that improved performance—and their bottom line.

Performance needs to be a priority from the beginning of the project

When you put performance as a priority in the beginning of a project, you will use it to guide your decision making. Performance should not be left to the developer right before a site is launched, that is far too late—it is really the result of decisions made by the entire team starting at the beginning of the project.

• What CMS should we use?
• Where will we host the site?
• Should we download a theme? How do we identify themes with poor performance?
• Will we use a framework like Bootstrap or Foundation?
• Do we need a homepage carousel? If yes, how many images are necessary?
• How can we make sure that our responsive web design doesn’t result in bloated page weight?
• How many fonts are necessary?
• Will we use 3rd party or lightweight share buttons?
• Which plugins are necessary? Are there alternatives with less impact on performance?

Performance impacts every web professional’s job

Every person involved with a website project has a reason to be concerned about performance because slowness undermines the entire project.

Developers will likely be the first to get blamed for poor performance, but the reality is that designers share the responsibility—decisions made in design effect performance. If you design complex features that require a lot of resources, the developer can only do so much.

That’s not to say that developers do not have a role in crafting excellent performance; adhering to best practices is also critical.

A website that loads quickly has a ripple effect that has a positive impact on user experience and search engine marketing. While Google has stated that only 1% of search queries are effected by page speed as a ranking factor, I think it is important that websites with a positive user experience are likely to earn more conversions, social shares, and engagement.

Know that everything has a cost and prioritize accordingly

It is okay to sometimes make a decision that will be at a cost to performance; the key is to be aware of the cost so you can prioritize. It is up to you to weigh the cost against the benefits of each element.

I decided to use Foundation to when I designed my personal website. I knew that this had a cost and I was willing to accept that because of the benefits of using the framework outweighed the cost. I reduced the resources that the framework used by a) eliminating features that I did not need and b) optimizing the files.

Tim Kadlec suggests setting a performance budget. Budgeting forces you to optimize required features and prioritize nice-to-have features.

Keys

The keys to great performance are: 1) establishing speed as a priority at the beginning of a project 2) make sure everyone knows their responsibility and 3) prioritize features and their performance cost.

Hollar at me on Twitter to let me know what you thought about this article!