Website Speed - More Complicated Than You'd Think
What is Loading Speed?
Sounds like a silly question, but in reality, load speed is actually a pretty complicated subject. Generally, we consider website speed to be the amount of time that it takes for the website we're accessing to load. However, when exactly has the page loaded?
For example, if you access a webpage and the text on the page loads right away, but you spend thirty seconds waiting for the images to load, would you still consider the site to have loaded quickly?
Probably not, and there are other examples of just how complicated page speed can actually be. For instance, have you ever opened a website where all of the content appears to load, but there is a clear gap in time between when it appears the site has loaded and when the functionality (clicking, scrolling, menu hover effects) of the site actually loads?
Why is Load Speed Important?
This is a very tough question. For your average small business consumer, a reasonable load speed, with minimal Cumulative Layout Shift will be plenty good enough.
However, larger businesses that are running ads to gain website traffic and make online sales will likely see a direct relationship between loading speed and e-commerce revenue.
If a small business customer is getting pretty good page speeds we typically don't suggest investing too much of the development budget into cranking out an extra few performance points, as that money is better spent on marketing and content.
Let's Split Up Page Speed Into Several Metrics
Instead of considering page loading speed to just consist of "the time it takes a page to load", let's instead break down page speed into some specific measurements that we can use to understand page speed in more depth.
Time to First Byte (TTFB)
Time to First Byte refers to the time it takes for the page to begin loading. In other words, how long does it take for a users page request, to get turned into a DNS request, reach your server and begin receiving information?
First Contentful Paint (FCP)
First Contentful Paint refers to the time it takes for the user to see the first element on the page, whether that be an image or text.
Onload Time
The time it takes for the entire webpage to load (images, text and all other forms of content).
Largest Contentful Paint (LCP)
This is the measurement of how long it takes for the main content of the site to load.
Specifically, LCP takes into account images, videos and block-level elements that are visible within the viewport when the user first enters the page. This is an important point to remember, as when we talk about Lazy Loading later in this article, that point regarding LCP measuring elements within the viewport will come back up again.
First Input Delay
Measure how long it takes until a user can interact with a page, whether that be scrolling or clicking on elements.
Cumulative Layout Shift (CLS)
Measures how often users experience layout shifts. A layout shift, is when a visual element on the page (an image, text or etc) initially loads in one place and size and changes within the first few seconds that the page has loaded.
This measurement seems to be meant to address the issue of pop-up ads on ad-farm websites that rely on shifting content in order to produce accidental clicks from mobile phone users.
How to Measure These Values?
So now that we know about the various measurements that make up our page how do we measure each one of these values?
There are quite a few online tools you can use to get a decent understanding of how your page ranks for each of these values.
I recommend starting with Google Pagespeed Insights first. The best part of Pagespeed Insights is that you will receive a separate value for each measurement based on both mobile and desktop. This is incredibly important, as many small business owners and developers may find their sites' desktop performance to be very high, without being aware of low LCP or CLS on the mobile version of their websites.
While as a small business owner, you're likely more comfortable using the internet from your computer, it is important to remember that the majority of your customers will be using a mobile device.
On our e-commerce sites, we see an average of 60% of our traffic from mobile devices alone. Because of this, we want to make sure we are scoring as high as possible on mobile devices, and we want to be especially careful of values regarding CLS.
If you are having trouble optimizing your page load speeds, send us a message here and we can work with you to improve your loading speeds across the board.