How fast should my website load?
If you find yourself asking this question as your website is loading, or if you notice your wordpress site running very slow, it’s probable that your site isn’t loading as quickly as it should. If you ask Google, your website needs to load fast enough to not hinder your visitor’s experience. They suggest it should load in under 3 seconds.
However, depending on what type of website you run, it might be difficult to reach Google’s three second goal. Websites come in all shapes and (file) sizes. The design, development and hosting of your website can all affect how quickly it loads.
A website with one image on a page will load a lot faster than a website with 100 images on one page, for example. However, it’s not always as simple as just removing all the images. There may be logical reasons why you need 100 images on one page (such as a large image gallery) and this will slow things down somewhat.
So because not every website is the same — i.e. websites have different requirements, attract different types of visitors and serve different types of content — our answer to the question “how fast should my website load?” is:
As fast as possible.
How to optimize your website to load as fast as possible.
If your website or wordpress site is running very slow, the best way to address this is through website optimization. Website optimization is a big thing. This is because the average website load time is around 8.66 seconds and that, as you now know, leaves quite a bit of room for optimization to make Google happy!
There are many different ways to optimise a website to improve website speed. Let’s take a look at some of the main areas to consider if you want to reduce server response time and increase website speed.
Chapters:
- Reduce server response time (TTFB)
- Utilise image compression
- Minifying your code
- Enable file caching
- Prioritize visible content
- Reduce HTTP requests
- Content Delivery Networks (CDN)
- Avoid redirects
- Use HTTP/2
- Staying up-to-date (WordPress, PHP)
1. Reduce server response time
Server response time, otherwise known as Time to First Byte (TTFB), is the measurement of the responsiveness of a web server. Essentially, when you load a website on your computer, your internet browser sends a small request to the web server that hosts the website you want to view. Imagine it says something like: “Hey, I’d like to view this website please”.
The time it takes the web server to start sending back information about the website is the server response time (TTFB). So the slower your web server is, the longer it will take your website to be requested by visitors.
To speed this up you can either utilize a CDN (which we will explain later) or host your website with a faster host. Alternatively, you might like to consider both.
2. Utilise image compression
Images contribute heavily to the overall page weight, or overall web page size (which is measured in kilobytes or megabytes). The more images you have, the bigger your pages will be and the longer it will take for them to be downloaded and viewed.
If you can’t avoid having a multiple images on your web page, your website speed will benefit from compressing the images by reducing their individual file sizes. You can achieve this by:
- Making your images smaller so they are not larger than the space in which they are being shown.
- Saving your images using lower quality compression settings to reduce the overall quality.
- Utilising vector illustrations and SVG’s which are small in file size but retain their quality.
To address a wordpress site running very slow, there are plugins available which can automatically optimize images for you on your website. Our favourite at the moment is the EWWW Image Optimizer.
Google provides a useful set of image optimization guidelines and this can also be helpful to follow when optimizing the images on your website to increase your website speed.
3. Minify your code
The building blocks of your website — the code — can be optimized using a method called code minification. Essentially code minification removes any characters not required for the code to function normally. These unnecessary characters include:
- White spaces
- Comments
- New line characters
- Block delimiters
By removing unnecessary code, it makes the file sizes of your web pages smaller and it allows the browser to read the code quicker resulting in a more efficient website speed.
You can minify your website code using the following online tools:
CSS: https://cssminifier.com/
Javascript: https://javascript-minifier.com/
4. Enable file caching
Caching is the process of making a visitor’s web browser remember certain parts of your website so that it doesn’t have download those parts each time they return to your website. Caching can also pre-prepare your webpages by working out any complex calculations before a visitor reaches the website and saving them in a static HTML file. When a visitor reaches the website, the website sends the prepared static HTML page to the visitor instead of running all the calculations again. This, in turn, increases your website speed.
Caching is like farming!
Imagine your website as a farmer who has 100 apples for sale. It sounds strange, but hang in there! Now imagine that a visitor to your website is a customer who buys those apples every day. Every day, the customer (visitor) visits the farm (website) and asks how many apples the farmer has, which the farmer counts himself each time.
Over time the farmer gets fed up having to individually count 100 apples each time the customer comes. He knows he always has 100 apples for sale, so he writes this down on a piece of paper (the cached HTML file). The next day the customer comes and asks how many apples the farmer has and the farmer simply hands the customer the piece of paper with the number 100 written on it. The farmer no longer needs to think each day, which saves him time.
Caching is best for web pages that do not change frequently, but can also be used for pages that do change. If your web pages are cached but the page content changes, you just need to ensure that your caching system is setup to re-cache your website each time a change is made.
If you are running a WordPress website, there are some great plugins already out there which can cache your website for you and re-cache it if changes are made. Our personal favourites are WP Fastest Cache and W3 Total Cache.
5. Prioritise visible content
Not every part of a web page will be visible immediately, especially for websites that require a lot of scrolling. Anything that is not visible immediately can be loaded as required, or as the visitor scrolls down to the sections that are not visible. This can give you extra untapped time to finish loading your web pages, increasing your website speed. This is what is known as prioritisation of visible content.
Prioritizing visible content can also mean allowing all visible content to load before any complex scripts or calculations need to run. This can often mean re-structinging the code on your website to prioritize the most important parts first and moving any JavaScript scripts to the end of your HTML document.
How your website is developed and the platform it is built on will determine how you can implement this. If you are running a WordPress website, the WP Fastest Cache and W3 Total Cache plugins mentioned above can help you optimize this area.
6. Reduce HTTP requests
When your browser loads a website, it sends requests (as mentioned in section 1: Reduce server response time) asking for bits of information. The more information (content, images and functionality) that your website has, the more requests your browser will need to make in order to download all of the information.
Backtracking to our example of the web page with 100 images, if a visitor wanted to view this page then their browser would have to make at least 100 requests to the web server to download all of the images. That is a lot of back and forth communication!
The more HTTP requests that your web page makes, the slower it will load as it will require more time to make these requests. To optimize the number of requests that your web pages are making, you should only include information that is necessary for each page to be loaded. Caching your website, as mentioned in section 4, can make a significant difference to the website speed as the number of required web files gets reduced during this process.
7. Content delivery networks (CDN’s)
Content delivery networks (CDN’s) are another great way of increasing your website speed. A CDN will keep cached copies of your website content and files on fast servers located all around the world. When your website is visited, the CDN will know where that visitor is located and it will load your website data from the closest server to the visitor’s location. This in turn saves time! Utilizing a CDN will also help reduce server response time.
If you would like a full overview of what a CDN is and what it can do, KeyCDN provides a great article.
8. Avoid redirects
Website 301 redirects decrease website speed. They should be avoided whenever possible. A redirection will create more requests and more round trips that a visitor’s browser will need to do in order to access the data that it needs to display a website.
9. Use HTTP/2
Don’t worry, we will spare the technical details with this one since you have made it this far! Essentially, HTTP/2 is the future of loading websites. Like we have mentioned previously, internet browsers currently have to load pages by making information requests to a web server (If you are confused about this, go back and read section 1 and section 6). With HTTP/1 (the current way), requests have to be sent one at a time and new requests cannot be started until the last request has been completed. With HTTP/2, multiple requests can be sent and received at the same time!
So if you had two web pages each containing 100 images but one was using HTTP/1 and the other HTTP/2, the HTTP/1 web page would have to slowly ask for each image to be downloaded one at a time. The HTTP/2 web page, however, would already be finished loading well before the HTTP/1 page because it would be able to download all 100 images at once. HTTP/2 is just cooler. And faster!
To use HTTP/2, all you need to do is ensure that:
- You have an SSL certificate installed on your website
- Your web server or website host supports HTTP/2
For something that sounds so technical, it actually is the easiest optimization to implement. To read more about SSL certificates, read our post on on why you need an SSL certificate in 2018.
10. Staying up-to-date
It is important to keep your website and the server that it runs on up-to-date. Updates to your website server can often bring performance increases. A simple example of this is upgrading the version of PHP on your server.
If your web hosting server is not running PHP version 7 or above, you could be missing out on a potential 64% performance improvement! Simply asking the question can result in a significant optimization.
If your website uses a CMS (Content Management System) such as WordPress, keeping that system up-to-date can also bring performance increases. It can also eliminate older bugs and glitches that could be slowing down your website without you knowing.
This also goes for any plugins or additional functionality installed on your website. It is often best practice to perform a website update audit every 6 months to ensure that your website does not fall too far behind in the ever-changing online world.
Hopefully you’ve found an answer to the question “How fast should my website load?” And hopefully you’ve also found some easy solutions to implement that can increase your website speed.
Like we said, your website speed will depend on the type of website you run and the content you are providing on the site. But these optimization strategies can help you increase your website’s performance and improve your visitor’s experience.
