How To Improve Website Loading Speed
In today’s age of instant gratification, over 50% of online shoppers click away if a website doesn’t load within three seconds. That’s half your customer base gone in a flash.
Worse than that, if your web page takes up to ten seconds to load, you’re 123% more likely to lose visitors.
Slow-loading websites are also falling further down Google’s search rankings.
It doesn’t matter how pretty or fancy your site is – if it doesn’t load quickly, no one will stick around.
Thankfully, speeding up your website isn’t as tricky as it seems, and we’re here to help.
In this guide, you’ll learn:
- What website loading speed means
- Why speed is so important
- How to measure and track your website’s loading time
- Nine proven tricks you can start using right away
Let’s take off.
An Introduction to Website Loading Speed
Here, we’ll explore the definition of page loading speed, why it matters, and how you can track it.
What do we mean by page loading speed?
Your page loading speed is the time it takes (in seconds) for your website to load fully. That’s from the moment that someone visits to the moment when all the content on the page finishes loading.
Your page loading speed is affected by:
- Video content
- Your website’s HTML
- Your choice of server
The importance of website loading speed
The speed at which your website loads that crucial first page is like that all-important first impression. Make a poor impression, and it sets a poor tone.
Changes in internet user behavior (and Google algorithms) mean a website’s loading speed is just as important as its content.
A website that loads efficiently helps to boost your conversion rate and satisfies searchers’ needs for instant gratification. It’s also the number one element of your user experience checklist.
Let’s break this down further.
1. It’s a conversion factor
Website loading speed is crucial for your technical SEO (search engine optimization) because Google prefers pages that deliver quick, relevant answers.
As it turns out, Google’s been ranking loading speeds for mobile sites since at least 2018, and for desktop pages, it’s been a ranking factor even longer.
Not only that, but Google could penalize you if your loading speeds fall below expectations. You may not show up in a Google search if your site is too slow.
2. People expect instant results
Near-instant, in any case. The chances of a clicker or visitor bouncing from your website increase by 90% if they’re kept waiting for just five seconds. This decreases to just 32% if it’s only a three-second delay.
If your visitors click away that fast, you’re already losing sales, donors, and/or leads.
3. It’s a crucial part of UX (user experience)
The importance of your site load speed for first contact can’t be understated. Page loading speed matters more to visitors than any other feature of your website.
It’s the first impression they’ll get of your website before they can see whether or not your content speaks to their needs.
How to check your current website loading speed
Before learning how to optimize site speed, you first need to check your current stats. You can use any of the following tools to get a website speed test on Chrome:
- PageSpeed Insights
- Performance Budget Calculator
Let’s use GTmetrix to show you how to get started.
1. Head to GTmetrix.com and enter your website in the central test. We’re using our own as an example. As you can see, you can also change the loading options to test for mobile and desktop:
2. Click ‘test your site’ and wait for the tool to load. It shouldn’t take longer than a minute:
3. And here are your results, detailing your core web vitals:
Let’s break down these metrics.
GTmetrix gives our website a Grade A, which means it loads quickly and performs well on the first click or visit, backed up by a 96% performance rate. The 100% structure score shows our website is well-structured for fast performance and Google’s expectations.
“LCP” stands for largest contentful paint. The LCP number shows us how long it takes for the largest element on our website to load.
Here, it took 626ms, or 0.6 seconds. This can help us find images or media we may need to compress or remove to speed up our webpage.
As a reference, GTmetrix recommends an optimal LCP as being shorter than 1.2 seconds.
The TBT, or total blocking time, shows us if any scripts or internal issues stop our website from loading quicker (they don’t).
This tells us whether or not we need to edit code or remove scripts to reduce slowdown. Ideally, GTmetrix recommends a TBT of less than 150 milliseconds.
The CLS stats tell us if there’s any cumulative layout shift. This calculates how much the website changes layout during loading.
If the CLS figure is high, we need to make our web design more responsive, so it loads more efficiently across different devices. GTmetrix states that anything less than 0.1 CLS is ideal.
What is a good page load time?
Your web pages should load in less than three seconds. We said this before, but it bears repeating: when you go over the three-second benchmark, you’re losing half of your potential customer base.
However, three seconds isn’t necessarily the working average across the web. A study by Tooltester, which examined more than four billion individual web pages, found the average load speed to be 2.5 seconds on desktop and around 8.6 seconds on mobile.
That means mobile sites are taking over 70% longer to load than desktop equivalents.
Data shows that mobile bounce rate is likely higher than desktop’s by around 6.8%:
This data shows website developers need to continue pursuing faster mobile speeds as a priority and that average speeds vary depending on devices and browsers.
However, that doesn’t mean mobile and desktop users have different speed expectations. We should all still aim for the three-second loading goal through responsive web design.
Responsive web design ensures your pages are quick to load and easy to navigate across all devices. We’ll take a closer look at this a bit later on.
How To Improve Website Loading Speed: 9 Best Practices
Improving a website’s loading speed can be as simple as:
- Reducing how many images and videos you have per page
- Changing your host
- Fixing website errors
- Contacting an expert to help you tune everything up
However, sometimes you’ll have to do more than just partner with the right host and delete a few clunky images…
And that’s when you’ll need all nine of our top suggestions for improving your loading speed:
Website loading speed tips: a quick summary
|Change your web host, server, and package||Shared hosting is cheap but slow. Virtual and dedicated hosting options help pages load faster|
|Slim down on plugins||More plugins mean more data for your website to load, slowing visitors down.|
|Try using lazy loading||This technique delays non-essential images and elements, loading them at a later, less-important stage.|
|Prioritize mobile load speeds||Around six out of ten people browse from phones and tablets – and on average, mobile sites are much slower than desktop sites.|
|Optimize images||An abundance of large image files can be unnecessarily slow to load; proper image optimization can go a long way in improving speeds.|
|Use website caching||Cached elements, such as images, can be stored for reuse. This reduces server pressure and time-consuming database communication.|
|Fix your 404s||Unnecessary 404s and missed links clog up your bandwidth and spoil user experiences.|
|Minify your coding||Even a few extra characters in your code make your website work harder (and slower).|
|Get a professional on board||You don’t have to handle all of the time-consuming, complex tricks yourself.|
1. Change your web host, server, and package
There are typically three types of web hosting – shared, VPS, and dedicated. This is an important choice, as it has a major impact on how quickly your web pages load.
- Shared hosting is affordable, but the clue’s in the name. You’ll share a server and all its configurations with multiple other administrators. This setup can lead to slow server response time and unnecessarily long loading.
- VPS is virtual, cloud-based hosting. You share server space but not configurations. It’s less affordable than shared hosting, but it provides faster loading times.
- Dedicated hosting is the most complex and expensive option. It’s your own private web server, meaning there’s no one else around to slow your page speeds down.
Choosing a speedy hosting option often means sacrificing extra money and learning more technical jargon. However, given the importance of loading speed, these sacrifices are worth making.
It’s essential to partner with a hosting provider that puts website performance, not value, first. Investing in a quality network of servers early on helps you stick to that golden three-second rule over the long term.
2. Slim down on plugins
Modern websites built on CRMs, such as WordPress, thrive on plugins. Plugins are background apps that can help you track visitor behavior or manage your technical SEO, among other things.
While they can be instrumental in helping track analytics like page views and enhancing UX, too many can restrict website loading speeds. It can lead to an excessive data load on visiting.
If you really want to learn how to increase website loading speed in WordPress, be frugal with plugin use. Check which of your plugins are active, which you use the most, and which are draining your website’s resources.
Ironically enough, a good start is to use a plugin called Query Monitor. You can track which other plugins are generating the slowest queries and activities, choosing which to knock away and which to keep.
Here’s what the plugin’s “capability checks” screen looks like:
Alongside Query Monitor, remember to keep checking your page speed with GTmetrix. Retest your pages when you remove each plugin for real-time results. To keep testing, you’ll need to sign up for a free account with GTmetrix.
You’ll always need some plugins to ensure your website is secure and that your content’s optimized for SEO. However, when learning how to increase website loading speed, you’ll quickly find unnecessary plugins and apps are worth getting rid of.
3. Try using lazy loading
Lazy loading is a behind-the-scenes trick that delays some scripts, resources, and media from loading while your page boots up.
These are “non-critical,” which means they’ll load later – they won’t slow down initial visits to your website.
Lazy loading is easy to spot across some websites. For example, have you ever seen an article or page load an image as a blur before ‘filling out’ a few seconds later? Like this:
The page has loaded up the crucial elements and fills in the placeholder later on when it matters to the viewer.
Lazy loading works best “below the fold,” i.e., further down the page. Your readers don’t get to see awkward placeholders, with images loading into place once they scroll down.
4. Prioritize mobile load speeds
Google gives ranking preference to websites that are mobile-friendly. All website developers should focus on designing for the smaller screen, and as such, there’s no excuse to push mobile speed optimization to the back of the pack.
It’s why we prioritize responsive web design, ensuring the websites we develop work on desktops and mobile devices.
Here’s a snapshot of the mobile front page for one of our clients, Pinnacle Health Management:
It’s optimized to fit a smaller screen and thus loads quicker for mobile users above the fold.
Here’s a glance at how mobile traffic has become the dominant channel over the last decade:
If you ignore mobile speed tests, you’re effectively ignoring six out of ten visitors to your website. No wonder poor mobile responsiveness is one of the biggest web design mistakes you can easily avoid.
5. Optimize images
Everyone likes visuals. Images such as infographics are ideal for sharing ideas and ensuring messages stick (after all, around 65% of people are visual learners).
Unfortunately, images can clog up your web loading speed. Slowdowns can occur due to image compression, file size, formatting, or even how many images you have to load.
Try using image formats such as WebP, JPEG, and PNG, which load faster than other formats. Compressing your image size and ensuring they’re optimized for responsive design can also boost page loading speed. A plugin such as ShortPixel can handle all of this for you.
Think about whether you need to use images at all. You can convey a message and tone in many cases through your choice of color and formatting rather than clunky JPEGs.
Take a look at the initial webpage we designed for Generation Thrive:
There are very few visual assets on the page. There’s a backdrop, header and footer, buttons, and minimal text. These all add up to a website that’s quick to load without minimizing the impact of content delivery.
6. Use website caching
Website caching can take a lot of heat off your server. Elements such as headers and footers are copied and stored for use again at a later point, meaning they don’t need to keep reloading on every visit.
Browser caching stores elements temporarily on devices, meaning there’s no need to re-render the same images every load. Web caching can also reduce the times your web pages communicate with your database, further speeding up processing.
Caching may not be available via your host if you have a shared server setup. You’ll normally need a VPS or dedicated host.
7. Fix your 404s
404 errors occur when pages don’t exist or can’t be found. Often, visitors find these on your website when you’ve failed to keep a page or link up to date. Ours looks like this:
404 pages are necessary for showing visitors that they’ve mistyped an address or that a link no longer exists. However, dead links to 404 pages across your website slow down its loading speed and lead to disappointment for visitors (lowering your UX).
You need to check that all the pages in your sitemap lead to the correct destination.
Plugins such as 404 to 301 for WordPress can help find areas of your website that lead to dead ends and notify you when it’s time to clean up.
Google suggests that 404 errors probably won’t affect your SERP rankings, but it’s still worth tidying up your links and connections.
8. Minify your coding
Minifying can be as simple as taking unnecessary characters, comments, and spaces out of code that can slow it down. Minified code works the same as the original, but it loads faster.
If you need more confidence with coding behind the scenes, there are some plugins you can use to help.
ThemeIsle ran several tests on minifying plugins and found that both M+M+R and Autoptimize boosted load speeds by 5%. That took their tested pages below the ideal 0.6s threshold. Here’s a breakdown of what they discovered:
9. Get a professional on board
Speeding up a website to its full potential takes a lot of background work and some coding knowledge.
While it’s possible to make some of the tweaks and changes on your own, a professional web maintenance team can keep a closer eye on how you’re performing and what’s necessary to build faster pages.
Hiring an expert also saves you from the highly time-consuming task of having to monitor and maintain your website and online store on your own. Web devs are always on hand to analyze web pages, automate updates, and make tweaks when needed.
This is essential because failure to maintain your website properly could lead to sales downturns and poor UX.
Improve Page Load Times to Boost Conversions
Website loading speeds make or break that crucial first connection with prospective customers and clients.
If your website takes longer than three seconds to load, you could:
- Lose your visitors to a rival
- Start seeing revenue drop
- Lose favor with Google and slide down the rankings
Thankfully, there are plenty of ways to improve your site’s performance – and you’re now aware of nine proven options to implement straight away.
But there’s no harm in asking for help.
Here at StateWP, we’re ready to become your on-call website maintenance crew, keeping your site in tip-top shape for faster load times.
Want to learn more about keeping your website lean, mean, and ready to convert? Check out our guide to monthly SEO maintenance.