Having a website which loads quickly is essential for both search-engine-optimisation and user-experience.
According to websitbuilderexpert.com, 1/4 visitors will abandon a website if it takes more than 4 seconds to load.
Not only does Google use page-speed as a direct ranking factor, but it also analyses how users interact with your website. If visitors are consistently hitting the back button and heading back to the search results because they don’t want to wait for your website to load, then this is a bad sign for Google and it will send your website even further down in the rankings.
In this article I’ll explain how to check your website’s page speed and give some top tips to help you speed it up.
How to Check Your Page Loading Speed
The easiest way to check how fast your website is, is by heading over to Google Page Speed Insights at pagespeed.web.dev
Simply copy and paste any URL into the bar at the top and it will provide it a scores for both mobile and desktop, and even more usefully give you some tips to help speed it up. The tool will give you 4 different scores:
- Best practices
For page speed, the “performance” score is what you need to look at.
Check out the example below for this website:
What Do the Scores Mean?
So what is a good score to get?
The tool does give you an indication by highlighting the score in either red, orange or green:
- Red score = 0-49
- Orange score = 59-89
- Green score = 90-100
I’d advise taking these categories with a pinch of salt, as the vast majority of websites fall into the orange or red category.
According to tunetheweb.com, who analysed over 15 million websites, the average page score for performance was just 32 (well into the red category), whilst only 10% of websites achieved a score of over 75.
You’ll also get a breakdown of the key metrics:
- First contentful paint: time it takes for any part of the page to be rendered on screen
- Largest contentful paint: time it takes for the main content of the page to be rendered on screen
- Total blocking time: time during which long tasks affect the usability of the page
- Cumulative layout shift: measures how much the page unexpectedly shifts during loading
- Speed index: measures how quickly content is visually loaded
Aiming for as close to a score of 100 as possible is of course ideal, however you should not obsess over it. I consider the page speed to be good if a website has:
- A score of over 70 for performance on both desktop and mobile
- A “first contentful paint” of less than 4 seconds
How to Speed Up Your Website
Okay so now we know how to analyse your website’s loading time, lets go through some top tips to speed it up.
- Avoid using website and pagebuilders
- Use a good hosting service
- Format and size images correctly
- Avoid using video
- Choose the right theme
- Delete unnecessary plugins
- Limit redirects
- Consider lazy loading
1. Avoid Using Website and Page Builders
Using website builders such as Wix, Squarespace and Weebly make web design much easier for complete beginners as they often use intuitive drag and drop systems, however they are really not good for page speed, and SEO as a result.
At the expense of the ease of use, website builders have an incredibly bloated HTML markup which is the code behind the website. This is because there are loads of styling effects, and hidden elements which clog up the code and make the pages load much slower.
So what is the alternative?
I build all my websites using WordPress.org which is an open-source platform that can be installed and hosted separately. WordPress websites have numerous benefits over website builders including:
- Thousands more features
- Cheaper running cost
- And most importantly, faster load times
Check out my head-to-head comparison between WordPress and website builders to learn more.
WordPress is a more difficult platform to get to grips with though compared to website builders. That’s why I offer WordPress website design packages aimed at small-medium sized business. Take a look at my web design services page for more information.
If you do go down the WordPress route, I also recommend steering clear of installing any “page builders” such as Elementor and Beaver Builder. These, like website builders make the pages load much more slowly.
2. Use a Good Hosting Service
Every website needs a host for it to actually be live on the internet. The hosting service essentially makes all the files that comprise the website available to actually view online. The hosting service that you use affects how quickly your website loads.
There are actually loads of different hosting services available and they all have different packages to suit different requirements. The most common types of hosting are:
- Shared: lowest overall cost suited to lower traffic websites
- VPS: offers a balance between cost and speed
- Dedicated: highest performance and most expensive hosting
For most small business websites, you won’t need a very expensive hosting package in order to get good page load speeds. In the vast majority of cases, choosing a basic Shared Hosting plan will be completely fine. A good shared host should be able to handle 100,000 visitors per month.
VPS Hosting typically is capable of handling over 10,000-20,000 visitors per day whereas Dedicated Hosting is capable of handling at least 50,000 visitors per day.
If you get high traffic and are currently running on a shared hosting plan, you should definitely think about upgrading to a VPS or Dedicated plan to ensure your website still runs nice and quickly.
3. Format and Size Images Correctly
Images take a lot longer to load compared to text on a website.
Removing all the images from your page will undoubtably lead to faster load times, however it will make it look incredibly boring. So how do we get around this? The best thing you can do is optimise the format and size of your images to make sure they load as quickly as possible
If you followed the steps above and checked your website’s page speed on Google Page Speed Insights, then you may have noticed the following points under the “opportunities” section:
- Properly size images
- Serve images in next-gen formats
Properly Size Images
In order to make your images load as quickly as possible, you should ensure they are the correct size. Having unnecessarily large images will cause them to load super slowly and harm the user-experience.
So how big should your images be? It’s all about balance. You want them to be small enough so that they load quickly, but not so small that the quality looks poor.
For full-width images (for example in your website’s hero section) I personally would not go any wider than 1920px (x the required height) in order to prevent them from loading too slowly.
You should really avoid using too many full-width images and instead opt for smaller images to improve page speeds. Unless the image is super small, going for a size of 1000px x 1000px is about right for most images. This will ensure the image still looks sharp, but isn’t overly large.
Serve Images in Next-Gen Formats
If you want to go the extra mile, I’d highly recommend serving your images (or at least your largest images) in a next-gen format.
Most images saved to a device will either be in a .png, .jpeg or .jpg format. Whilst these file types are highly popular, they do not offer the best compression and hence load more slowly.
The answer to this issue, is to convert the image to a next-gen format such as .webp
WebP images load much faster but without sacrificing any image quality. Check out the comparison below (all images are the same size).
You can easily convert any image from .png/ .jpeg to .webp by using an online converter.
4. Avoid Using Video
We already know that images (particularly those which are incorrectly sized and formatted) slow down a website. Having a featured video on your website is even worse.
Although having a video on your home page looks really cool and modern, it does more harm than good in my opinion.
I ran a quick test on one of my demo websites to see how much of a difference having a video actually made. The result was that the video almost doubled the page loading time. This is big problem for both user-experience and SEO.
If you absolutely have to have a video on your website, then at least use the following tips:
- Keep the video as short as possible.
- Do not use 4K video. 1080p looks fine and will load much faster.
- Consider if the video actually needs audio. If it doesn’t get rid of it to decrease the file size.
- Put the video lower down on the page so it has more time to load.
- Make the video “lazy load” so it is only visible when on-screen.
- Consider embedding the video if it does not need to be constantly playing. YouTube and Vimeo are the most popular options for this.
5. Choose the Right Theme
This applies if you are using a WordPress website. WordPress websites are built using a basic theme which you then customise to suit your requirements.
There are over 9,000 free themes available on WordPress. Some are fantastic, and some are pretty bad. Choosing the right theme not only affects how your website looks, but also quick it is.
Earlier I mentioned the issue with website builders (Wix, Squarespace, etc.) having bloated code and slowing down the website. Well, bad themes will create this issue as well. You should always aim to use a “lightweight” theme to avoid these issues.
Some of the best lightweight but still very functional and customisable WordPress themes are:
I am personally a big fan of the Blocksy theme as I find it to be very fast but also nice and easy to use, and packed with features.
6. Delete Unnecessary Plugins
Again, this is relevant for WordPress websites.
Your theme should ideally include a lot of the features you need to make your website look and function how you want it to. However, it’s very unlikely that your theme will have every single feature that it needs to. That’s where plugins come in.
WordPress plugins insert into your website to give it more functionality. Examples of popular plugin types include:
- Contact forms
- SEO optimisation
- Google analytics integration
- Live chats
Whilst plugins are highly useful, you should definitely avoid having too many. Why? They can slow down your website.
Whenever you install and activate a new plugin, you add more code to the website. This typically means it adds more HTTP requests.
HTTP requests = slower loading times
Having at least some plugins on a WordPress website is almost entirely unavoidable. So, to mitigate the issue you should try and opt for “lightweight plugins”, as these will not slow down the website much at all.
So how many plugins is too much?
For most small-medium business websites which do not have an online store, having more than 10 plugins is in most cases unnecessary. You may need a few more if your website has a store or you need some more unique features, but I’d certainly advise against having more than 15 plugins active on a single WordPress installation.
7. Limit Redirects
A redirect happens when a URL points towards another URL, causing the page to redirect to another page. Redirects cause the page to load more slowly, because it is essentially wasting time trying to end up in the right place on the website.
In most cases, your pages should not be redirecting at all. However, in some cases it may be unavoidable if you’ve had to move to a new domain or have switched up the structure of your website completely. In this case, try and keep the number of redirects to a minimum.
8. Consider Lazy Loading
Lazy loading is a popular technique to improve page speeds. It basically defers the loading of certain elements of the page, so that the rest of the content can load more quickly, hence improving user-experience.
For example, you may have a video 2/3 the way down your home page. By lazy-loading the video, the part of the page that visitors see first will load nice and quickly because they are not being slowed down by the video later down the page.
Need Help Making Your Website a Success?
Media Bright specialises in web design, SEO and content for small-medium business. Head over to my service page for more information or get in touch using the contact form below.