Before we look at the reasons why your website might be slow, let’s look at why it’s important. Your website design must not only look good, it must also perform.
In a world with high speed 4G and WiFi, people expect things to work quickly. Gone are the days of 56k modems and that dreadful connecting noise, when patience was required and expected. It was common for websites to have a loading progress bar, and you could literally see the images loading line by line.
Fast forward to 2021, no one has patience anymore. And a slow website is bad for business.
Not only will it frustrate users who don’t want to wait around, but Google doesn’t like slow sites either as it provides a bad user experience, so it will negatively impact your SEO efforts.
High volumes of users leaving your site due to poor loading time will lead to a high bounce rate (a bounce is the name given to a user leaving the site after visiting just 1 page).
According to research by Google in 2018, 53% of mobile users will leave a site that takes longer than three seconds to load. That risk of a bounce increases quickly with each passing second.
Page load time vs bounce rate
This infographic summarises key stats and how it can affect your bottom line. For e-commerce, the effect can easily be numericised.
- 40% of people abandon a website that takes more than 3 seconds to load.
- 47% of consumers expect a web page to load in 2 seconds or less.
- 30% of mobile users will leave a site if it fails to load in 6-10 seconds.
Numbers aside, a slow poor performing website will damage your reputation. After a poor experience on a slow site, chances are that person will share their bad experience with others and never come back.
Remember you don’t get a second chance to make a first impression. So if your website is slower than a herd of snails traveling through peanut butter, let’s find out, why is my website slow?
Check your speed
There are 2 main tools we use to gauge a website speed. The first one is Google’s own Page Insights tool. Running your URL through this will generate a score (out of 100) for both your desktop and mobile sites. It will list out the key issues you need to address with some guidance on how to fix.
The other tool is GTMetrix, which gives you scores as above, but possibly provides more technical insights which a web developer may find more helpful.
Image optimisation
The first thing to look at when asking why is my website is slow, are the images. Images can be quite a common reason. You need to approach image optimisation from 2 areas.
Firstly, image dimensions. Only create images at the sizes which they will appear on the website. Larger images create larger file sizes which slow things down.
So for example, depending on the screen size of the user, the images never need to be wider than the screen itself. The only exception to this would be for example on an e-commerce site where there is a product zoom facility.
Let’s look at some of the common screens sizes and their related pixel widths.
According to the StatCounter website, the most common (desktop computer) screen size of the last 12 months is 1980 pixels wide, followed by 1366 pixels. This gives us a good indication that images only read need max 1800/2000 pixels wide to look good on the most common screen sizes, if a full width image.
On handheld devices this size drops to 1080 pixels (landscape tablet) and about 360 pixels (smartphones). Ensuring images are loaded only at the size needed will really help your site speed.
Secondly, you need to look at image compression. This differs from image dimensions, it’s more to do with the file format and compression.
Web file formats
Typically websites serve images in 5 formats. Choosing the right format for different types of images will reduce the load.
- SVG – web based vector format. Ideal for logos and icons. You can also animate an SVG.
- JPGs – best option for photographs. You can adjust the quality if the JPG file – high quality will create a bigger file size. Poorer quality will be smaller.
- PNGs – if you need a transparent background a PNG is the best option. A photo saved as a PNG will create a larger file than a JPG. Also the best option for logos and icons if a vector isn’t an option.
- GIF – depending who you speak to, pronounced Gif, not Jif. They utilise a limited colour palette (256 colours) so not ideal for photos, works better for logos. Can also be animated.
- WEBP – a more modern image type being utilised by Google which offers improved compression without loss of quality (most recommended).
There are tools available to help with compressing the images. Compressing the images generally means removing and extraneous visual and meta data from the file. For example any meta data associated with the image (eg a JPG may have info about the camera used or time the photo was taken).
Tiny PNG provides a great online service for compressing PNG and JPG files. If your website is built with WordPress you can use plugins such as WPSmush for JPGs and PNGs, or WEBP integration to convert your images to the popular next gen format.
A solid hosting platform
Not all hosts are created equal. We discuss the pros and cons of different hosting set ups in this website design guide.
Essentially, the host needs to have a fast performing platform, and be geographically close to your target country. A slow hosting platform results in a slow site – think back to snails and peanut butter.
Plus a platform which has constant downtime will cause you issues when customers are having problems accessing your site. Not many hosts (if any) can guarantee 100% uptime, but you should expect a figure close to this, check their SLA (service level agreement).
Server response time is a key ranking factor, so it starts with a good host.
Code optimisation
Now this is technically a more complex subject to explain, as there are so many variables to consider and different platforms use different types of code. I’ll try and break down some of the more common practices:
Eliminate render blocking resources
In order for your full webpage to load, certain scripts may need to be loaded before the main page content can load, for example CSS or jQuery*.
Generally, the top of the page will contain links to all these CSS and jQuery based files your website needs to run as intended. Sometimes these files might even be hosted via a third party.
* CSS is what controls how your website looks, and jQuery adds certain interactivity and functionality (eg a slider).
When a visitor lands on your webpage, the browser starts to load the page code top to bottom. So it will try loading these resources first.
When Google’s page speed tool tells you to eliminate render blocking resources, it’s saying don’t load all these resources first, because it’s going to block the page rendering quickly and slow down the loading time.
Focus on the above the fold content first (we refer to the top visible part of a web page as the above the fold content, coining the phrase from newspaper production).
Loading the bulk of the resources at the bottom of the page, means the HTML can start to load right away. But we can make sure the above the fold content loads correctly by separating out the critical CSS and loading this at the top too.
Confused?
Here’s an analogy for modern times – you need to get ready for your zoom meeting as quickly as possible. Focus on your hair and top half first, as that’s what people will see. They won’t notice you don’t have any trousers on yet.
Remove unused code and minimise
Minimising code is quite simple – it removes all the spaces, creating shorter scripts which can be executed faster.
A well coded website will only load the code it needs, keeping it lean and fast.
A badly built website will load lots of unneeded external resources and scripts. For example there are lots of ‘premium’ WordPress templates available to buy, and people can set these up without the need to know any code.
Problem is these templates are built with so many options, code libraries, page versions, styling options and features, that the code is bulky, bloated and slow.
Why is my website slow? Conclusion
Certain aspects of optimisation can be done without the need to know too many technical details.
But the foundations of the site can limit what can be done. Make sure it’s on a decent hosting platform and built in the right way.
Need help? Let’s talk.
