Blog Trends

Website Weight Loss: Why Milliseconds Matter

When we think of modern site design, we tend to think of terms like responsive or mobile first. While both of these methods are a great place to start when planning a new site, they tend to miss one crucial element: site performance. Site performance is defined as the speed in which a page’s necessary elements are visually rendered for the user. The smaller the page’s file weight, the quicker it will render in the browser.

When a website loads quickly, it has an impact on both SEO and user experience. Google gives preference to sites that load quickly, and sites with a good user experience are more likely to earn more conversions, social shares, and engagement. According to Aberdeen Group’s State of the Union: Ecommerce Page Speeds & Web Performance, Summer 2014, it was shown that a one-second delay in load time translates to a 7 percent loss in conversions.

Designing with a Performance Budget

In the same way that we focus on user experience, visual design, front and back-end development, and content management, we should also be including site performance as a crucial part of the process. One way to do this is by creating a “performance budget.” A performance budget requires taking the time to define a target page weight (typically in kilobytes), and then making sure all pages do not exceed that value. Ideally, one would want to keep the page weight (performance budget) between 100 and 500 KB per page, and have a page load time of under three seconds.

To give an example, when the top 100 e-commerce sites were tested, the testers found that the fastest pages contained 50 resource requests and were 556 KB in size. For the 10 slowest pages, the pages contained 141 resource requests and were 3,289 KB in size. Said another way, the slow pages were six times the page weight of the faster pages. Pair this with the fact that 79 percent of all users will abandon a mobile website if it takes more than five seconds to load, and site performance becomes a real concern. Some of the main culprits of adding file weight are:

Resource requests
Large media files
Image-heavy pages
Third-party plug-ins and APIs

Maintaining a Performance Budget

Designing with a performance budget requires the entire project team to communicate to make sure the desired site layout and functionality are achievable within the guidelines. It also helps to ensure that performance isn’t seen as just a “development problem,” but instead is viewed as something that needs to be considered holistically as the site takes shape. This sounds all well and good until hard decisions need to be made, such as a client request to add a video with a large file size to the marquee. When a request like this comes in, and assuming the client has already agreed to a performance budget, there is a good chance you will need to start having some candid conversations.

To help determine the best course to take, there are three options:

1. Optimize (reduce the file size of) an existing feature or asset on the page.
2. Remove an existing feature or asset from the page.
3. Don’t add the new feature or asset.

Methods for Achieving Small Page Weight

There are many ways to trim the fat off of a heavy page. These include optimizing all page assets (images, multimedia, and plug-ins) and using deferral among many others. Deferral is the practice of deferring any page resources that are not part of a page’s critical rendering path (the code and resources required to render the initial view of a web page), so that these nonessential resources load last.

From a UX and design perspective, there are also many choices that can improve performance. These include reducing the number of custom web fonts, images, and large multimedia files and using progressive JPEGs. Some studies have shown that this method alone can increase site performance up to 15 percent.

When it comes down to it, it is up to the team to weigh the costs and benefits of every element and proceed accordingly. When a site performs poorly, it directly affects the success of the entire project.

The keys to great performance are:

Establishing speed as a priority at the beginning of the project
Ensuring that designers and developers collaborate when making performance decisions
Prioritizing features and their performance cost

The most high-performing sites:

Contain smaller, leaner pages
Support the critical rendering path
Defer non-essential resources