Website Speed and Why It Matters

website speed and why it matters

Website speed, in SEO terminology, refers to how fast a web page loads, particularly on mobile devices.

Why is website speed an important issue? Because visitors to your site are impatient, expecting to find information to their query instantly. This point brings up two essential topics:

  1. Does any given page on your site load in under three seconds? (1.5 seconds or less is the goal)
  2. Is the information on any given page offering what visitors are expecting?

This article looks primarily at point one, website speed. Point two explores website copywriting in detail.

Site Speed – Does It Really Matter?

Google the question, and millions of results appear (About 1,970,000,000). The general agreement is the same: fast site speed matters. There’s no shortage of opinions, ideas and thoughts on the subject.

If a page loads too slow, 47% of the time (you can verify this stat anywhere on Google), the visitor you worked hard to attract gives up and leaves. The impact is two-fold. Firstly, that’s an opportunity to nurture a lead into a customer (costing you dollars). Secondly, they will (probably) never bother to revisit you (again, costing you dollars).

It costs time and money to attract visitors in the first place, so losing them to poor site speed makes no sense at all.

Case Study

For many, a website is one of those things you just have. “Everyone else has one, so I should get one too” is the common phrase. But why do you need a website in any case? And, to what end?

Let’s use as a case in point to answer these questions. Robin is an author, screenwriter & playwright. 

In all fairness, I will point out that I designed his site some time ago.

Over the years, edit after edit, and with the never-ending changes in technology, Robin’s site is overdue for a performance update. How can we know it needs a performance update?

Step One

Check the site on PageSpeed Insights. I use PageSpeed Insights for 2 reasons. One, it’s a Google product; Two, Google has 83.84% of the global market share in searches.

Having added Robin’s URL into PageSpeed Insights, you can see a score of 83 leaves room for improvement. Note: a score of 83 (or any orange score) is quite acceptable, but with site speed improvements relatively easy to implement, indeed, it’s a worthy pursuit.

Website Speed Parameters

What parameters make up a website’s speed score? Although there are (probably) many more parameters, Google’s Lighthouse Scoring Calculator uses 6 Key metrics.

1. First Contentful Paint (FCP) accounts for 15% of the score

FCP measures how long it takes the browser to render the first piece of DOM (Document Object Model) content after a user navigates to your page.

2. Speed Index (SI) accounts for 15% of the score

The Speed Index score compares your page’s speed index and the speed indices of real websites based on data from the HTTP Archive.

3. Largest Contentful Paint (LCP) accounts for 25% of the score

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport relative to when the page first started loading.

4. Time to Interactive (TTI) accounts for 15% of the score

TTI measures how long it takes a page to become fully interactive. A page is fully interactive when:

  • The page displays useful content, measured by the First Contentful Paint,
  • Event handlers register for the most visible page elements, and
  • The page responds to user interactions within 50 milliseconds.

5. Total Blocking Time (TBT) accounts for 25% of the score

TBT measures the total blocking time from responding to user input, such as mouse clicks, screen taps, or keyboard presses. The sum calculates by adding the blocking portion of all long tasks between First Contentful Paint and Time to Interactive.

Any task that executes for more than 50 ms is a long task. The amount of time after 50 ms is the blocking portion. For example, if Lighthouse detects a 70 ms long task, the blocking part would be 20 ms.

6. Cumulative Layout Shift (CLS) accounts for 5% of the score

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs when a visible element changes its position from one rendered frame to the next.

To see a detailed technical breakdown of the metrics, visit Web.Dev/Performance-Scoring.

The Result

The results speak for themselves.

While the difference between the before and after is significant, it doesn’t automatically mean Robin will gain more customers for 2 reasons:

  1. The before page speed may not have been a contributing factor since it was in the acceptable range of expectation;
  2. The page content hasn’t changed during the website speed improvement process.

Now that the technical aspects of website speed issues are complete, it’s time to dig deeper to increase Robin’s bottom line. Check out part 2: Website Copywriting.