07736 592 188 hello@carbon14.design

How to Make Your Website Load Faster

The speed of your website is crucial to the success of your online business.

The longer it takes for your website to load the higher the chance of users leaving, or to use the correct industry term, “bounce”.

If your website has a high bounce rate then it signals to Google that either the content on this website is not what the user is looking for, or their is an issue with the website.

Statistics suggest that if a website takes longer than 3 seconds to load, 40% of users will leave. And if they leave, they may never return.

If you’re in digital marketing, graphic design, or even a small bakery in Inverness you will want to make the most of every click on your website, so a great place to start is improving the speed.

How fast is my website?

To get an idea of how your site is currently performing you need to get a benchmark by running a speed test. This will give you an idea of the time it takes to load a page, the number of requests being made to the server, and a performance grade when compared to other sites. 

There are a number of tools available that allow you to do this. Pingdom is a personal favourite that allows you to test from various locations.

Google PageSpeed will give you an idea of where improvements could be made however, it does not test the actual speed of the website which is a key metric we want to focus on,

 

But the question is, where do you start?

There are a huge number of areas that can affect the speed of your website so we first need to identify a simple, starting point that everyone can change.

Reducing the size or number of images on your website.

It’s often an overlooked area of a website build, although the data savings can be huge.

If you have no compression your images could be well over 2MB and this will dramatically slow your site down.

How to compress your images

There are a number of options out there for image compression, some deliver good results, and some deliver great results.

However, the aim of this exercise is to reduce the file size so any reduction will be an improvement. Think of marginal gains. Even the smallest improvement is an improvement.

The first option, and possibly best known, is Adobe Photoshop.

Photoshop gives you a number of options to help reduce the size of your images, from changing resolution or DPI, to resizing the overall image to meet the maximum requirements for the web page.

Once you have made these changes you can save the image. Photoshop has an excellent export function that allows you to see the effects of compression and resulting final file size.

You can even remove metadata. This is the information about the image such as the type of camera used to take the photo and takes up valuable data.

There are a number of options available if you do not want to use Photoshop. A popular, open source, programme is GIMP. This is free and offers a great alternative to paid software.

Another option is using online compression tools.
Websites such as CompressJPEG allow you to upload images to be compressed, run the operation for you so you can download the new, compressed versions.

 

Identify the maximum size required

Depending on how your website is laid out you may have a number of different image size requirements based on placement.

You may have large banner images, small team photos, or tiny credit card images that show your various payment methods. Having images that are larger than their requirements is a huge waste of data and an area you will want to rectify.

There are a number of ways that you can find out the maximum image requirement for a space but I like to use Google Chrome’s Developer Tools.

To access the information find the image you want to know the size of and right-click on it and choose “Inspect”. A new window will open and the line of code you need should be highlighted.

Hover your mouse icon over the image “src” and a pop-up should appear with two sets of pixel sizes (eg. 300 x 100 pixels). The first set is the size requirements of that area. The second is the natural size of the image.

Is the natural size larger than the required size? If so you can reduce this and benefit from the smaller file size.

JPG, PNG, or SVG

Using the correct file type can affect the size of your images.

Typically, if an image is a high-quality photo you will want to save them as .JPGs. This format offers near unrivalled image optimisation that can reduce file sizes by over half with very little change to the overall quality.

If your image uses flat colours, or requires transparent areas then the best format to use is PNG. However, be aware that any transparent areas are still considered data so keep these areas to a minimum.

The final option is SVG, or Scalable Vector Graphics. These are my personal favourite but you will often require specialist software, like Adobe Illustrator, to create them.

Not only are SVGs small, because they are code-based equations they can be scaled up or down with no change to the image quality. SVGs are best used for things like icons or simple, flat colour graphics.

Reducing images on a WordPress site

Your website may be using WordPress for its content management and you have a number of options for carrying out batch image compression on your entire media library. Cutting down the work required to simply installing a plugin and running it!

A personal favourite is WP Smush. This offers both free and paid for version, but the free version offers excellent results. The paid version allows you to go even further in compression so if you see positive results and want to try to get even more out of it, give it a go.

Once you have optimised your images run a speed test to see how much improvement it has made.

Delete Unnecessary Plugins

If you run a WordPress based website then it is highly likely that you are using plugins.

Plugins have been a great addition to WordPress and is a reason why it has millions of users worldwide.

The library contains plugins that make adding extra functionality to your website much easier and can theoretically eliminate any coding requirements.

However, because WordPress is an Open Source project it means anyone can contribute to it and their coding standards may not be perfect. This has potential to slow down your website.

Identifying plugins to remove

How do you know which plugins to remove and which ones to keep?

Pingdom and get an idea of how your website rates, performance-wise.

Once you know how long your page takes to load, disable certain plugins that you think your website could do without, then run another speed test. If you see big performance gains you can weigh up the pros and cons of the plugin and make a decision about keeping or removing it completely.

Can you code it?

This can be based on your own coding experience and if you think you can find a better solution to what the plugin provides.

I have been guilty of this in the past, using a plugin to reduce development time. This can be a great help if you are up against it but it will often be at the expense of overall performance.

If you can code it yourself you can potentially develop a solution that will reduce server requests as well as reduce overall file size. Think back to marginal gains. The benefit may be minimal, but when added to all your other improvements it can have a huge boost in performance.

I don’t know how to code

If you’re not a coder, that’s no problem these days. The internet is awash with guides on how to perform certain tasks and means even an absolute beginner can start developing.

A great place to start for any novice is Codecademy.