Designing for Performance

Performance is user experience. User experience is the core of what we do here at AVIBE. We strive to create a great user experience in all of our web applications. Designing web applications is a balancing act between business goals and user needs. We want fast, functional, and lightweight applications; but we also want beautiful, memorable, and on-brand applications.

Audiences want content fast. Fast websites build trust and are memorable. According to a 2012 New York Times study, shoppers expected pages to load in two seconds; at three seconds, a large share abandoned the site. People will visit a website less often if it is slower than a close competitor by more than 250 milliseconds—that is a quarter of a second! We can market performance as a feature to our clients and to their users.

In order to optimize performance, a web application’s images, custom web fonts, interactions, style sheets, and third party scripts must be considered.  There are numerous ways we can optimize these to increase speed and performance. Fast websites do not have to be boring!

Goals should be created to prioritize performance from the beginning of a project by setting a performance budget, being deliberate in decisions and actions, and by communicating these actions. While doing so, keep mobile users in mind: create reusable patterns, avoid unneeded styles, and get designs into code earlier. Web applications should be tested on real devices and tested using different connection speeds.

A performance budget is a goal used to guide design and development. It is a tangible way to talk about performance. Consider every project decision as an item that has consequence. These budgets can be browser-based or user-experience-based. For example, set a budget of ten seconds for the amount of time that a page should load over a sub-3G connection, or set a per-page budget of 400kb or 15 requests. The important thing to note is that the budget should be followed at every step of the development process. If an image exceeds a page weight budget, then consider replacing the image, optimizing it, or removing some other page feature. The key to designing for performance is communicating performance goals to the team and to clients. Include performance budgets in project documents.

A user experience assessment can be created by identifying the strengths and weaknesses of current user experiences, including:

• Usability
• Content
• Navigation
• Information architecture
• Performance
• Workflow
• Brand

It is also important to set a web font budget. Each unique font added to a web application can require an external request to the font source and adds additional loading time. Each font style—like italic or bold—can also add extra requests and loading. Do more with fewer fonts, and always include font fallbacks.

Another way to improve performance is by manipulating the images to be used. SVGs can replace simple images and can scale up for retina devices. If they are defined inline, they also eliminate the need for an HTTP request. JPEGs are able to reduce noise and other complexity. The export quality can be decreased and unimportant areas can be blurred.

Web applications can also be optimized through code enhancements. Create repurposable code. Rename non-semantic elements. Remove inefficient selectors. Remove unnecessary elements. Create patterns through style guides.

Fun Fact: Webpagetest.org is a great tool for analyzing a web application’s performance.

A great way to optimize web applications further is by analyzing them, using tools like webpagetest.org. This site provides data on page weight, time that a page takes to start to render, time that a page takes to fully load, number of HTTP requests, and speed index. According to webpagetest.org, "The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port." This tool allows you to view the data in graphs, videos and charts. It also allows you to compare site performance.

Using these tips, we can continue to produce beautiful and functional user experiences.

Thanks to An Event Apart San Francisco 2015 for presenting topics on performance. In particular, the presentations Design Decisions Through the Lens of Performance by Yesenia Perez Cruz and Designing for Performance by Lara Hogan provided great insight.