Your Website's Performance Could Be Costing Time and Money

Here at VIA, we believe web performance optimization (WPO) is essential for all websites. But some may wonder: is performance really important for my website? How can I tell if my site performs well? And how can I fix it? Let's discuss.

A poor-performing website can impact your customer’s experience with your brand. It can reduce conversion rates, affect the perception of your brand, and even cost your customers time and money.

In this article, we will explore what a “performant website” is, how a poor-performing website costs your business and your customers, and steps you can take to improve your existing website’s performance.

Finally, we share a case study about how we used this work to increase a client's website's revenue by +16%!

What we talk about when we talk about performance

First, what does performance really mean?

Speed

A performant website loads quickly and is immediately interactive.

Examples of bad performance:

• The site takes multiple seconds to begin displaying content.
• Content starts appearing quickly but trickles in slowly.
• Content appears to be loaded, but nothing is clickable yet.

Efficiency

A performant website loads only the required assets, which should be tailored to the user's device and preferences.

Stability

A performant website displays its content without shifting its layout as sections load in, responding to user input without delay.

Why Performance Matters

Now that we've established web performance, you may wonder why it matters. "Sure, a fast site sounds great, but so does a fast car, and my [insert affordable family car] serves my needs just fine. Does my site really need to be blazing fast?"

In our opinion, yes! Here's why.

Better accessibility

Conversations around web accessibility generally involve supporting users with physical or cognitive disabilities, but a user's socioeconomic status is also a concern. Users with low-powered devices or slow internet connections are the most impacted by poor web performance. Someone with a fast device on a fast network may not notice that a site has a large Javascript bundle or unoptimized images; someone without either may not be able to load it at all. And for those without unlimited data, accessing an unoptimized site may literally cost them money.

Optimizing a website's performance will make it more accessible to users on any device.

Happier users

In her book Time is Money: The Business Value of Web Performance, WPO expert Tammy Evert opens by observing that "performance is very much a human issue." She shares a concept called "web stress" and points to research suggesting that using a slow website can actually increase your blood pressure. We will touch on the business implications of this shortly, but it's important to consider that we have a responsibility to the people who use our products. We should be respectful of their time and health, and we should also try to give them a good experience whenever possible.

It's important to note that a fast website alone does not make a happy user. A fast site with a confusing layout can still frustrate a user; its design is a significant part of the user experience. Even the best design is simply an attempt to mitigate a user's stress level when finding information or looking for a product. Slowness or other interruptions only add to that stress. The combination of a good design with no performance issues can create a happy user or at least one with a little less stress than before.

More conversions

Here's Everts again: "When users are happy as a result of a fast website, they're more likely to follow calls to action telling them to register, download, subscribe, request information, or purchase." Note the variety of actions here. Happy users simply *do* more. Regardless of your goals for the site, it is more likely they will be met if your users are interacting with a performant site.

For examples of this, visit WPO stats, where Everts and Tim Kadlec of WebPageTest (more on that later) curate web performance success stories. While you might expect large companies like Yelp to see improvements in their conversion rates by reducing load times, you might be surprised by an online dress retailer seeing a 30% conversion rate increase by moving to a faster eCommerce platform and optimizing images. Performance improves results for businesses of all scales.

Better SEO

In 2020, Google introduced the Core Web Vitals, a collection of metrics for measuring a site's performance and user experience. We'll discuss these metrics in the following section, but here's the critical thing to know here: in 2021, Google incorporated the web vitals into their search ranking algorithm. SEO and WPO are now intrinsically linked.

If you are doing the work to optimize your search rankings with searchable content and keyword tracking, but you are not optimizing your site's performance, you are missing a huge step.

How is Performance Measured?

You might wonder: "So performance is important, but how can I tell if my website is performant?" There are two ways to measure performance at a high level: field data and automated testing.

Field Data

The absolute most effective way to tell how well your site is performing is to see how actual people are using it. This can mean:

• Bringing people in for user testing
• Asking users for permission to record their usage
• Using analytics to capture user behavior
• Using the site yourself

It is obviously not practical for everyone to bring in actual users for observation, which is why we have automated testing. Still, it's important to remember that automated tests are just proxy metrics, as helpful as they may be.

Automated testing

Web Vitals

As discussed above, Google's Web Vitals are metrics designed for measuring page performance, and while other metrics exist, these are the standard measurements across the web.

There have been a few variations, but these are the three prevailing metrics at the time of writing:

