April 29, 2023
What Affects My Website’s Page Speed?
Float like a Butterfly, Rank like a Bee
We live in an “instant society”: instant results, instant entertainment, instant mac and cheese…the list goes on. Anything that doesn’t reach the bar of feeling instantaneous feels like a failure, yet so many website experiences take longer to load than Jimmy John’s making my sandwich. This puts your brand at risk to the only threat bigger than a visitor not liking your brand — your brand never being seen at all.
With a plethora of options sitting at your audience’s fingertips and all fighting for their attention, they’re more likely to move on to a different result than they are to wait for a slow one to load. This puts website page speed at the top of the list of importance, especially if you want to rank on high on search engines.
So what makes a website fast? Despite common beliefs, it’s not entirely dependent on the device it’s being loaded. You shouldn’t need to be Silicon Valley’s newest wunderkind to load a website quickly. According to Pew Research, 97% of Americans own a mobile device, and 75% of Americans own a desktop computer or laptop. Your website needs to load equally well on a phone with 15-year-old architecture as it does on the latest and greatest.
The question now becomes, “What factors can we control about our website that will make it equally friendly to all devices?” Luckily, our search engine overlord, Google, has an amalgamation of metrics that add up to give you a total score out of 100 to give you a general indication of how you’re doing.
These items include:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
- Speed Index (SI)
Before we move on, you might be asking yourself why Google gets to make the rules. The answer is simple: market share. When you’re the most ubiquitously used search engine on the globe, the way you measure success is law. Let’s briefly break down what these are and what factors contribute to them being scored highly.
The following definitions are defined by Google.
First Contentful Paint (FCP)
What is it: FCP measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.
Contributing factors: code efficiency, server speed, image sizes
Why it is important: This is the first sign of life for your website. A good score of 1.8 seconds or faster assures the user the website is working and not broken. This will reduce your bounce rate and encourage users to stay on your website.
Largest Contentful Paint (LCP)
What is it: LCP marks the point in the page loading timeline when the page’s main content has likely loaded.
Contributing factors: code efficiency, server speed, image sizes (similar factors affect this metric as FCP but are evaluated across the page as a whole rather than just the above-the-fold area)
Why it is important: Nothing breaks the immersion factor of a website like watching content load in slowly as things pop up left and right. Speed implies quality and quality compels trust. A time of 2.5 seconds will net you a good score which only leaves you 0.7 seconds between the first paint and the final paint.
Total Blocking Time (TBT)
What is it: TBT measures the total amount of time between First Contentful Paint and Time to Interactive (TTI). TTI is a submetric that measures when a page’s interactive elements can be clicked by the user.
Contributing factors: JavaScript, third-party code
Why it is important: We all know the feeling of clicking an interactive element on a website and waiting as nothing seems to be happening. At best, a feeling of annoyance mounts as we wait for the element to do its job. At worst, we leave the website in search of a more responsive experience. A good TBT comes in at 200 milliseconds which ironically is around the average human’s reaction speed. We see it; we click it.
Cumulative Layout Shift (CLS)
What is it: CLS quantifies how often users experience unexpected layout shifts (things on the screen moving around in unintended ways).
Contributing factors: image dimensions, embed dimensions, web fonts
Why it is important: Do you like playing a quick game of tag with the buttons on websites you visit? I don’t either. Layout shift causes users to inaccurately interact with elements on your website because other interactive elements load in an illogical order. For example, a user may accidentally click “Sign Out” when they mean to click “Place Order.” Imagine losing a sale or lead because your website outsmarted your user. The layout of your website should be set within a tenth of a second which is three times faster than a human can blink.
Speed Index (SI)
What is it: Speed Index measures how quickly content is visually displayed during page load in comparison to other websites.
Contributing factors: a combination of all the factors listed above
Why it is important: Think of this as your “Hall of Fame” score. How are you doing in comparison with your competition? If you’re winning here, you’re probably winning in a lot of the measurements above as well. A good score is faster than 3.5 seconds to go from a search engine result to a fully loaded website.
Honor Your Users’ Need for Speed
The real challenge with page speed is that it’s driven by the nuts and bolts behind the website’s facade. The cumulative nature of all the factors listed above takes well-written code, efficient use of media, and a good server setup into account and turn your website into either a tortoise or a hare.
Most website owners are not web developers and may not even have a web developer on their team. This makes creating and maintaining a high website speed a challenge because two different teams could build identical-looking websites with very different speeds.
My encouragement to you would be to test your website with this free tool from Google and see how you do. From there, find a partner to identify the “easy wins” that can improve your score. Then when you’re thinking about the next version of your website, partner with a team (like us) who develops websites with these metrics in mind and have a proven history of success with things they’ve built for their other clients.
Achieving your highest score possible will help you rank higher, build trust with your audience, and drive more interactions with your only employee who doesn’t clock out: your website.