1. Reduce the size of your images
First of all, the size of the images on your site plays a crucial part in the loading time of the page.
Remember to crop your images for web, don’t upload a 3000×2000 image for a 600×400 space. Upload a 600×400 image and a 1200×800 image for retina displays. By doing this you can reduce your image size straightaway from 3mb down to 300kb.
The second simple technique in order to reduce the size of your images is by using plugins such as TinyPNG and TinyJPG. These two plugins compress the file sizes of your JPG and PNG files that are on your website to achieve the lowest possible file sizes. (there’s also a website you can visit to compress them in batches)
There is no need to worry about your images looking low quality and pixelated as a result of this compression, as the differences are barely visible to the human eye. Therefore there are no drawbacks of using these.
Furthermore, you can reduce the file sizes of your images even more by using SVGs instead of any PNGs you may have on your site.
SVGs come with several advantages over PNGs. Not only are they smaller file sizes which increases the speed of your site, but they are also just lines of code, therefore, they can be embedded into your HTML, reducing the HTTP requests as the images are not being sourced externally.
If that hasn’t sold you, they also offer a better resolution image. This is because they are vector-based. This means no matter how much the user zooms in to the image, it won’t be pixelated like a PNG would be as PNGs are restricted to pixels.
2.Reduce the HTTP requests
The second technique is reducing the number of HTTP requests on your website. A HTTP request is a packet of binary data sent by the Client to server. Essentially the more things you have on the page – fonts, images, Javascript, the more HTTP requests you will create. Google Fonts alone can add 10 external requests.
As you may know already, the more HTTP requests the site has to go through, the longer it will take the user to load it, which then ultimately leads to a loss of business as more people will click off and move to another site.
Variable Fonts
Another option you have is to host google fonts locally rather than externally, this allows you to use all the google fonts on your site without the consequence of slower loading times as a result of all the external requests to Google’s servers. This also allows them to be cached, which greater increases the loading speed of your website.
Another exciting development is Variable fonts they allow you have to have multiple fonts and weights inside 1 file. This means it greatly reduces the amount of requests that fonts will create.
3. Caching Plugin
Having a Caching Plugin is a must for websites today. All types of websites can benefit greatly from including one, but most of all e-commerce websites will get the biggest benefit. This is because once the user/customer has visited a page on your site, it makes static HTML pages and saves it on their own server meaning whenever they go back to that page, it loads it from their cache rather than the external server which boosts loading speeds tremendously. As you will know, people often go back and forth between pages on e-commerce sites, therefore, the use of a caching plugin would benefit these sites greatly.
What happens when the site is updated
When a site is updated, caching plugins have a mechanism which deletes the outdated sections from the cache, and re-cache the new, updated sections of the site. This allows returning users of a site to load the site quickly, even after it has been updated.
The plugin only deletes the sections of the site that are updated, for example, if the colour of the heading was changed and nothing else, the plugin would delete the outdated heading from the cache and keep the rest of the site as nothing has changed.
4. Try to avoid bloated themes
When looking for a theme for your website, you may come across cheap themes on a website such as Envato and decide to use them for your website because of the price tag. Although, I suggest staying away from those as most of them are what we call “bloated”.
This means they have extra unnecessary weight to them. This produces more requests for the site which slows it down immensely. These themes, as you may have seen, are labelled as “multi-purpose” themes, which makes them look more enticing for the customer. But as a result of it being “multi-purpose” comes all this unnecessary code that will be useless for you and will be very hard to strip away.
Because of these reasons we always suggest getting a bespoke theme built around your needs. This will result in a much faster and unique website for your business.
5. CSS Image Sprites
Using CSS image sprites are also a simple yet very effective way of reducing your website loading times.
What are CSS Image Sprites?
CSS image sprites are simply a collection of images put into one single image file to drastically decrease loading times of the website. Once the collection of images are combined into one. You are able to rearrange the images using CSS so that they look like separate images again while the website only has to load one image file.
When combining a group of images into a single sprite, you may notice that the overall file size is a little larger than what they would be as separate images. This may seem like it would make the loading slower but in fact, it doesn’t. This is as a result of there only being one request having to be made for multiple images compared to one request per image. Also, some browsers limit the number of simultaneous requests, therefore, sprites are very useful.
6. Choose a good host
You can do all of these previous tips and techniques and it won’t matter unless you have a good, fast, reliable host for your website.
The host you choose for your website is a big factor when it comes to both the speed of your website and also the SEO side of things. For example, I suggest you stay away from shared hosting. This option may have piqued your interest when looking for a host because of how cheap it is compared to the other options. If you are sharing your host server with multiple other websites, it reduces the loading speed and it can make your website vulnerable to theft.
It’s worth noting here that not all shared environments are equal. Some are much better than others. For example, Krystal a very reputable UK based host have a terrific shared hosting package. Whereas services like GoDaddy or other cheap hosts don’t have a great security record.
So what should you be looking for in a web host?
I strongly suggest that you choose a host which has its servers based close to your target audience. This increases your websites speed for your typical audience as the requests to the server will not have to travel as far. It will also help our SEO, faster speeds mean a better browsing experience.
Also if a host has a lot of downtime on its servers per month I suggest you stay away as this will mean your website will be down longer than it needs to be as well as negatively affecting your SEO rankings. Every web host has some downtime but as long as the uptime is more than 99.90% the web host is reliable. Anything below this you should find another host.
A good host will increase its customer’s websites speed by using the latest technology available which will ultimately result in more business/page views for the website owner. Things such as the PHP version the server runs are key. Stay away from servers that only support up to 5.6, ideally you’d like a host who is 7.2+.
7. Lazy Loading
What is Lazy Loading?
With a standard website, when it is opened by a user, usually they have to wait until the entire page is downloaded. However, with lazy loading implemented to the site only the necessary pieces of content are loaded before the user can view it, then the rest is loaded in when they scroll to it. This prevents resources from being wasted when people load the entire page and click off without looking at it all.
This technique also drastically improves the speed and performance of the website as it is only loading the necessary information for the user and allows them to get onto the website quicker.
How to implement lazy loading into your website
You may be worried about having the right amount of coding knowledge required to implement lazy loading into your website. Although there’s no need, because like most coding features, there’s a plugin for it.
The best one we can recommend is called “WP Rocket” this plugin does all the work for you, with hardly any setup required. Just activate it once you’re ready and it will implement lazy loading into your site, boosting the performance and speed.
8. Minify CSS, HTML and JavaScript
Minifying CSS, HTML and JavaScript is another way to increase the speed of your websites. You do this by getting rid of all unnecessary characters in your code that are not needed for the code to work.
Some examples of theses unnecessary characters you may want to remove are, comments, white space characters and also new line characters. All of these are used in code to make it more visually appealing and easier for the programmer to understand but they are not needed and can slow down the overall speed of the website.
9. Reduce Redirects
Redirects are another big factor in the speed of your website. The more you have, the slower it makes your website. This is why it’s crucial you get rid of any redirects you may have on your website that seem unnecessary.
Furthermore, mobile users are impacted the most by redirects as a result of their less stable, slower connection compared to desktops, and in this day and age, the majority of website visits are from mobile meaning reducing redirects on your page is crucial.
You may be thinking, how do you check if your site has any unnecessary redirects. This is where the tool “redirect mapper” is useful. With this tool, it allows you to check every page of your website for redirects, then you can think about whether or not they are important enough to compromise the speed of your website.
An example of a poor redirect chain would be as follows.
http:// → https:// → https://www.
http:// → https://www. – Better, one less redirect in the chain.
10. Reduce the number of plugins
Plugins are very useful for websites as they give the websites more features that can prove very useful. Although, unfortunately, the more plugins your website contains the longer it will take people to load your website. Therefore, to fully optimise your websites speed, you should look for any outdated or useless plugins you may still have on your website. This will help speed up your website loading speed, especially if you have a lot of useless plugins attached to your site.
To figure out which of your plugins are affecting your site the most, you can run a performance test and remove the ones that are taking the longest to load and slowing your website down. You should also try to stay away from plugins that load a lot of scripts and styles as this will drastically reduce your websites speed.
If you have done that, there may still be old redirects on your site that are attached to pieces of code that do not exist anymore. To see if your site has any of these, you should check your .htaccess file and remove any old legacy redirects.
