HOW TO SPEED UP YOUR WEBSITE

The speed with which your website loads is crucial to website visitors, to Google and ultimately to your conversions.

Funny enough, we find a lot of website owners who aren’t aware of the importance of having a speedy website. Having a fast website is essential to the success of your website and ultimately your bottom line.

What is the impact of website speed on users and conversions?

A conversion is deemed when a website visitor completes a successful action on your website, for example: purchasing a product, making a booking, requesting a quote or submitting an enquiry.

Conversions are essentially the main goal of any website and speed has a big impact on these conversions.

Simply put, a slow website frustrates users, causing them to have a negative experience which either results in them sticking around with a “bad taste in their mouth” or to abandon the website entirely.

This is terrible news as potential customers are literally walking out of your online store. Therefore a whole host of conversions are lost, which impacts sales and the bottom line.

How your website speed influences Search Engine visibility

Google and other search engines take website speed into consideration as a factor when ranking sites in the search engine result pages (SERPS). Your website load time can influence how easily users can find you (or not find you) in the first place.

Over the last few years, there has been a large surge in people using mobile devices as their primary device. In that, Google shifted its focus to a mobile-first indexing approach.

This is where site speed becomes vital to the long term success of your website. Remember we don’t all have access to WiFi which means we rely on 3G/4G. If your site takes too long to load you eat valuable bandwidth and for the most part cause a user to leave your site which influences your bounce rate.

This all combines to show search engines that your site doesn’t provide a positive experience to the user and thus rank your site lower in the results page.

Further, for every extra second that your site loads, your conversions decrease an average of 4,42% for every extra second it took to load the site. Can you really afford that?

Source: Cloudflare - https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/

What is a good website speed then?

According to Google the best practice for really good site speed is between three and five seconds.

There are many factors that influence this such as the size of the website’s pages and the content on the page, how the data is loaded and where it’s loaded from.

While this is Google’s recommendation, almost all sites will fail to load within these times.

Typically when testing site speed we look at two tools that help give us insight into what the load times are for a site but also what may be affecting these load times. These tools are:

GTMetrix - https://gtmetrix.com/

Google Pagespeed Insights - https://developers.google.com/speed/pagespeed/insights/

Both these tools will highlight where there is room for improvement and help you speed up your site.

Here’s how you can improve your website speed

Now that you know that having a fast website is crucial to your business, search engine visibility and conversions, you most likely want to know how you can make it faster?

There are a number of reasons why your website might not be as fast as it should, some may or may not be applicable to you.

Below are a number of factors that can be done to improve website speed and improve your site’s performance.

1. Optimize images

Images are part and parcel of any website. They’re crucial for showing users your products and other aspects of your business in a visual manner. However, they can also play a major role in slowing down your site. Images can often be very large in size, meaning that they take longer to load, in turn making pages load slower.

Obviously removing these images is not an option, therefore optimising the images is the only real solution here.

The best way to optimise images is to reduce them to a reasonable size (image cropping) in terms of the image dimensions, for example, an image that is 6400 pixels wide and 3600 pixels high can be resized to 1600 x 900 px.

The other way to further optimise images is to compress them. Image compression can be done with programs such as Adobe Photoshop. You can compress images to a much smaller size but still ensure that the image is of high quality and there is no or very minor visual degradation.

Ensuring you use the correct image format is also key to improved performance, for example only use GIF images where you want to have animation within your image.

Choose between JPG and PNG file formats for your images, the difference is that PNGs are often slightly bigger with little noticeable difference in quality.

2. Minify your Javascript and CSS

Your website loads many different files behind the scenes, which can contribute to slowness especially if these files are big and bulky. Some of these types of files are Javascript and CSS files.

A technique to make these files smaller in size is to “minify” them. Minifying a file involves removing unnecessary formatting, whitespace, and code.

Seeing that every extra and unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, and indentation. This ensures that your pages are as lean as possible.

