Have you noticed that your website is taking more than 3 seconds to load? Are you noticing that your bounce rate is on the rise? These are common issues that we see all the time, and thankfully it only takes a few quick fixes to make a huge difference.
Statistics show that the longer your website takes to load, the more visitors will bounce (leave the website). In just 8 seconds, you’ll lose almost half of your visitors. What are the
implications for your marketing performance and for the business itself.
Of course, load time is frustrating for users, but websites are now being punished by Google themselves for any site which is deemed to have a poor page loading time.
WHAT IMPACTS LOAD TIME?
There are two factors which impact load time.
1. FILE SIZE
The total file size of all your website code, images and videos. All of this needs to be downloaded when a new user visits your website. Keeping this as small as possible will reduce the amount of time needed to load the page.
2. SERVER LATENCY
Each time your browser requests a file from your server, there is a minute delay called latency (or lag). The further away you are from the server, the longer it usually takes. Latency ranges from 1 millisecond (if you’re practically in the same room as the server) to 500 milliseconds if you’re on the other side of the world. It might not seem like much, but this latency occurs for every single file on your website. If you have 10 files and it takes 500 milliseconds to request each one, you’re adding 5 seconds load time to the website. Imagine if you had 100 files...
So how do we fix it? I have outlined five quick fixes that will give you big improvements to your website speed. They will improve your user’s overall experience and reduce that ever-increasing bounce rate; converting your precious users from anonymous browsers into healthy prospects sitting in your CRM.
FIX 1: IMAGE OPTIMISATION
Have you ever been on a website that takes forever to load and images just start appearing from nowhere? This happens because large images and/or videos are being used instead of optimised versions.
Images and videos usually consume the largest share of file size, and so by ensuring your images are optimised you can see the greatest gains in website load speed.
Tools such as
PageSpeed Insights will highlight any images that need to be optimised. As a rule of thumb, no image on any page of the website should be more than 150kb. Wherever possible, try to upload all videos through youtube or another 3rd party provider to help increase your bandwidth.
FIX 2: LAZY LOADING CONTENT
This fix is great for pages with lots of content below the fold
[1] Lazy Loading is a technique which only loads content on the page once the user has scrolled to that particular section. In other words, it loads on-demand rather than loading all the content at once. Therefore, the website only needs to load content that’s immediately visible above the fold
[2] which drastically reduces the amount needed to load.
FIX 3: LEVERAGE YOUR BROWSER CACHE
The browser cache is a store of files from websites that you have already visited. If your browser cache’s a file, it doesn’t need to download it again every time a new page loads. This makes it much faster to view subsequent pages on your website.
FIX 4: USING CDN’S
CDN’s help address the problem of latency. If a file is held on a separate server, it can be downloaded in parallel to files on the main website server. This means you aren’t at the mercy of high latency.
At the same time, CDN’s enable you to request files from servers that are closest to you, thus further reducing latency.
If your website has a variety of images and/or videos throughout, it will benefit significantly from a CDN, as none of these would actually load from your server. They, in fact, would be allocated a space elsewhere far from your already stretched hosting environment where they can be called upon immediately.
FIX 5: MINIFYING CODE
Although this sounds highly technical (and to an extent it is), Cascading Style Sheets (CSS), Javascript (JS) and HTML files are the thousands of lines of website code which make your website look pretty and function interactively. Although these codes are essential for absolutely every website, they do come with issues if not created carefully.
These pieces of code are written by human beings and therefore need to be legible to us. The downside is that legibility requires longer written lines of code (with longer names and spaces). Machines don’t need these things in order to understand what to do. For example, a piece of code named “helloWorld = b” can be reduced to “a=b” for a machine. This is a saving of 79%.
You can therefore reduce the file size of these files without any detriment to functionality. I recommend you use a tool such as Minifier to do this for you. Just be sure to keep a backup of the original file, so that a human can edit it again in the future.
Glossary
[1] The fold is the line on the website underneath which your content is hidden when the page first loads. Below the fold means content that is off the screen on first load.
[2] Above the fold means content which is immediately visible when the page loads.
