Why Speed Matters
“A 10-second delay in page load time can increase your bounce rates by 123%” - Think With Google.
By the time you finished reading that statement, more than 3 seconds have passed. If you’re on a mobile device, you’ll spend about 2.2 seconds just to load this page. If you’re on a desktop then the page should be ready in around 1.5 seconds.
Now that you’re thinking about it, you’ve spent about 8-10 seconds in total reading this far. For a moment, imagine if instead of reading this guide you were still waiting on the website to load. You’d be pissed off, right? Well, the 46% of web visitors who hate waiting for pages to load agree with you. But we’re talking about a few seconds, why does it matter? It matters because of the 1-second impact on your business.
The 1-second impact
" 70% of consumers admit that page speed impacts their likelihood to buy.” - Unbounce
70% of consumers freely admit that site speed directly impacts the likelihood to buy. How fast is fast enough? The average mobile user expects a website to load in less than 3 seconds, meaning more than 50% of mobile users will give up after just 3 seconds—and every fraction of a second in delay impacts conversion rate.
“Your website should load as fast as possible. If you’re an eCommerce website, you should shoot for less than 2 seconds or you run the risk of losing potential customers” - John Muller, Google
One second might not look like a lot to you, but to your business, it makes a huge difference. Amazon, the retail giant, while talking about the importance of page load time to their business, said it would cost them $1.6 billion in sales each year. That’s a whole lot of money, right? There’s more.
Take a look at these 1-second stats by Hosting Tribunal:
- 1-second delay reduces page views by 11%.
- 1-second delay decreases customer satisfaction by 16%.
- 1-second delay eats away 7% of the coveted conversion rate.
- 1-3 seconds in loading time see a very low bounce rate probability – only 32%.
- Add 1 second more to that and the chance for users to bounce triples, reaching 90%.
How about we make it practical on the importance of 1-second to your business?
When you’re in business, you have to understand that speed is important in all areas of customer-product interaction and engagement. These little seconds you don’t measure affect everything from conversions, revenue, churn rates, customer retention, customer lifetime value, all down to the overall growth of the business.
Understanding website speed is a complex topic that encompasses both a technical focal point and a business perception based on its customers. In this guide, we’ll try to cover all there is to get you started on website speed, its importance, impact on your business, and how you can optimize yours to run faster.
What is Website Speed?
This refers to the speed at which each web page of a website is downloaded from its hosting server and rendered by the visitor’s browser. Along the way (from the initial server response, to the download, to the rendering process) web performance metrics exist that help define your “page load time” and have varying impacts on different aspects of your business.
Research by Google found that a 100-millisecond delay in website load time can hurt the conversion rate by 8%.
100 milliseconds. That’s 1/10th of 1 second.
That’s how little a delay is needed to crush your conversion rate by 8%!
And that’s the first lesson in defining site speed. It’s about a few or even fractions of a second … not massive delays that cause spinning wheels. It gets even worse for eCommerce websites, as 79% of shoppers who are dissatisfied with their website experience will prefer to shop somewhere else next time. The stats keep on spiraling on how poor website speed affects your business. In a nutshell, if your website takes a long to load, web visitors will leave and that means your bounce rate will be high. That’s wasted money (advertising), effort (content-based marketing), and opportunity. Worst of all, when users bail from a website that they arrived at from a search result, that tells the search engine “the user didn’t find this content useful, give us something better.” Search abandonment is difficult to measure, but easy to see its impact!
And trust search engines, they’ll obey!
If your bounce rates keep going higher, your search rankings will sink…deep! Nonetheless, it begs the question: Is my website slow?
A simple answer is that a website that is consistently useful to the user (called the Time to Interactive) in under 3 seconds is fast, and one higher than 3 seconds is painfully slow. But that’s a simple view. The reality is, you need to be as fast or faster than the competition. To stay on top of the game, your aim should be 1-3 seconds, which means you need to make speed your competitive advantage. So let’s break down how to measure web performance and what actually matters.
Speed metrics expressed as user pain
The best way to think about the alphabet soup of performance metrics is to just think like the user.
This model for thinking about web performance (called User-Centric Metrics ) takes the complex world of web performance measurements and turns them into understandable and relatable meanings.
Is it happening?
The first step in the user journey is the initial response from your webserver to their browser. Here we have 2 critical metrics:
This measures the duration from the user or client making an HTTP request to the first byte of the page being received by the client's browser. This is essentially the server’s initial response time. If this is slow (more than 250 milliseconds) … then we’re starting off from a bad spot.
This is the time from when the page starts loading to when any part of the page's content is rendered on the screen. Basically, how long does the screen take to go from blank to not blank.
This is the first user identifiable metric, as the user can now “see” that this page is working. Our goal here is to get this first metric below 2 seconds at most.
Is it useful?
Now that the user has some initial feedback that the page will work, the question is how long it takes until it’s useful.
Largest Contentful Paint (FCP):
This is the cousin of First Contentful Paint and reflects the time from when the page starts loading to when the largest text block or image element is rendered on the screen.
Often this is your hero image or text block.
This measures the time from when the page starts loading to when it's visually rendered, its initial scripts (if any) have loaded, and it's capable of reliably responding to user input quickly. Basically, can the user scroll, click and—hopefully—add items to the cart! Time to Interactive DIRECTLY impacts conversion rate, and our target here is less than 2.5 seconds, but every little bit helps here.
Shaving off even 100 milliseconds from TTI can increase conversion rates by 8%. If there were only one speed metric to run your business on, this is the one!
Can I use it?
We have the front and center of the image, the user can now start to interact with the site … but is it “janky?” Janky is a technical term that means the website is still loading, so if you attempt to actually do anything it might stutter or pause. This is a massive cause of frustration and leads to user interactions like “rage clicking.” Luckily, there are two metrics that come to the rescue.
Input delay the time from when a user first interacts with your site (i.e., when they click a link, tap a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. FID is a newer metric but is exposing the often overlooked impact of late loading JavaScript. An ideal FID score is below 100 milliseconds, which to a user means the interaction feels instant.
CLS is not a performance metric per se, but it is a valuable insight into the page layout. A layout shift occurs when a page re-lays out of the site after the initial layout. Have you ever been on a website, started reading the content then BOOM, some ad comes in and shifts down what you were reading?
Yeah, that’s a layout shift.
Now that we have a set of metrics, we can map them back to our user experience.
Core Web Vitals, metrics simplified
This now brings us to the hot new term in search – the Core Web Vitals. This new program from Google “Web Vitals,” focuses on providing unified guidance for search engine bots in providing an excellent user experience.
With this, Google put together a common set of signals that are of top priority, which are called “Core Web Vitals.”
The core website vitals encompass all web experiences in other to unify all metrics and are based on 3 factors, namely:
- Largest Contentful Paint
- First Input Delay
- Cumulative Layout Shift
Google defines all these 3 factors as of primary importance in a users’ web experience, as it takes into account loading experience, interactivity, and visual stability. You should note that these are a subset of the metrics we defined above in the more general User-Centric Metrics. That’s not unintentional, as the “Core Web Vitals” are the three key metrics Google is asking customers to focus on (and bringing into the search rank). But having a deeper understanding of all the field measurable (meaning can actually be measured from real user behavior) is critical.
Ilya Griogorik, Google Web Performance Engineer, had this to say about the Core Web Vitals:
“All of these metrics capture important user-centric outcomes, are field measurable, and have supporting lab diagnostic metric equivalents and tooling. For example, while Largest Contentful Paint is the topline loading metric, it is also highly dependent on First Contentful Paint (FCP) and Time to First Byte (TTFB), which remain critical to monitor and improve.”
How to Improve your Site Speed
If you want to make things go faster, the recipe is pretty simple:
- Move less data
- Over shorter distances
So what does that mean with a website?
Move less data
Your website is made up of a collection of assets (images, JavaScript, Fonts, etc.). Two things should jump out at you here:
- The more assets on the page, the slower it will be.
- The bigger the assets are, the slower they will be to download.
Of course, having a bare-bones website might load fast, but it also might be useless. The optimum performance of a website sits on a thin line of what you as a business owner want on your website to show the customers and what your customer is willing to wait to see.
As an example, say you run a business that requires conveying value by immersive, animation videos. This is a great time to look at video optimization and optimal delivery.
Video killed the web star
Do you need a full HD video for a mobile user? What about sound? Does your video downsample according to the user’s bandwidth and network conditions? Does the in-browser player user the native device options? Sometimes you can (and should) optimize things yourself. Sometimes things are simply too complicated and not worth the time. Video optimization is absolutely one of those times to phone a vendor. Luckily, there are multiple vendor-specific solutions here, but our top two are:
- MUX : This is a modern, high-performance Video platform meant for developers and those looking to maximize video delivery.
- Wistia: This is a tried and true large-scale video hosting platform. Easy to integrate into almost any website, and a powerful, adaptive, and most of all lightweight player.
A picture is worth a thousand words, but it takes longer to download
Image optimization is part art and part science. The science part is easy, with Lossless Encoding (meaning it is the same image just in a different format). The art part is deciding when a smaller image is ‘close enough’ in quality, which is called Lossy Encoding. Image optimization involves both encoding images into other formats and resizing them to the correct display. You don’t need to serve an image the size of a desktop background to an iPhone. The first step is simply encoding images in the correct (and optimal) format. Modern browsers support multiple image formats including two performance-driven solutions: Webp and AVIF. There are dozens of articles that dive deep into image optimization, but our favorite is this one from our friends at Kinsta.
The key takeaway is, like video, image optimization is often best done by a service. If you have access to Cloudflare, there are two powerful built-in image optimization solutions built-in for free.
- Cloudflare Mirage: Mirage detects screen size and connection speed to optimally deliver images for the current browser window.
- Cloudflare Polish: Reduces the image size by stripping metadata and applying lossless or lossy compression to remove redundant bytes from images.
If you don’t have access to Cloudflare, then we suggest you unleash the Kraken (https://kraken.io/).
Kraken is one of the few image services that is both insanely fast, but also simple to use. At the time this document was written public support for AVIF was not yet available — but we know it’s on the way!
The long and short of it with images and video, choose the right format and size and — move less data!
Over shorter distances
The trick to faster page loads is to load each asset over the shortest distance possible. The act of keeping a copy of an asset in a nearby location is called caching — a term derived from the 18th-century French word cacher, meaning ‘to hide’.
Cache helps hide latency by minimizing the distance the browser must travel to download an asset.
Your webserver (often called the origin as data originates from here) is in one location, but your customers might be in another location. How long does it take them to reach your server? What’s your Time to First Byte look like? If the numbers don’t look good, it’s time to talk about Content Delivery Networks and Client-Side Caching.
Content Delivery Networks (CDNs):
If your site runs on a platform like Shopify, the good news is you already have a CDN and you can skip this section. For most folks, even those on managed platforms like BigCommerce, adding a CDN can be a one-stop web performance solution. CDN providers keep thousands of servers in hundreds of locations around the world, just to make sure your website is near your customer.
There are a lot of players in the space (Fastly, Akamai, StackPath) … but for our money, the clear winner is again, Cloudflare. Cloudflare has a massive global network of data centers that cache static content closer to users and deliver dynamic content over the fastest and most reliable private backbone links. There are multiple solutions for optimal protocol negotiation (HTTP/3 or QUIC) and automated routing and failover.
Edgemesh is a company of web speed addicts, and we run Cloudflare.
Client-side caching
The ultimate speed-up comes when the browser doesn’t even need to travel the network at all. This is a browser cache, a tiny set of space on the device that is explicitly allocated to allow for keeping copies of frequently needed assets on the disk. No network latency = near-instant access! But how do you cache in the browser? Well, that’s a tough question.
The first option is to hope that the browser will cache your content if you give it the right hints. These hints are called Cache-Control Headers, and they can be complex but the main ones are to say this object is public (meaning the browser is free to store it) and to set Time to Live (TTL), which you can use to define how long a resource is stored in a browser cache before expiring. If you set a long Time to Live (say, 30 days) and then the browser might cache it.
The unfortunate reality is that the browser’s cache hit rate (the percentage of times it is able to pull an asset from cache) is fairly low (10% or less). When you need to go faster, it’s time for a dedicated browser cache.
Ludicrous Speed with a dedicated client-side cache
If you are ready to turn the dial to 11, it’s time to make your own browser cache that exists just for your website. The browser exposes a Cache API , which allows you to store objects in the browser just for your website.
Unfortunately, interfacing with this system also requires you to implement a mechanism to capture responses (so you can store them for later) and intercept requests (so you can fulfill them with stuff from your local cache). To do that you need to build a Service Worker.
Service Workers are akin to the way a CDN works, by proxying requests from one side (the browser) to another (the network or new cache you’ve created in the browser). Developing a Service Worker is beyond the scope of this guide but it is the key to unlocking client-side performance. If you would rather have this all done for you, you’re in luck! This is exactly what Edgemesh does.
Edgemesh is a fully automated and managed client-side Service Worker that includes the ability to not only cache objects (so we can reuse them) but also pre-cache objects (download them ahead of the user) to further hide latency.
The diagram below shows the different levels of cache in the browser and the network.
And here we can see the latency (time) taken to fetch assets from each level of cache.
Takeaway: Client-side caches are 5-10x faster than network caches. Shorter distances always win.
How much faster can a site load with a client-side cache?
About 50% faster, meaning you can cut your page load time in half! Check out some real-world examples below. Accelerated scores had access to dedicated client-side caches, and Non-Accelerated scores did not. Key metrics like First Contentful Paint are 2x faster. Cache is fast!
Edgemesh is a company of web speed addicts, and we run Cloudflare.
Where to measure your site’s speed?
Your website’s speed is dependent on how, and from where, your users access it. Mobile customers on a cellular network will have an entirely different experience than a laptop connected to broadband. So how fast would a server in a data center load your site? Answer—who cares. This is the world of synthetic page tests.
These synthetic user metrics, or "lab metrics,” provide a deep and detailed analysis of page performance in a controlled setting (a datacenter with simulated network effects). Testing your website's speed with synthetic audit platforms (GTmetrix, WebpageTest.org, and Google Lighthouse) are great ways to help guide the development of your site and identify early opportunities to employ best practices before you go live —but they do not actually measure your site’s speed.
However, the internet is a complicated place and your website will not perform the same on every network, across every device, and in every geography. You need real performance metrics from real users in the field to understand your actual page performance in the wild. By definition, if you are not looking at Real User Metrics then you are looking at Fake User Metrics.
Where to get real user metrics
The Page Speed Insights tool is a web analysis platform run by Google that lets you run a test on your website to see how it compares to industry recommended standards. It analyzes all the content on a webpage, then generates suggestions on how you can make it faster.
Head on over to https://developers.google.com/speed/pagespeed/insights/ to start a site audit. To begin, simply type in your website address (don’t forget the HTTPS://) and click analyze.
After a few seconds, you will see a screen like the one below.
See that big number that goes from 0 - 100 in the center there? Ignore this number completely. This is an Audit score — meaning this is a number representing the opportunities or best practices employed by your site. It does NOT mean your site is fast or slow.
Don’t believe us? Here’s our conversation with Google about this exact topic.
The most important, in fact, the only actual speed data here are under the ‘Field Data’ section.
And here we will see our familiar friends from our User-Centric Metrics section.
The data shown here comes from the Chrome User Experience Report (CrUX). Google’s CrUX provides real-world, Real User Metrics gathered from the millions of Google Chrome users who load billions of websites (including yours) each month.
It is this data, and ONLY this data that Google uses to determine how fast your website is and ultimately, your search and ad rankings.
Impact of Page Load Time
The essence of page load time is a measure of the patience of a web visitor. However, in a world where we’re all used to super-fast… everything, it’s getting harder for business owners to keep up the pace. Sticking to Google’s earlier recommendation of 3 seconds is the best remedy to keep your customers engaged and discourage them from bouncing. The faster or slower your page load impacts two core aspects of your business: SEO and User Experience, and Revenue.
On Your SEO and User Experience
The essence of the term “SEO” comes back to its definition — Search Engine Optimization. It’s the goal of any business with a website to aim for content that’ll be optimized for search engines. And a major player in this is page load time. This goes deeper into the effect of page load time on how search engines rank content. In July of 2018, Google announced that page speed will be a ranking factor for mobile searches.
Zhileng Wang and Doantam Phan went further to say:
“The "Speed Update," as we're calling it, will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries. It applies the same standard to all pages, regardless of the technology used to build the page. The intent of the search query is still a very strong signal, so a slow page may still rank highly if it has great, relevant content.
We encourage developers to think broadly about how performance affects a user's experience of their page and to consider a variety of user experience metrics”
How fast or slow your website depends on the reaction the search engine gets from web visitors. If it’s a good reaction, you get lower bounce rates, and higher conversions —and if it’s bad, you know what to expect.
Google calls this “page experience,” and it works with your page load time hand-in-hand. Page experience is simply how web visitors interact when they visit a website. Something like this:
Google in a recent update, on “Evaluating page experience for a better web,” announced how they’d factor the page load time of a website and merging it with the page experience.
Sowmaya Subramanian, Director of Engineering for Search Ecosystem said:
“We believe user engagement will improve as experiences on the web get better -- and that by incorporating these new signals into Search, we'll help make the web better for everyone.”
What does this mean for your website? If you want to rank on Google, you need to have your page load time run as fast as possible (3 seconds), and ensure your content is well engaging for visitors.
On Your Revenue
Running a successful business today is based on how much revenue you’re able to bring in and at what cost it was to the business itself. With a website for your business, you run the risk of losing conversions due to poor page load time.
“Page speed is like a bullet. A fast site can be the silver bullet for problems like conversion rate, abandonment rate, and ARPU. A slow site can be the bullet that kills the business”
Ecommerce websites are mostly the ones hit with the problems of page load time —especially if it’s bad.
Krista Seiden, Analytics Advocate for Google, while talking on how digital marketers are neglecting the impact of page speed:
“Page speed is one of the most overlooked and yet most important factors in customer attention, retention, and ultimately, converting browsers to buyers. Ensuring that you’re taking measures to increase page speed or reduce lag can be the difference between failure and success.”
Why is this?
For starters, the varying experiences on mobile and desktop is a major influence on a shopper. Some eCommerce owners have their websites load faster on certain devices compared to others.
Some are faster on mobile, slower on desktop —and others are vice versa.
Both of these beg the question:
Which should you optimize for faster page load time, mobile or desktop?
In a 2021 survey on what devices shoppers mostly use, it was discovered that 79% of smartphone users have made a purchase online using their mobile devices in the last 6 months. The stats go further to show that 88% of consumers who search for a type of local business on a mobile device will call or go to that business within 24 hours. Taking the current market share into account, mobile usage takes over with over 10%.
Quite convincing to optimize your page load time on mobile since most of your revenue will be coming from there, right? Hmmm, I don’t think so.
Although mobile contributes to close to 56% of the web traffic, it lags behind in user engagement and satisfaction. The average bounce rate on mobile is 45%, while on desktop it’s 38%. This means users are less likely to leave your website on desktop compared to mobile. And the little extra time spent on your website via a desktop can significantly contribute to your revenue. However, results on mobiles and desktops sales/purchases are based on the involved industry and its customer base.
A survey done by SalesCycle proved this point with their analysis of different industries ’ performance across different devices.
So, back to the main question, which should you optimize for faster page load time? Simple answer: Optimize both. With these stats on both mobile and desktop, a delay or speed up in page load time can either make or break your present revenue. Big companies like AOL, Mozilla, Yahoo, Shopzilla, and Amazon understand what a 1% loss in revenue means to them and how a 1-second improvement can mean a lot.
- A speed-up in of Shopzilla’s average page load time from 6 seconds to 1.2 seconds increased their revenue by 12% and gave an additional 25% page view.
- Every 100 milliseconds improvement on Amazon’s page load time resulted in a 1% revenue increase.
- Yahoo traffic increased by 9% for every 400ms improvement.
- Mozilla recorded a whooping 60 million more Firefox browser downloads per year when they made their page load 2.2 seconds faster.
Other companies like Walmart were not left out in the importance of faster page load time. For every 1-second improvement in page load time, Walmart recorded a 2% increase in conversions.
It’s amazing, right? Yeah, it is!
Here at Edgemesh, we’ve gotten similar results when we help our clients optimize their websites for better performance.
“Page speed is like a bullet. A fast site can be the silver bullet for problems like conversion rate, abandonment rate, and ARPU. A slow site can be the bullet that kills the business”
