The speed with which your website loads is crucial to website visitors, to Google and ultimately to your conversions. Although many website owners don’t seem to be aware of the importance of having a speedy website, it 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 inquiry.
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 abandoning 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 by an average of 4,42% for every extra second it takes to load the site. Can you really afford that?
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 and 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 of 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 your site’s performance.
- Optimise 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, 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 pixels.
The other way to further optimise images is to compress them. Image compression can be done with programmes 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.
- 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 an online site such as:
https://javascript-minifier.com or 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.
- 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 to be 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.
- 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 for 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.
For 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 applications.
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, that 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 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.
- 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 tell the web browser what to cache and how long to cache it for.
- 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 to 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.
- 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 the increased number of database records.
A best practise that is often overlooked when designing and building databases is 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.
- 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 has 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 is 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 they will load the video faster.
- 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 of using 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.
- 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 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, they send the data in a compressed format, like zip files, to make them smaller in size before sending them to someone.
Now that they are smaller, they can be sent faster, which improves the speed and performance of the website.
- 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 implementing the aforementioned solutions.
- 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 they are 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 at the appropriate size, therefore reducing the amount of data that’s loaded.
To end off
Having a fast website is good for your visitors, as it provides them with a 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, a.k.a., 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.
.
