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

It’s a question that most of our clients have, when they have a budget for digital advertising:

Where should we spend our digital ad budget? Where is our audience?

That’s a simple question that demands a detailed answer. But, here are the basics:

Figure out where they are in “the funnel”

Choosing Where to Market: Be Where Your Audiences Are

First, you need to define your audience. That’s a really big, detailed question – so for the sake of answering our #1 question (when to use Google vs Facebook) – we’ll focus on “the average consumer” in the United States.

There is no truly average consumer, but when viewed in bulk, we know the majority of the audiences that an agency like ours, who deals in equal parts consumer and business-to-business brands, are 

Another defining characteristic of “the average consumer” is that they use both Google and Facebook or Instagram on the regular – nearly all Americans use one or the other daily – and here are the numbers that back that up:

According to Hootsuite, 68% of Americans use Facebook daily, 35% use Instagram daily

68% of Americans do a search in a month, and the average searcher searches Google 3-4 times a day (at least as of 2016) 

is why we are focused on Google vs Facebook today. There are plenty of other platforms – such as Twitter, Pinterest, Snapchat and YouTube that all offer ad platforms but they also tend to break differently among demographic lines – age, gender, etc. However – that is a far more expansive and detailed conversation (and frankly, why “strategy” exists!).

Last year, we held a day-long workshop for the 

 – talking with an amazing group of leaders and marketers for non-profit groups. Their questions surrounding digital advertising spurred the article you are reading, and I put together a quick illustration to help guide the conversation.

If you are reading this, you probably have some sort of familiarity with the “marketing funnel” – but if not, it’s a fairly straightforward idea. The funnel is a visual representation of a consumer’s journey with your organization. We’re attempting to get consumers down our funnel, and at the bottom is whatever makes them a customer of ours – probably a product sale but could also be a membership, donation or a sales lead.

Each level of the funnel directly corresponds to a different user situation. At the 

 stage, customers are just finding out about your product or service. We draw them in with content and info. Being where the consumer is searching is key during the AWARENESS phase. 

 is next – consumers are looking at numerous options, comparing and contrasting, as well as considering if what you are offering has the right value to them. All of a sudden, the conversions has become far more individualized and personal during CONSIDERATION. After considering your offerings, the next (and hardest) step is 

. Intensely personal, this step is where the deal is sealed. The consumer’s trust that they are making the right decision must be high.

The funnel is a map – and you have to think about how many of your audience are in what step of the funnel. If you are a new brand, product or service – most of your audience will be in the Awareness step. If you are an established brand, most of them will be in the consideration step – but you can’t ignore that pipeline of new consumers in awareness.

Our observation is also that at the top of the funnel, there is a HUGE audience, but your impact is going to be small – value-wise. Nearer the conversion point, the audience gets smaller, but each “touch” you have with the consumer has more and more value. That balance between size of audience and value of impact are critical concepts when it comes to assigning budget.

The Strengths and Weakness of Google vs Facebook

Google is for finding things out and Facebook is for … well we aren’t sure but you look at it a million times a day and it knows a LOT about you.

I’m going to generalize here to give an example of the thought process: let’s assume that you are an established product or service, but just haven’t spent a lot of time or effort marketing. People know you and have visited your website (you do have a website, right?).

Google Search works by you “bidding” on keywords that directly or indirectly match the search terms of the consumer. Facebook works by serving ads targeted (demographically, geographically, by “affinity” or by their engagement with your page or website) to the consumer – who has given up some of that info in exchange for access to Facebook.

Both are valid approaches – but both fit into different levels of the funnel.

Google Search tends to favor the “awareness” level of the funnel

 – broad awareness as we can easily bid on keywords that are similar to our product (e.g. “running shoes”), and when the consumer types in “best shoes for running”, our ad is likely to appear. In this way, we have access to a 

 of potential consumers who have shown an intent towards our product.