There are several ways to minimise files, you can use a web development application or you can use an online site such as:

https://javascript-minifier.com and https://cssminifier.com

Below are examples of javascript that is before and after minification. You can clearly see how the minified version is much smaller.

Original Javascript:

Minified javascript:

function js_dropdown(e,r,t,n,a){var s="";for(var l in t){s+='<option value="'+l+'" '+(l==a?'selected="selected"':"")+">"+t[l]+"</option>"}var i="";return-1!=n.indexOf("required")&&(i="select-required"),"<label>"+r+'</label><span class="select-wrapper '+i+'"><select name="'+e+'" class="'+n+'" title="'+r+'">'+s+"</select></span>"}function find_int_value(e,r,t){var n=!1;for(var a in e)if(e[a][r]/1==t/1){n=a;break}return n}

You can clearly see from the above minification that the new file is much smaller than the original, which will load quicker.

3. Remove unnecessary libraries and plugins

Libraries and plugins can be useful to a project by adding extended functionality. This, however, does come at a price in terms of the speed it takes to load these additional libraries and plugins.

It is very easy to find and install pre-built plugins and libraries, without considering the potential negative impact.

You really want to have a lean and fast website that loads only the absolutely necessary libraries and plugins. We do encourage all libraries and plugins that aren’t used by removed, to reduce load speed and improve the site’s performance.

This scenario of too many unutilised libraries and plugins is often seen in WordPress projects which by default come with a plethora of these items pre-installed.

It is recommended to evaluate the plugins and libraries you have installed on a regular basis, removing ones that are not needed will improve the overall speed of the website and make maintenance easier too.

4. Using a CDN

A CDN, which stands for Content Delivery Network or Content Distribution Network, is a geographically distributed group of servers that work together to provide fast delivery of Internet content.

A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

Besides the server that hosts your website, you can also make use of these CDNs to decrease load times to your visitors.

When your site experiences high traffic volumes, the processing time of each request increases, ultimately slowing download times for all visitors and requests.

Users who are further away from your server, for example, if your website is hosted in South Africa but the visitor is from the USA, load times are further increased as the information has a further distance to travel.

A CDN can be the solution to these issues.

With CDNs, your site is cached on a global network of servers. So when a user browses your site, they are routed to the closest server to their location. There is no difference in the content that is served to the end-user, besides the improved speed.

Platforms such as Cloudflare are useful when wanting to integrate a CDN into your websites or web application.

The time to implement a CDN can vary depending on how simple or complex your website or web app is, however the benefits down the road from a speed perspective are definitely worth it!

It is important to note however, a CDN is pretty useless if a CDN server isn't set up in the country you're targeting.

For example, if you look at the map below, this is where AWS Cloudfront servers are located. If your target market is just for the people of Ghana then it would be much better to get a locally hosted server there because the nearest point for them is in Kenya. It would be the same if you hosted your site in Kenya but you're accessing it from Ghana. The closer the server is to you the faster the website will load for you.

5. Enable Web Browser Caching

The first time you visit a website, the web browser downloads the HTML document, stylesheets, javascript files and images before being able to view and use your website’s page.

Now that the website is loaded, many elements on the website’s pages are stored on your hard drive in a cache or temporary storage. Meaning that the next time you visit the same website, only a few elements need to be downloaded via HTTP for subsequent visits. This is what we call web browser caching and can shave off time when users revisit the site, making the site load faster.

To take advantage of web browser caching, you need to add certain lines of code to your .htaccess file which tells the web browser, what to cache and how long to cache it for.

6. Redirects

Redirects impact site speed in that they are having to use additional resources to download and serve the correct page. The more redirects are found on a page/website the slower it will become over time.

Try and reduce the number of redirects by only implementing them when absolutely needed like a broken 404 page. If you can update a page without redirecting it, rather go that route. It can save you precious milliseconds.

7. Database indexing

