One of the critical components for a website’s performance is site speed. It has an impact on SEO, which affects rankings, traffic, conversions and ultimately sales if you sell products or services online. Studies into website speed show that:
- 79% of online shoppers state that they won’t return to make a purchase again if website performance is an issue the first time around.
- Pages that take 5 seconds to load have an average bounce rate of 38%, compared to a 9% bounce rate for pages that load in under 2 seconds.
- Conversion rates can drop by as much as 7% for just a 100-millisecond delay in page loading times.
Such statistics demonstrate why website speed is vital for the success of any website.
What is website speed?
Website speed refers to the amount of time your website landing page takes to load when a visitor arrives at your site. According to research by MachMetrics, load time across different industries in the UK was reported to be just 9.7 seconds respectively.
The recommendation from Google, however, is to reduce that time to under 3 seconds. With so many companies completely missing the mark, this provides an excellent opportunity to gain an advantage over industry competitors.
How to test website speed
Before you implement the techniques that’ll help you increase your website speed, you need to identify the current situation. There are various online tools you can use to quickly achieve this. Some excellent platforms you can try for free are:
All you need to do is enter your website URL in the panel. In a matter of seconds, you’ll receive a detailed analysis of your site’s performance along with numerous suggestions for improvement.
When you have all the relevant data at hand, you can start to work towards increasing your site speed in a structured manner. 5 ways that will help you reach your goal are provided in more detail below.
Optimise images
The aesthetics of your website has a key role to play in the impression you give to your visitors. As a result, many sites have a library of high-quality images to complement the site design and also break up the text. This makes for a better user experience.
As of October 2019, images made up 50% of the total webpage weight across desktop and mobile on average. This makes it essential to pay close attention to image optimisation in order to increase website speed.
Image compression
When image files are too big, they take up a lot of bandwidth, which in turn, slows down load times. On the other hand, significant formatting can leave you with a poor quality image, which is counterproductive.
Therefore, it’s important to find a good middle-ground where the image size is optimised but there is no compromise on quality. An example of this in practice is provided below.
Compare Image 1 and Image 2:
Image 1
Image 2
Spot much of a difference? Probably not. The first image is the original one with a file size of 3.6 MB. The second one has been compressed and has a new file size of 574 KB. That’s 86% smaller than the original size and your visitors are highly unlikely to notice any difference in quality with the naked eye.
Image resizing
Resizing is another way to reduce file size. If you’d like an image to display at 400px x 400px - resize it to those dimensions before uploading it to your website. Adding the original 5000px x 5000px file, for example, will slow down your site speed as the page will have to load the original image first before modifying it to the relevant size.
Numerous online tools can be used to optimise images before they’re uploaded to your website. Plug-ins can also be installed to ensure that your pictures are compressed with no visible reduction in quality.
Image formats & the SRC attribute
In addition to the image file size, you need to keep an eye on the format and src attribute. The best formats for images for the web are generally JPG and PNG formats.
The src attribute refers to the image’s URL and will resemble the code below:
<img src=“ ”>
Always ensure that there is a valid URL inside the quotation marks. For example:
<img src=“https://example.com/image.png” >
Leaving it empty increases the load on your servers, as the web browser will need to request access from the page directory or the page itself.
Enable caching
Anytime someone visits a website, the different components on the pages visited are stored on the hard drive in a type of temporary storage called cache. This is because websites generally have the same elements on various pages – the main menu at the top and the website footer are two good examples.
Therefore, instead of downloading the same components repeatedly, a cache is kept on the browser after the first visit. This cache can then be used to load pages on subsequent visits without the need to send another HTTP request to the server.
Enabling caching is a great way to increase website speed without simultaneously sacrificing other important elements. It will reduce the load on your server, make load times a lot faster and enhance your website’s overall SEO.
Increasing website speed on WordPress
For those using WordPress, there are two important points to note about caching. These are implementing caching plug-ins and utilising your hosts’ built-in cache.
Implementing Caching Plug-ins
A critical rule, that can’t be understated, is to never use multiple caching plug-ins on WordPress, or any other platform for that matter. There’s a common misconception that activating more than one plug-in will make the website faster. It will more than likely slow down your website and may even break it completely in a worst-case scenario.
As such, it’s important to install one caching plug-in only. If it’s set up correctly it will play a critical role in speeding up your website speed. There are several great caching plug-ins to choose from for better performance.
Utilising host caching
Websites that operate on managed WordPress hosting environments should utilise the hosts’ caching. The best hosting companies utilise caching systems that operate at a lower level than WordPress plug-ins, making them more advantageous. Furthermore, they’re developed to function seamlessly with WordPress and the hosting environment being used, which makes them even more beneficial.
We recommend you refrain from using a caching plug-in for websites running on managed WordPress hosting environments. This is because some plug-ins have been known to interfere with caching systems that’re already deployed by the hosts.
Adding code
If you're a real techie, you can also add some code that lets browsers know what to cache and the length of time to store it for. In principle, you’ll be setting the amount of time that specific file types will be stored in a visitor’s cache. The general guide below can be useful for setting “expiration dates”:
- Third-party resources – Minimum one day cache lifetime.
- Static resources – Minimum one week cache lifetime.
- Cacheable resources – Minimum of one week to a year.
Don’t use too many plug-ins
Installing plug-ins brings many useful benefits to your website performance. However, installing too many can cause some major issues - slower site speed notwithstanding. How critical these issues are is dependent upon the plug-ins installed, how they’re configured and which ones are activated.
Plug-in testing
There are a couple of different ways to determine which specific plug-ins are harming your site speed.
Firstly, run a speed test on your website with all your plug-ins activated. Pingdom Tools, GTmetrix and PageSpeed Insights can be used again for this. Once you have that data, you can begin to deactivate one plug-in at a time and then measure your website’s performance with each one disabled.
Through the process, you’ll be able to quickly identify which plug-ins are negatively affecting your site speed. If they aren’t a necessity they can be disabled and deleted permanently.
Secondly and ironically, there are plug-ins that can help you identify the other plug-ins that cause issues on your site. If you have too many plug-ins and not enough time to test them all using the long-winded, but effective method above, this could be an option. Just be sure to deactivate and delete the plug-in when the scan is complete and you have all the necessary data.
Functionality overlaps
Generally, plug-ins are installed to carry out a specific function. This could leave you handicapped if you have several different plug-ins – some of which may be slowing down your website – but all of which you simply cannot do without.
The good news is that plug-ins have come a long way and a number of them come complete with multiple functionalities. Firstly, identify which functions you need to perform and then search for excellent plug-ins that closely match your specific needs. You can enable or disable certain features accordingly within the multi-functional plug-in.
Implementing these more powerful solutions is a great way to reduce the number of plug-ins, and improve site performance without losing any important features.
Carry out certain tasks manually
It’s also possible to reduce the number of plug-ins installed on your website by performing more tasks manually where possible. While many plug-ins significantly streamline processes, there are others that aren’t completely necessary if you’re familiar with simple code editing.
For instance, you can manually add the tracking code for Google Analytics to your header via your website’s FTP. As soon as the code is added and you’ve re-uploaded the file, your Analytics set up will be complete. This negates the need for a plug-in that primarily carries out similar tasks only.
Reduce HTTP requests
Too many HTTP requests will slow down your website performance. Every time that visitors arrive at your website, their browsers request certain files from your server through HTTP protocol. Within these files, there are HTML, CSS and JavaScript files. When you have too many of these, it results in a greater number of HTTP requests, which affects your site speed.
Some excellent ways to reduce your HTTP requests and increase your website speed are provided below:
- Minimise and combine HTML, CSS & JavaScript files – There are powerful multifunctional plugins such as WP Rocket that can easily accomplish this. Go to the “File Optimisation” tab, select the files to minimise and combine and save your changes.
- Fix render-blocking CSS and JavaScript files – Either defer or make any CSS and JavaScript on your web pages asynchronous if they aren’t already. Sticking with WP Rocket, you can simply select the relevant options on the “File Optimisation” tab.
- Optimise images – Look through your media library and delete any images that are no longer needed. Thereafter you can optimise your images using some of the methods mentioned earlier in this post. You can also use CSS spriting or lazy loading.
- Analyse and reduce external scripts – Establish which third-party integrations are slowing down your site. That data can then be used to determine which assets to keep and which ones to get rid of.
- Use a Content Delivery Network (CDN) – This is particularly useful for websites with international traffic. When visitors arrive at your website, they are served the static content that is closest to their geographic location. The shortened distances increase the speed of data retrieval for faster performance.
Minimise redirects
Redirects are a good way to overcome issues related to broken links. This can happen if a page is moved, deleted entirely or the URL is altered. It’s also common when visitors are redirected to device-specific URLs.
However, having too many redirects will increase the number of HTTP requests, which slows down site speed. In a best-case scenario, your website will be free from any redirects whatsoever, but if there are mitigating factors such as content restructuring, then the goal will be to keep them to a minimum if possible.
Some excellent tools to check the number of redirects on your site are:
Once you’ve completed a full site scan you’ll receive a list of all the redirects on your website. Analyse the list to establish what function each of the listed redirects performs, making sure to check for redirect chains – redirects that lead to other redirected pages. Redirect chains should be avoided for two important reasons:
- Google will normally follow 3-4 redirects at most. Thereafter it terminates the process to circumvent getting stuck in a redirect loop. (Please note that it will eventually pick up the redirects again further down the line.)
- Only partial page authority is passed in a redirect. As such it is counterproductive to have a redirect chain, with extra steps that diminish the amount of page authority passed at every stage.
Increase your website speed & improve conversion
While some of these methods require a certain level of technical ability, others can be implemented easily. Nonetheless, it has never been more important to ensure the optimal performance of your website. When you increase your site speed you will offer your visitors a better user experience, which enhances your standing to search engines.
This can help expand your sources of traffic, improve your conversion rates and ultimately grow if you sell products or services online. At Red-Fern, our team of experts are dedicated to bringing you the best in all things web design, development and marketing.
