Page speed optimisation is becoming a more and more important issue in the field. And following my previous post about the tools for page speed optimisation, I wanted to write a follow-up piece.
Page speed optimisation isn’t just about using the tools and trying to understand all of the jargon that goes on. There are some basic steps that you should take to improve the time it takes your website to load. In this guide, I will cover the most important factors that determine your website page speed and how to carry out steps to improve your page speed.
I will try to include solutions for both WP and HTML pages where it is relevant, so don’t worry if I don’t specify!
Page Speed Optimisation involves:
- Optimise Images
- Enable Compression
- Reduce Redirects
- Leverage browser caching
- Improve Server Response Time
Website Speed and Its Importance
Website performance optimisation is the focal point of superior websites. It is a crucial factor in dictating your company’s success, especially when it comes to online stores. Poor site performance has the ability to kill the bottom line, whether it is through torturing your customers while waiting for their basket to load, or by not loading at all.
Probably the most quoted article for this topic is a 2008 Aberdeen Research Benchmark. Yes, you read it right, 2008! (There are plenty more paper on this, but we shall cover this next time).
This paper suggests that a one-second delay in page load time yields:
- 11% fewer page views
- 16% decrease in customer satisfaction
- 7% loss in conversions
So these few extra seconds or millisecond can have a huge impact on your ability to engage with your visitors and send them down the funnel.
Another article,* claimed that 1 second of page load time enables users to maintain a seamless flow of thought, which makes users feel in control of their activities on your site.
Ultimately, a speedy website will lead your website to better retention rates, quality users and potentially more purchases on your site.
Optimise your images
To start your page speed optimisation, you need to look at the most basic structures of your site first – IMAGES.
It is definitely the most important step in speeding up your website because images are often the biggest items on site. A huge problem that I constantly encounter with image optimisation for the web is how easy it is to lose quality.
It is commonly known that PNG is a classic format for web images and for preserving image quality. However, everybody fails to mention how heavy it can be, especially if you are uploading large parallax or hero images to your site.
Another problem that I am constantly faced with is resizing of the image by your website (both do it, HTML and WP).
If you created or uploaded an image that is around 4000×2000 px and it needs to be resized to fit a box of 300x250px it’s going to eat into your website speed.
To optimize images:
- Keep images below 100kb, especially if your pages have a lot of images. There are multiple reasons to keep under this limit, but an article by RayGun is the best at explaining it (while this piece is from a couple of years ago, it explains what to look out for).
- Keep to 72ppi wherever possible. If you don’t your images will DEFINITELY be fuzzy.
- Create and resize images to the finished product. Leverage browser caching
- Create images in jpeg. While this format isn’t ideal for the world wide web it is good for saving space.
- If your images are still big, compress using photo editing program, or an online tool.
Now to stick with the theme of compression, GZIP compression! Gzip, is ZIP files for the web, that help to reduce the size of your website and sometimes can help minimize HTTP requests and reduce response time by as much as 70 percent (in the ideal scenario).
Gzip works by compressing your website to Zip file automatically. This significantly reduces the overall size of your site and consequently helps your page speed optimisation. A lot of bandwidth can be saved while the page load time will be improved. And when someone visits your site, compressed files will be extracted so the content can be accessed.
To do this yourself you need to either install Gzip compression on your website with the use of a plugin for WP or you can do it manually.
To install Gzip manually, you need to find out what server type your host is using, and be able to add code to .htaccess file, from there you will be able to find plenty of guides to lead you in the right direction.
The holy 3 of the web development! They can get a bit out of hand if you are using third-party add-ons and plugins. Some tend to use unexpectedly a lot of memory to run and can have a huge impact on your bottom line.
For example, if you are using MailChimp pop-up that is run by JS on your HTML site, that can use a crazy amount of your bandwidth (it did for me, I still don’t know why!). A similar thing can happen to anyone who is using a CMS.
- First make sure that you actually need to minify any of your code sheets, tools like Gmetrix and Page Speed Insights will tell you the size of those pages, and whether or not they should be optimised.
- Minifying the code sheets means that your code needs to be leaner, cleaner and that it doesn’t link out too much (this is particularly common with style sheets that link to a location off-site). For:
- CSS – CSS can get heavy, even if you are making it as clean as you can. If you are trying to minify local CSS sheet, there are plenty of tools available online. Some will allow you to import your sheet, some will ask you to input your code.
- HTML – Same as above applies to HTML sheets. There are some suggestions to incorporate the two and use as little as possible of additional stylesheets. This isn’t always possible, so look out on where you can and can’t do this.
Stories, services, pages… they come and go. Unfortunately, the ones that leave us, will often leave a gap… Like 301 or 302 redirect, or even worse a 404 error… These can get be pretty frustrating for search engines and can reduce your page load. Especially, if that page was popular.
We all know that error 404, means that a page doesn’t exist, and this is when redirecting that page to a 301 or a 302 comes in handy. Redirect 301 means that the pages has been moved permanently to a new location, while a redirect 302 means that the move is only temporary. This is important for search engines and page load. Search engines need to figure out whether to keep the old page or replace it with the one found at the new location. If the wrong type of redirect has been set up, search engines may become confused, resulting in a loss of traffic.
This whole redirect business can have quite a significant impact on your website. If your website is redirecting in a chain from one URL to another your visitors can get lost in this traffic, and it will significantly slow down your website. This can happen in a couple of ways, for example, if you had a website, that had some pages redirected, now you want those pages to redirect to a subdomain or even a completely different domain, so you add another redirect.
Sometimes a large number of redirects go through the home page, if you moved your homepage to another URL, like from mywebsite.com to mywebsite.com/index.html or www.mywebsite.com. Homepage redirects can cause the most damage, as it is the first page your visitors see and it will take much longer to load your website, this is because their browser will be stuck loading all of the redirects first.
Additionally, redirects will also eat up your link equity and only pass around 90 percent of authority to your page. So it’s bad for your SEO too.
- Check if you have any redirects on your website. Again online tools like GTMetrix can give you a basic idea of what is happening with your website in terms of redirects, but also try using ScreamingFrog. Awesome tool, but it might take some time to get used too as it is more advanced.
- Change redirects – If you found a lot of redirects on your website and don’t really know what to do with them, I would recommend looking at the guide by Moz on redirects. Unlike me, when it comes to running redirects directly from a server, they know what they are talking about! And as always, if you are running a WP site, you can find a plugin that will do it for you.
This is more important for those that run their own code, not CMS users. So here is how to do this:
- Find out what scripts your site is running, and why. Once again, check GTMetrix for this, and then identify what they are (Google the names if you don’t know)
- Look where on the page your scripts are running. There are two schools of thought when it comes to JS blocking.
- Put only the <script> you need in the header and put the rest of your scripts below the fold. OR
The latter one can be a bit of a pain to read about, but it really comes down to inserting defer.js, so don’t be scared when you are trying to do this yourself. Also, test, test, test!
Again, when it comes to WP or other CMS, guess what… there is a plugin for that!
Leverage browser caching
Browser caching sound like it’s a mouthful, but it’s not that bad. It can significantly improve load times by asking your visitors to save and reuse the files included in your site, like images. This is the best for sites that have a decent re-visit rate to their websites, like people that run a site with memberships, shops, and software.
- Ask your visitors to:
- Keep static content (global CSS styles, logos, etc. ) for 1 year after access.
- Everything else for 1 week after accessing your site.
- To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files.
- You need to have access to your .htaccess file. From there, you only need to set the parameters to tell the browser what types of files to cache and for how long.
Server Response Time
In Layman’s Terms, server response time is the amount of time it takes for the web browser to receive a response. Some have noted that Google preferred response time is under 200ms.
It seems that a general consensus of this is that this depends on your host speed. Overall, server response time is quite a low priority issue and improvements to this can be pricey.
TO SUM UP, page speed optimisation doesn’t have to be a big scary task on your site, it is easy to fix as long as you know what to look for.
Also, remember to always backup your site before making any changes, sometimes things happen and code turns against you!