Here at VIA, we believe web performance optimization (WPO) is essential for all websites. But some may wonder: is performance really important for 

 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

A performant website loads quickly and is immediately interactive.

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.

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

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

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?"

 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.

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.

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.

, 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

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.

, 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.

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.

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:

Asking users for permission to record their usage

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 

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:

: how long it takes for the largest visible image or text block to load

: how much the content moves as it loads in

: how long the main Javascript thread is blocked by executing code, preventing user input

 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.

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

It is the absolute best place to start if you want to get a sense of your site's 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?

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

To reduce file size and improve Largest Contentful Paint:

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

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

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.

 to optimize the order of `<head>` elements.

Move `<script>` tags to the end of the body and/or use the `async` or `defer` attributes

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.

Include only the most essential analytics scripts

, recently asked us to audit their site parts eCommerce website, 

. 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:

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

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)

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

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%.

Frontend Development

Your Website's Performance Could Be Costing Time and Money

Welcome to the final installment of our Email @ 50 series. For the last article, Email @ 50 contributors got together and discussed on Slack everything that they learned from writing this series and what they expect out of the future of email. Read through the transcript below!

Based on your experience writing articles in this series, what did you learn about email with respect to your discipline?

 For me, it was a good opportunity to take a step back and see how far we've come with email marketing over the course of my career. When I got started in advertising/marketing in the early 2010's I feel like we were just scratching the surface of marketing emails—mainly improving design and layout and trying to determine the best practices for email on mobile.

I also remember a lot of conceptual ideas regarding automation, customization, and using data to better improve the user's experience that are now common practice. Things like abandon cart emails, auto-response emails to lead forms or reservations, or responsive design that looks good on all devices.

 is by far the best tool at this point for fast email development that works across the board. Putting together a list of tools, it with Litmus provides the best experience right now if you are making emails by hand, after looking back at our old process of developing emails, it’s a night and day difference.

I was surprised to find that majority of emails in 2020 were opened on a phone as opposed to desktop... Makes design simplicity that much more important. Design has always been tricky for email specifically, but when you are working with so many different constraints and devices and platforms. There's so much that works on one and not on another that the most important thing in email design really is to reduce clutter or anything that isn't absolutely necessary to get the point across - Rule of thumb: Aim to create as clean a design as possible, and you will likely enhance the user experience. The fact that mobile email has taken over desktop just backs up the need to keep a single column layout, simple, large CTA's and headlines, legible fonts, high contrast etc.

 What remains your biggest hurdle when it comes to email marketing?

 Not having cut and dry standards to follow. Something may work for one browser or email client but then looks like complete shit and breaks on another. That and balancing client expectations vs. an achievable layout

The email clients still don't have standards across the board (looks at Outlook). Even with those build tools, it can still be a major pain

 A lot of times, a client wants to see some super pretty, custom extension of their brand through an email newsletter (patterns, photography, overlapping elements, custom fonts, etc.), but you have to limit those expectations in an email if they want the thing to actually render for their audience

For me, it would be a lack of emphasis on two things; 1. audience creation/management and 2. lack of a priority on content

First, too often email lists/audiences are sparse. Sometimes you're lucky to get more than just a single column .csv of email addresses. Other times the list is a mess and formatted incorrectly. Lastly, developing a good email audience takes time and effort. You need to first give them a good reason to subscribe. Sometimes it can be simple, like offering a discount for submitting your email address or to access additional content like white papers or case studies. But you also have to give your subscribers a reason to stay, which leads me to my second point.

Second, content is still king for email (and so many other digital tactics). If your email content is just recycled from elsewhere or you don't have something worthwhile to say, it will be ignored in your recipient’s inbox, or worse, they'll unsubscribe. A strong content strategy is key to keeping an audience engaged.

I think it's interesting that both of you all referenced the discrepancy in how an email can render depending on the email client. It leads nicely into my next question...

What do you think could help make email an even better platform for marketers? (I think I know what you all are going to say, lol)

Vague - Being more flexible. Specific - Let me use more fonts!

If we could move on from tables and the current lack of standards and limits

Also, if as an industry, we take a step back and make sure we don't bloat emails with too much media

@nick "Also if as an industry we take a step back and make sure we don't bloat emails with too much media" this is a good point, especially considering how many emails are now opened on cellular networks rather than Wi-Fi

It's truly frustrating having to pick between like 8 fonts if you want them to render correctly and not eff up the design for all of your audience