Facebook tends to favor those further down the funnel – in “consideration”, but only because they aren’t there to search.

 Remarketing (targeting consumers that have previously visited your website) is one of the most powerful tools Facebook offers. Since we know they’ve shown an intent toward our product, we can offer them more information to help them seal the deal (in the form of an ad or a post). That’s not to say that people don’t use Facebook intentionally to research – they do – but not quite as intentionally as Google Search. Few people type in “running shoes” into Facebook and click on what pops up. However, they might see an ad for “New Balance” elsewhere, and then search for “New Balance” and land on their Facebook page.

Intentional vs Unintentional and Frequency of Use

Now, let’s shift perspective to that of the consumer. When consumers use Google Search, they are most often 

. When consumers use Facebook or Instagram, they are most often not – they are looking for updates from friends – and you could generally argue that scrolling through a feed is 

. Generally speaking most people will spend FAR more time in Facebook or Instagram than in Google Search – but as we just mentioned, the time spent on Google Search is far more focused and intentional. However, users may skip a day or more between intentional searches. People will go back to Facebook multiple times a day.

Now that we understand that a bit better – we can understand when we should use Google Search Ads and when we should use Facebook and Instagram.

We tend to use Google Search for acquiring new potential customers by keying off of intentional searches related to our product.

We tend to use Facebook because the frequency of use is HIGH and the ability to directly target consumers that have engaged with us previously is so easy.

How much should you spend, then? Well, generally any amount, no matter how small – is going to get you invaluable data. We tend to start small and then recommend bigger budgets as we see results and can make decisions about targeting, and see tangible results.

Google Search Ad costs vary on the search traffic (it’s a bidding market, remember!) of the keywords you desire. Facebook is strictly cost-per-click, assuming your targeting is not so narrow you have no audience to show your ads to.

Generally most of our marketing plans for similar situations end up like this:

There’s a lot of variables in that math, so the above is a ballpark. However, Google tends to cost a little more BUT is also a major driver of building audience awareness. I can’t say one is more important than the other – but to begin building a thriving marketing audience, Google Search is critical.

The Next Level: Remarketing and Audience Building

Both Google and Facebook allow you to “tag” your website and build audiences of recent visitors – and this is hands-down the most effective way to spend your ad dollars. Facebook also allows for the uploading of prior customers / subscribers and the creation of demographically similar “Lookalike” audiences.

Once those remarketing audiences are in place, you can start to shift more of your budget to discretely targeted audiences inside of Facebook or Instagram, and ratchet down your Google Search Ads spend.

As I mentioned at the top of the article, we’ve made some pretty broad assumptions based upon data and generalities – and that can help you 

 a digital marketing plan. But as you get closer to the conversion point for a consumer, your job becomes harder and harder – and you must be more nuanced and understanding of them for them to feel comfortable with you. And that … is where detailed digital marketing strategy pays off.

So, for now – spend a little $$ to get started with both Google Ads and Facebook, and learn, iterate and analyze. And if you don’t have the time, patience or interest in doing so – we’ll be glad to help! 

41 Facebook Stats That Matter to Marketers in 2019 – Hootsuite

The State of Searcher Behavior Revealed Through 23 Remarkable Statistics – Moz

Digital Marketing Optimization

Marketing Campaigns

Research

When to use Google Search Ads (Adwords) vs Facebook and Instagram Ads?

Branding

Photography

Web Design

Websites

Art Direction

Accessibility

Treyton Oak Towers

Social Media & Audience Development

Ecommerce

Opal Nugget Ice Machine

Search Engine Optimization isn’t just a buzzword - it’s a mindset. We think strategically about how we write and develop our websites to provide useful, informative user-facing content that provides maximum search engine value. Using the latest analysis, tracking and reporting tools, we keep your website and its content ahead of the curve and atop the search rankings.

SEO

SEO: Case Studies

01

Treyton Oak Towers

02

Opal Nugget Ice Machine

SEO: Blog Posts

Your Website's Performance Could Be Costing Time and Money

When to use Google Search Ads (Adwords) vs Facebook and Instagram Ads?