• Largest Contentful Paint: how long it takes for the largest visible image or text block to load
• Cumulative Layout Shift: how much the content moves as it loads in
• Total Blocking Time: how long the main Javascript thread is blocked by executing code, preventing user input

Google Lighthouse

Lighthouse is a tool made by Google for measuring website quality. It predates web vitals and tests for more than just performance, scoring on accessibility and best practices. Its results can vary from web vitals a bit, but the slightly different approach makes it a good complement to the basic metrics, and it's easy to run: just open the **Lighthouse** tab in the Chrome Dev Tools.

WebPageTest

WebPageTest is a tool that incorporates everything we've discussed so far. You can provide a URL and schedule a test that does the following:

• Scores the core web vitals
• Runs a Lighthouse audit
• Times every network request
• Grades image optimization
• Provides real user metrics, if available

It is the absolute best place to start if you want to get a sense of your site's performance.

How can We Improve Website Performance?

You might have run a WebPageTest and been overwhelmed by all the data you're presented with. Now that you have it, where to begin?

Common Website Improvements

Here are the most common problems on a site and how to fix them.

Unoptimized or Unresponsive Images

To reduce file size and improve Largest Contentful Paint:

• Use modern formats like AVIF or WebP
• Restrict the image dimensions to the dimensions at which it will be displayed on the page
• Use multiple image sizes and `srcset` to only deliver the image size needed by the device
• Use a transformation tool like Cloudinary or Squoosh to reduce the file size

To prevent layout shift:

• Set `width` and `height` attributes on the image so the browser knows how much space to save for it

Render-Blocking Resources

When analyzing a request waterfall, you may notice that some important files, like those with critical CSS, are blocked by less important requests, like Javascript, that are not needed until the content is ready. There are a few ways to improve this.

• Use Harry Roberts's ct.css to optimize the order of `<head>` elements.
• Move `<script>` tags to the end of the body and/or use the `async` or `defer` attributes

Excessive Javascript

Loading a large Javascript bundle can block the loading of content and extend the Total Blocking Time, which prevents user interactivity. Take steps to deliver the minimum required JS.

• Defer JS requests
• Code-split your JS bundle
• Lazy-load modules, where possible
• Include only the most essential analytics scripts
• Consider using server-side analytics

A Case Study

Our client, WARE Inc., recently asked us to audit their site parts eCommerce website, BoilerWAREhouse.com. We had just added some new features, like Algolia autocomplete in the search and a dynamic Parts List for users. We wanted to take a step back and ensure everything was as optimized as possible without changing functionality or architecture. We did not build the site originally, so we also saw it as an excellent opportunity to better understand how things were structured.

We ran a WebPageTest and found that there was room for improvement. Emulating a 4G network connection on mobile, we got the following results:

• Largest Contentful Paint (LCP): 9133ms
• Total Blocking Time (TBT): 8481ms

It also identified a large number of uncompressed images, and ct.css determined that several critical assets were loading out of order.

So we made the following changes:

• Lazy-loaded all background images below the fold (i.e., not in the viewport on the initial load before scrolling)
• Deferred the loading of all hidden images (e.g., images in the navigation's mega menu dropdowns)
• Ran large hero images through Squoosh to compress
• Resized and compressed all background images
• For the hero image above-the-fold, used Cloudinary's API to generate resized copies for each device breakpoint to avoid loading the desktop-sized image on mobile
• Re-ordered the `<head>` elements and added `defer` to the Javascript scripts
• Audited the Google Tag Manager and removed some unnecessary tracking tags
• Removed an unused Google Maps script

After all of these updates, we re-ran the test and found that we had cut both the LCP and the TBT in half (LCP: 3879ms (-57%); TBT: 4414ms (-48%)), and the site was noticeably faster for our QA testers.

The effects of these updates can be measured by more than just improvements in site speed and performance. In the 3 months following the updates, the website’s performance with user engagement and business goals also improved.

In the three months after making these updates, site users viewed an average of an additional page per session, and the average session duration increased by nearly 30 seconds!

In terms of revenue, site revenue increased by +16%, eCommerce conversion rate increased by +39%, and average order value increased by +24%.

If you want to level up your web performance, get in touch!

If you are encouraged to make these types of improvements to your site and don't know where to start, get in touch with us.

The VIA Studio development team can lead a website audit project to find improvement opportunities, make the required updates, and monitor performance. We believe that no website project is ever completely closed and that there is always room for improvement.

Contact us today so we can discuss your needs!