side-area-logo

February 10, 2021 – 8 minute read

Why Site Speed Matters and How PWA Can Help

PWA, Thought Leadership

Nobody likes to be kept waiting. Whether it’s in a store or a restaurant, excessive delays tell customers that the establishment doesn’t value their business. In the online universe, delays take on additional connotations. Is this site legitimate? Will my order actually go through, or will it be lost in a page time out? Will I be charged twice if I hit refresh?

In the world of eCommerce, slow site speeds can amount to the kiss of death, which is why site performance should be top of mind for every eCommerce site.

Progressive web app (PWA) is an important tool for enhancing site performance, and can go a long way in boosting consumer confidence.

What do we mean when we talk about site performance?

Throughout most of eCommerce history, site performance was synonymous with page load time, but that’s a bit shortsighted. To understand why, let’s make the analogy of visiting a restaurant for a nice meal out, an experience to which we can all relate.

Each step in the dining experience — the maître’d showing you to the table, the waiter welcoming you, taking your drink order, telling you about the specials, taking your order, bringing you your drinks, then your entrees, asking if everything is okay — contributes to your perception of how well you’ve been treated and the value you’ve derived.

If one step takes too long, say your drink order doesn’t arrive until after you’ve finished your entree, you won’t be happy with the experience and are not likely to return to that restaurant. In other words, you don’t rate the experience based on its individual components; a single mishap can mar the entire establishment for you.

In an eCommerce experience, visitors come to your site intending to find information, discover and compare products, understand your purchasing requirements (shipping and handling costs and delivery time), select items, and proceed through your checkout process. A smooth transition between these steps is just as important to the overall experience as, in the restaurant example, having your entree brought to your table while it’s still hot.

So while page load time is important, a positive site experience should expedite all of the transitions that are part and parcel to completing the task that brought a user to your site. An initial page load may take two seconds and I may be okay with that, but if I’m going back and forth between two or three products as part of my decision-making process, those two seconds become intolerable. Browsing speed has a huge impact on my experience.

A Modern Approach to Site Metrics

In April 2020, Google offered a new set of metrics to evaluate site performance called Core Web Vitals, and these speak to more than just a generic page load metric.

Metric
What it Measures
Goal
Largest Content Paint (LCP)

Measures perceived load speed, meaning “it marks the point in the page load timeline when the page’s main content has likely loaded.”

This is important because it tells the user: hey, this page isn’t a dud, I’ll be able to gain information or order from it.

2.5 seconds

First Input Delay (FID)

Measures how long the user must wait before its interactivity begins to work.

In other words: How long must I wait before I can click on its elements?

100 milliseconds

Cumulative Layout Shift (CLS)

Although not related to speed, CLS is important to an overall user experience in that it measures visual stability (i.e. the degree to which the layout out of a page remains stable).

<.10

Metric:

Largest Content Paint (LCP)

What it Measures:

Measures perceived load speed, meaning “it marks the point in the page load timeline when the page’s main content has likely loaded.”

This is important because it tells the user: hey, this page isn’t a dud, I’ll be able to gain information or order from it.

Goal:

2.5 seconds

Metric:

First Input Delay (FID)

What it Measures:

Measures how long the user must wait before its interactivity begins to work.

In other words: How long must I wait before I can click on its elements?

Goal:

100 milliseconds

Metric:

Cumulative Layout Shift (CLS)

What it Measures:

Although not related to speed, CLS is important to an overall user experience in that it measures visual stability (i.e. the degree to which the layout out of a page remains stable).

Goal:

<.10

Impact of Poor Site Performance on Store Performance

Poor site performance is a good way to scare off customers. According to Google, half of all mobile users will abandon a site if it takes 3 second to load a page.

An older, but still widely quoted study by Aberdeen, reports that a one-second delay in page load will drop a site’s conversion rate by 7%.

And according to an Unbounce Report, 70% of consumers say that speed has a direct impact on their purchasing decision and lessens chances they will return in the future.

You work hard, and dig deep into your pockets to attract visitors to your site; why waste all that money if you’re just going to scare them off with poor site performance?

How Progressive Web Apps Can Improve Your Site Speed

In a previous post, we introduced site owners to the concept of progressive web apps, which is a method of web development that, using standard web development tools, creates elegant app-like experiences for desktop and mobile web shoppers.

PWA is especially good at speeding up browsing transitions, i.e. going from page to page, for a variety of reasons. To begin, PWA turbo-charges caching, storing a huge amount of page content, resources, and images locally for ultra-fast retrieval. PWA also leverages Service Workers, which are JavaScript files that work separately from the main browser thread, and perform a variety of functions that enhance the overall experience of the user.

Let’s say a user is comparing multiple winter coats on an apparel site and clicks between three separate product pages as part of her decision-making process. The service workers will intercept the browser’s network request for those individual product pages and will retrieve the appropriate cached page elements and images instead. To the user the experience will be absolutely seamless, as if she’s flipping between dog-eared pages of catalog.

Herein lies the benefit of PWA: It centralizes the universe of data she needs to make a decision locally in her browser, thereby offering the convenience and speed of a dedicated app. What’s more, if she decides to put off her decision to another day, she’ll enjoy the same ultra-fast speeds when she returns to the site the following week.

And this, in turn, is the kind of experience that cements loyalty because it says to the user that you respect her time and want to make it as easy as possible for her to make a decision that’s right for her.

Get in Touch

Have questions about PWA or want to get started in speeding up your site performance?

Recommend
  • Facebook
  • Twitter
  • LinkedIN
  • Pinterest
Share
Tagged in