Bigger and more complex websites and web applications tend to make use of highly structured and large databases. As the amount of data in the database grows, you may notice a speed degradation due to this increased amount of database records.

A best practice that is often overlooked when designing and building databases, the indexing of the databases. What this entails is creating indexes on certain database tables to allow the database to lookup information through queries much faster by making use of these indexes.

There is a science to doing this correctly and over-indexing a database or incorrectly indexing a database can have the reverse effect.

However if done properly, this will make querying data from the database lightning fast which indirectly speeds up the website or web application.

8. Using embedded video

Websites that house videos should consider using a 3rd party video service like Vimeo or Youtube, to speed up the performance of the website.

Playing videos that are hosted on your own server have many disadvantages such as requiring loads of space to store the videos, playing these videos to your visitors will likely end in a negative experience with the video pausing and buffering every few seconds, simply because your server has limited bandwidth and not ideal for rendering video. This will only slow down the site and frustrate your users.

Using a third-party service allows you to save on space as you don’t need to host the video files, it’s fairly easy to implement the embedded video players from these services and will load the video faster.

9. Use of a Javascript framework

When it comes to bigger and more complex websites and web applications, which offer loads of functionality and features to their users, there should be a strong consideration to use a Javascript framework for the front-end rendering.

Javascript frameworks have become quite popular over recent years and there is a reason for this: speed and user experience.

Angular and React are examples of these frameworks, which provide users with a great experience when using the website/web app, purely due to the speed with which pages and elements load. Slick animation and movement of on-page elements can be done fairly easily with these frameworks too, making them fun and interactive, without compromising on page speed.

10. Compression

When it comes to compression this is a handy technique to improve speed. You can make use of either Deflate which is an option readily available by Apache or you can make use of GZIP which has much better compression but needs to be installed separately on the server - but most PHP enabled web hosting would have this installed by default.

So what these technologies do is, instead of sending raw data to the browser it sends the data in a compressed format like you would zip files to make them smaller in size before sending it to someone.

Now that they are smaller, they can be sent faster and improve the speed and performance of the website.

11. Server response time

Server response time is the time that passes between a client requesting a page in a browser and a server responding to that request.

We ultimately want to achieve the lowest response time by doing the aforementioned solutions.

12. Mobile optimisation

As more and more people browse using their mobile devices, a bigger consideration needs to be given to how websites load on these devices and how quickly they load.

Websites are developed responsively meaning that they are built once but can render correctly on the device with which it is accessed. Therefore you won’t find different versions of the website for desktop and mobile, there is only one version.

However, seeing that mobile traffic to websites is ever increasing, we need to ensure that mobile versions of the website load super quickly.

This is where mobile optimisation comes in. Through clever coding, we are able to determine what shows and what doesn’t show on the mobile version of the website. For example, if you have a really big horizontal image that is shown on the desktop version, we may want to exclude showing this as it will be too small and won’t render properly due to the limited screen size.

Further to this, we can optimise other elements for mobile device screens, making them load faster and in the appropriate size, therefore reducing the amount of data that’s loaded.

To end this off

Having a fast website is good for your visitors as it provides them with great user experience, as they can interact with it and find the information they need quickly. They don’t need to wait for the website to load and get frustrated while waiting.

There are other great things that come with having a speedy website, Google will love that your website loads fast and will contribute to improving your website rankings in the search engine results once a search is done.

Fast websites also contribute to the goal of your website AKA the conversion. This can be either an online purchase, a booking confirmation, an enquiry or a quote request.

It might be tricky to identify what exactly is slowing your website down but this is where a strong web development partner can be useful and assist in identifying the problematic areas.

Once these areas are determined there are various things that can be done to improve the speed of the website as highlighted above.

Speed may initially appear not to be such a contributing factor to a website’s success but this should not be taken for granted. Ongoing improvements are recommended to keep bolstering the speed of the website.

If you realise that this is of crucial importance to your website but need a technical team to assist you with the speed improvements, we’re here to help - contact us today.