Well... 8 that are absolutely considered bulletproof

You have the web safe fonts, some clients don't support @font-face

Interesting, I was unaware of how limited font options were for email!

Are there any recent trends that you have seen that get you excited or make you curious about the future of email?

People moving away from older versions of Outlook and moving more towards web clients, which tend to not have as worse issues or get updated more frequently

@nick I think the further adoption Google Workspace will help with your point about older versions of Outlook. This article seems to agree with you too: 

https://blogs.gartner.com/craig-roth/2021/07/30/should-microsoft-office-365-be-afraid-of-google-workspace-gartner-2020-market-share-report-says/

I have seen a lot more layering in emails recently. Not quite sure how it's being accomplished, but it does make me want to play around and find out what all is possible

For a wannabe novice designer like myself, what do you mean by "layering in emails" @morgan?

So not fully animated effects but I've seen a lot of overlaping animations with other, static images.

Yea I've seen a lot of animated effects lately. At least alot of clothing (shoes) related emails

Interesting! I'll have to pay closer attention now that I know that's a thing lol

But I'd love to dig into more animation in email to figure out what is possible and how without it breaking on half of browsers or platforms

For me the trend that excited me most is the idea of real time marketing, but email doesn't feel like it's necessarily a real time platform. If you need to get a message out and a quick response, SMS marketing feels like the better route to go.

Do you all believe email will become a bigger or smaller part of the marketing landscape in the future?

 I think it will become bigger, its like how podcasts and other mediums that were on a downswing and are now coming back up because of how simple they are (Compared to an app or something)

That's a fair point @nick, or how the pandemic brought the QR code back into our lives in such a big way. Perhaps it should be looked at as being more cyclical in nature.



Personally, I feel like it will likely shrink some but not much. As I noted, it’s not the most immediately actionable tactic compared to SMS or push notifications from apps, which will be better for smaller items like apparel or media. However, it is great for higher-priced goods and services that users need more lead time on, like say hiring an account or financial planner or purchasing a car or furniture.

100% personalized to you based on where you go and what you do, driven by AI. More of a result of your behaviors, history, preferences, and interests. Not just generic blasts of content to the masses

It ain't going anywhere, I just think there will be less limitations and more customization

Okay, my last question is a two-parter... What is your 

 prediction about the future of email marketing AND what is your 

 predication for the future of email marketing?

I think it'll be more of the same. From a dev perspective, we are still held back by legacy clients, and it’s a lot harder to cut those out than cutting out something like IE11. More usage, but more of the same.

Bold prediction is either Google or Apple introduces some feature breaking change which forces everyone forward, some sorta new medium for email that everyone jumps on.

Realistic - hopefully fewer limitations on design/dev and a better perception of what recipients want/need from marketing emails. Less recycling content from elsewhere to re-purpose for email and more thoughtful consideration on when/how users view email content.

Bold - would be more dynamic emails that can change content even after they've been sent to reflect activities users might have completed or undertaken since it was initially sent. Something like an API that can connect to a CRM that ensures email content/promos/whatever is reflective of where that user is in the customer journey.

Hosted emails, that would be nice - the actual email is just an iframe to content that lives on a website with the option of it being cached by the email server (so if its not dynamic and can live in history)

Realistic - More customization options, fewer restrictions, more personalizations, and integrations.

Bold - Outlook and Internet Explorer become illegal to possess on all computer operating systems.

Alright, we are out of time. Thank you guys for your skills, thoughtfulness, and writing as part of this series!

View All Entries in the Email @ 50 Series:

Part I: Email @ 50: Email Marketing Still Works... Half a Century Later

Part II: Email @ 50: The Art of Email Design

Email

Marketing Strategy

Web Design

Email @ 50: Retrospective + The Future of Email

User Experience

UX / UI

Ecommerce

Websites

Foxhollow Farm 

Custom Dev

Content Strategy

Stave & Thief Society

HTML, CSS and Javascript form the "presentation layer" of modern web development in your mobile and desktop browser. These things together are considered "Front-end Development". The tools, techniques and standards are changing all of the time - but our development team is always staying abreast of the latest. For our partners, we do the research, experimentation and testing needed to make sure your audience has an accessible, fast, reliable experience.

Frontend Development

Frontend Development: Case Studies

01

Foxhollow Farm

02

Stave & Thief Society

Frontend Development: Blog Posts

Your Website's Performance Could Be Costing Time and Money

Email @ 50: Retrospective + The Future of Email