Good Performance Is Good Design

It’s no secret that in recent years smartphone and tablet use has grown exponentially, and on many websites mobile is overtaking desktop traffic. The “mobile first” philosophy is finally becoming more commonplace as many websites embrace responsive design. Designers and user experience (UX) team members have become focused on rethinking the creative and user experience for these smaller screens. On the other side of the coin, the latest trends for the desktop experience include large videos, moving backgrounds, large image backgrounds, parallax, complex HTML5 or JavaScript animations and richer content. The look and feel, usability and content are all very important, but one thing is often overlooked – performance!

Why Performance Is a Necessity

While these sites may be visually appealing, too many visitors will not wait around to see them if they take too long to load. Many studies and surveys have shown that if the user perceives the website as slow or they have been waiting for more than five seconds, they will leave your site. Optimizing performance leads to higher visitor retention and, ultimately, engagement and conversions, which are all important to our clients. Second, search engines measure speed when they determine search rankings. If search engine optimization (SEO) is a client concern, speed should be also. Third, as we know, mobile traffic is growing. Mobile users have demonstrated in studies to be even more aware of speed due to mobile broadband networks still being significantly slower than Wi-Fi (roughly 300 milliseconds per request vs. 50 milliseconds). For mobile, performance has become a critical aspect of our digital projects.

Where to Go from Here

All too often performance is an afterthought or drops off the radar completely. In agile methods, it’s easy to forget when performance isn’t necessarily a “deliverable” that can be seen. Yet to implement fixes at the end of a project can be rather expensive as it becomes necessary to completely rework architecture.

How do we avoid such issues? It is important for everyone to make performance a priority. Good performance should be “designed” into the project from the start. When the topic comes up, developers should start bringing up issues such as minifying, caching, prefetching resources, http requests and more. It gives the impression that performance is only a concern for developers and “techie” people. Non-tech people such as clients and creatives don’t pay attention, when they absolutely should since they can make a huge impact with their decisions.

First, we must set performance expectations early. If you have a set goal for the page weight and load time, then every team member has to be involved in the decisions and make compromises between the balance of aesthetics and performance. A measurable goal holds the team accountable and gives something to refer to during design and development.

Second, we must also collaborate and educate. Performance is a multifaceted problem. Designers and developers should be in the same room early on, so everyone can discuss performance concerns and priorities in the wireframes and comps. Developers should know technical strategies such as caching or reducing http requests are best practices.

However, tech-focused team members can forget that clients and creatives don’t always understand the consequences of their visually driven decisions. Many creatives have embraced responsive design, but, according to Akamai (their network is responsible for serving nearly a third of all web traffic), 86% of responsive sites’ mobile pages are at least 90% as big as the desktop versions. Excessive amounts of large images, special fonts, videos and special animations can have massive weight that affects load times. Sure, they look amazing, but nothing is worse than having a beautiful interactive design launch and the client reaction being, “Why is it so slow?” Everyone, from client to designer to developer, should be flexible, educate each other, compromise and truly embrace agile development – willing to reevaluate the design along the way to optimize the site to be lightning-fast on all devices while still delivering a beautiful experience.

In Summary

It is clear web performance is important and needs to be addressed in the beginning. There is a struggle between having a site that looks incredible but is too slow to keep up with visitors’ expectations, and having a site that is fast and engaging at the same time. Which do you think will keep users coming back? Which do you think will leave them with a positive experience? No matter how beautiful, fun or unique a site is, no one will use it if it doesn’t perform well. We all want happy users and a faster Web; by merging design and development workflows, we can meet those goals.