Written on May 3, 2022
Page loading speed is not just important for improving the user-experience. In fact, page loading time affects visitor retention, sales conversions, and even search rankings. This is how we recommend speeding up your website:
If your website is slow, your image file size could be to blame. Before using an image, at the very least it should be resized to match the maximum display dimensions and compressed using image compression tools. To learn more about preparing images for the web, see: How to optimise images for the web
Every resource that your page has to contact upon loading adds an HTTP request. Each of these requests add to the time it takes to load the page. Depending on the size of these files the added time can be significant.
To see the requests made when you load the page:
You will now see each resource as they are called, and in the bottom left-hand corner you will see the total number of HTTP requests.
With the help of your developer, aim to minimise the resources called so that you are making less than 30 requests on each page load.
This can be done by consolidating files such as (CSS) style sheets, reducing the number of web fonts, removing unnecessary plugins, creating CSS image sprites (for your icons), etc.
Aim to concentrate specifically on those with the highest loading time.
Bad requests are HTTP requests which either won’t load at all (404) or those where the server response is very slow. These files can significantly slow the load of your site and should be fixed or eliminated.
Sometimes the origin of these files is easy to identify and simply removing or replacing a plugin will do the trick.
To locate bad requests, again, navigate to the network tab in developer tools and refresh the page. Normally non-loading requests will be highlighted red.
If you don’t recognise the origin of the request, speak to your developer and discuss with them how to remove or replace it.
When code is written it is created in human readable form. However this means, if it has not been compressed, there is a lot of unnecessary spaces and line breaks, adding to the file size and slowing your page loading time.
Speak to your developer to check if the code has been minified and if not ask if they will do this for you.
Images definitely make your website more appealing, but just a few images can have a signifiant impact on page loading times. In some circumstances you may find that you can get the effect you are looking for with SVG (Scalable Vector Graphics).
Rather than pixels, SVGs use co-ordinates and can scale to any size without increasing the size of the file. SVG is also written in XML and therefore can be embedded directly in the HTML of the page, thus eliminating the need for a request.
While you aren’t likely to save much space replacing tiny icons (PNGs are very performant at these sizes), larger graphics such as logos, banners and simple background graphics created in SVG could reduce your page loading time significantly, when compared to JPEGs, PNGs and GIFs.
GIFs are back in fashion, and for good reason — they can easily spice up an otherwise mundane looking post. But, they come at a steep cost. GIFs are created in frames and, unlike video, all of the frames must load before you can see the animation. A 20 frame animated GIF may only last a few seconds, but is roughly the equivalent to 20 static images of the same dimensions.
That is where SVG animation comes in. SVG gives you the freedom to add some pizzazz to the page without the weight of a frame by frame animation. Instead, SVG can be animated by both JavaScript and CSS and, unlike GIFs, the graphics will be crystal clear at any size.
Most websites use what is called “shared hosting”. This means the website is sharing its server with other sites. while this may be more cost-effective than using a dedicated server, there are notable performance disadvantages.
Shared hosting usually means more down-time (server is unresponsive), slower page loading times and more unpredictability. While dedicated servers aren’t cheap, a good compromise is VPS (Virtual Private Server) hosting. VPS hosting still uses shared servers, but as your part of the server is partitioned, you don’t suffer when other websites on the same server are under heavy load or are attacked — everything is kept separate.
A great place to get VPS hosting is Digital Ocean as not only is the cost comparative to shared hosting, but the setup is really simple as DO have one-click installation for CMSs such as WordPress, Drupal and Ghost. To conclude
Aim for your pages to load in under 2 seconds and test your site on various devices in different conditions. With the help of your developer, you can even reduce page loading time on mobile devices by changing the content that is sent to different screen sizes.
So, if you have a slow website, don’t despair. In most cases, this can be resolved quickly and easily at low cost. Every little helps; and every time saving, no matter how small it seems, will likely reflect on your site conversions and return user stats.