Why website speed matters
Everybody has experienced it. You open a search result or click a link – and instead of answers you get frustration.
The loading animation of your browser is spinning, but the screen is filling very slowly. Or doesn’t open at all. Website speed can make or break user experience, so it is important to get it right.
The topic in itself is quite extensive, and each section deserves its own blog post. This blog is written to give you an overview on the effects of a slow website, how to measure it and how to make it faster.
The first 3 seconds are the most important
Around 25% of users leave if the website does not load within 3 seconds. 2 seconds more and the bounce rate (bounce rate refers to visitors who only view one page before leaving) more than triples to around 90%.
The results on customer satisfaction and likeliness to return are similar, but I do not want to bore you with a wall of statistics here.
So let’s look at the most important one:
Each one-second delay drops the conversion rate by around 7%. Slightly more if you run an online store.
In the real world that means, if your store does $10k a day in sales, a one-second delay in page load costs you around $250.000 in annual revenue. That’s a lot of money.
Knowing that it’s probably worth it to optimize.
But wait, there’s more.
Effects on SEO
Not only does a slow-loading website reduce your conversion and the likeliness of visitors to come back – but it also reduces organic traffic.
There are two aspects to this:
One of the most important ranking factors for Google is, whether your website satisfies search intent. This is measured by how many people go back to the search results after visiting.
A website that doesn’t load in an acceptable time will lead to visitors going back to the search results, and your ranking will suffer.
Websites are ranked by a so-called crawler – a piece of software that “crawls” your website and assigns you the correct ranking according to keywords etc..
Google’s exact ranking metrics are a well-kept secret. It is no surprise that I did not find exact information on this, but:
Either the crawler measures your site speed, or it runs out of time and moves on to another website. Before capturing all of it. The result is not desirable either way.
How website speed is measured
The most effective, and most used, way to measure page speed is probably Google Chrome’s built-in Lighthouse. A couple of seconds and you have multiple important metrics and suggestions on how you might improve them.
Quick overview of some important metrics, without getting too technical:
First Contentful Paint:
Time until the first element becomes visible. This is important because perceived loading time is just as important as absolute loading time.
Time to Interactive:
Time until all interactive elements like menus and buttons become functional.
Largest Contentful Paint:
The size of the largest entity loaded within the viewport. Most of the time this is a video or image. If this element takes too long to load it will have a negative impact on perceived loading speed.
Even worse: In case the element is required to load before others can be loaded, that can have drastic effects on overall loading times.
Total Blocking Time:
This refers to elements that need to be preloaded before other elements can start. Most of the time scripts in the <head> section of your website are the perpetrator. Total Blocking Time must be reduced at all costs as it will have a disastrous effect on all other metrics.
Other website speed test providers
Apart from Google’s Lighthouse, there are several other options to measure page speed. One of the most popular ones is GTMetrix.
Testing on multiple providers is a good idea, since they all run on different servers around the world, use different analysis engines, and can provide different solutions to a given problem they detect.
Test out which one you like the most. When in doubt consult with your web developer of choice.
Website speed: How to get it
Now that we established how page speed is benchmarked and why it’s important, let’s see what makes a website fast. Or slow.
Hosting and server
The root of all loading. Specifications of the hardware and connection all have an impact on your website’s loading speed. If your server doesn’t work fast, nothing will.
If your website gets visited from all across the world, you might consider using a Content Delivery Network – this will increase loading times if visitors are far away. Services like Webflow and Netlify have a CDN built in, which can be a big advantage.
Changing the way your website is being cached can improve performance from the second visit since less data will be requested from your server.
Plugins
If you use a Content Management System like WordPress, you might want to boost its functionality with Plug-ins.
But having too many of these will bloat your website and slow it down. At this point, it is probably counterproductive.
Excess code/scripts
Whether they are implemented into a CMS or a hand-coded website does not matter. Too many scripts to preload and messy code can have drastic effects on your website’s loading time.
This applies to fluff like Javascript effects, just as much as to the necessities like cookie consent scripts.
If HTML, CSS, or JavaScript elements cause your website to load slowly, you should look into minifying your code. Among other things, this will remove unused code and in remove make your website load faster. Make sure to test thoroughly, as minifying your code can cause errors.
Images and videos
Images are the worst offenders in slowing down websites. All images you put on your website must be optimized. Use an image optimization service or a plug-in for photographic images.
Upload vector graphics in the SVG format. This will not just save precious KBs, but also make sure they’re always sharp.
But the best practice for a fast website remains: Use images sparingly.
Splash Screens
If your website is more of an app, or heavy for other reasons – use a splash screen. Perceived loading times are equally as important as objective ones.
Have any questions? Reach out here
