Understand these performance terms and concepts to improve your website speed
28 Sep 2023, by Slade Baylis
When it comes to selling products and services online, having a quick website can be the difference between landing a sale and having someone abandon your site in frustration – as surprisingly, even a difference of a second or less can make a huge difference. As reported by Cloudflare1, sites that load in 2.4 seconds had on average a 1.9% conversion rate, whereas at 3.3 seconds and 4.2 seconds the conversion rates dropped to 1.5% and less than 1% respectively – that’s a 50% drop in sales from an increase of less than two seconds!
In a similar vein to our previous article from last month - in which we sought to introduce our readers to a large range of cyber-security concepts and terms to help improve their "security" posture – this month we thought we’d do the same but instead focus on "performance".
We’ll be covering a large range of different performance-related terms and concepts, with the aim being to help our clients understand how website performance is measured, as well as all the different things that can be done to improve it.
How to measure performance - The differences between overall “load time” and actual website speed
Measuring a website’s performance objectively is one of the first things you’ll need to do if you are looking to improve your website's speed. It seems like it should be straight forward - just measure the amount of time it takes for a website to load in seconds - and you’re done! However, it's usually more complicated than just doing this....
For instance, a ten second website can actually feel faster for users than a four second website if it's able to be interacted with sooner and all visual elements appear to have loaded faster - even if more content is loaded in the background after that!
Any performance measuring tool will use common performance-related terms to cover these differences, which is why it’s important to know what each of them refer to.
Performance Tests
The importance of measuring your website’s performance - especially over time as changes are made to a website – cannot be overstated. Having historical records of your website’s performance over time allows you to know if recent changes have negatively impacted your load times, allowing you to catch issues early.
Not only that, but these tests allow you to have an objective and sharable measure that you can provide to developers and hosting providers, allowing you to demonstrate in no uncertain terms the performance impact of any issues you run into.
With that being the case, here are some of the different tools that are available for measuring website speed - all of these are free and will give you a great breakdown of your website’s performance!
Time to First Byte (TTFB)
The key to understanding this term is in its name, as it’s the time it takes for the web server to start sending data (the first byte) to a visitor’s device.
When you access a website – especially a more complex website – there are usually calculations and computations that need to occur on the server in order for that website to be sent to you. This can include looking up products from a database, getting the content for a page, and much more. Each of these operations take some time, which delays the sending of data to your device and when that webpage will actually display.
The time that it takes before the server starts sending you the data you need for displaying the website - is referred to as the “Time to First Byte” or “TTFB” and lowering this is often one of the main goals when looking to speed up a website.
First Contentful Paint (FCP)
When it comes to a website feeling fast though, visitors aren’t too concerned with when the first byte is sent to their computer, but rather when the website appeared to start to load.
The main question for how fast a website feels is “How long did it take for any visible element to start to appear?”. This “feeling” of website speed is often more important than the overall website load time being shorter, because as long as a website feels fast for users, they even won’t notice anything else being loaded in the background beyond that!
In this regard, the “First Contentful Paint” or "FCP" refers to the amount of time it takes for a website to start displaying any element on the page, including text, images, etc.
Largest Contentful Paint (LCP)
Similar to the first contentful paint, the “Largest Contentful Paint” or "LCP" – as you can probably infer – refers to the amount of time it took for the largest visible element on the page to finish loading.
For example, this could be a large header image or video that takes up more than 50% of the page when it loads, or just the largest of many images on the page. However, this metric is used in much a similar way to the last one, in that it helps to measure objectively how fast a website feels, rather than how fast it actually is.
Total Blocking Time (TBT)
One other important aspect of websites is user interaction. With this in mind, reducing the total time that it takes for a website to become interactive or interactable is crucial for improving a website’s perceived performance.
The loading of certain elements, or the order in which they are loaded, can affect whether the content that a visitor sees is able to be interacted with. This can include long running JavaScript tasks; critical resources like CSS or fonts not having yet loaded; or functionality relying on third-party code that has yet to be downloaded by a visitor’s browser.
Page Weight
One element of website performance that is relatively easy to understand, is that a larger website will take longer to download and display than what a smaller website would. With this being the case, considering how large your website is, should be one thing to look for when looking to improve performance.
The “page weight” is simply how large are webpage is in terms of the total Megabytes (MB) downloaded by users. Things such as large images, lots of images, uncompressed CSS and JavaScript content, videos, etc, can bloat this out and cause your website to load much slower than it otherwise would.
“Above the Fold” vs “Below the Fold”
When it comes to website performance, the elements that are immediately visible are much more important than anything else.
Any part of a website that will be visible to a user when they first access a website, specifically without scrolling down to see more of the website, is considered to be “above the fold”. Intuitively, everything that won’t be visible without requiring the visitor to scroll, is considered to be “below the fold”.
Waterfall
With basically all performance measuring tools, one of the methods used to help visualise the loading of a website over time is through what’s known as a “waterfall” graph. These graphs aim to provide a view of how each part of a website was loaded over the course of time – this includes which order they loaded in, how large (in MB) each element was, how long each element took to download, and more.
These graphs can help you easily identify areas for improvement, or identify issues that need fixing, such as if elements are loading/downloading slower than they actually should.
Latency
One often overlooked element of website performance is network latency. We’ve covered this in more detail in our Slow Website? Your network could be the culprit article, but in short, the location of your hosting provider's servers and the quality of their network can have a significant impact on speed.
“Latency” refers to the amount of time it takes for a request to be received by a server from a device, for that server to respond, and for that response to get back to the original device. Hence, having your website hosted in the US can be enough to slow down your website by 2 seconds or more for Australian audiences!
How to improve performance – The different ways to improve your website’s speed
So now that we’ve covered the different ways that performance can be measured, as well as the heightened importance of having websites “feel” fast - we should now cover how to achieve that.
Hosting environments and raw “horsepower”
Some things are always true, and with regards to website speed it’s always true that the performance of your website is directly tied to the performance of the hardware it’s running on.
Not all environments are equivalent and a website that’s running on an older server with slower CPU architecture is going to be slower than the same website running on the latest generation of servers. Due to this, it is important to consider what hardware is actually being used “under the hood” with your hosting provider.
Caching
One way of mitigating the influences of slower hardware, or just improving performance even further on good hardware, is to look at utilising “caching”. There are different forms of caching, such as client-side vs server-side caching, both of which we’ve gone into detail on in our Seven ways to get more performance from your website article.
The purpose of “server-side caching” is to store and re-serve information that is relatively intensive to generate with each request. Put simply, when a webpage is visited by a user, the content that they are shown needs to be dynamically put together by the server before being “served” or sent to them – caching content involves saving that served content and “re-serving” that to the next person that needs it, rather than generating it for a second needless time.
The purpose of “client-side caching” is to instruct a visitor's own device to store key files and content locally on their device, thus prevent it needing to fetch it from the web server multiple times.
Lazy Loading
With an understanding of things being above and below the fold, "lazy loading" then becomes easier to understand. Lazy loading is simply a way of instructing a web server to only send the content that a user will see "above the fold", delaying the sending of things that will be "below the fold" until a visitor scrolls down to look at them.
Compressing Files & Image Optimisation
With page weight reduction being one element that website owners can implement to help speed-up their website, one way of reducing this page weight is to look at compressing the files that are sent.
This is possible for basically all the files that are sent to visitors, including with CSS, JavaScript, and even images. For more information we recommend checking out our Seven ways to get more performance from your website article for a detailed explanation of how compression works and helps to reduce your overall page size.
Combining Files
One other thing that can decrease the performance of a website is having it require too many files. Only so many files can usually be downloaded at a time, so the more you have, the more delays are introduced.
In light of this, looking to combine files where possible can reduce the total number of files required and speed up your website. This is usually only applicable to CSS and JavaScript files, with extra care needed to be taken with JavaScript - as the order in which things load can affect how they function.
Have any questions about the performance terms we’ve covered?
We’ve covered a lot of terminology in this article, but if you have any questions about anything we’ve mentioned, reach out to us! You can call us on 1300 769 972 (Option #1) or email us at sales@micron21.com
We can help remove any mystery or complexity from these different concept and terms, as well as provide guidance on how to improve the performance of your website!
Sources
1, Cloudflare, “How website performance affects conversion rates”, <https://www.cloudflare.com/en-gb/learning/performance/more/website-performance-conversion-rates/>