facebook_pixel

Web Design

Website Speed: How to make a lightning fast website

 

Website Speed is a key differentiator from standard to premium websites. Many people wonder what elements are necessary to achieve a lightning fast website. If you are interested in getting a better SEO footprint, more sales and saving costs on bandwidth, you have to increase the raw speed of your website.

Add to this that Google Search use website speed as a key ranking factor.

Most of what we will discuss in this article will surround free changes that you can implement to gain a better result. I will also touch on some paid services that can accelerate your website further.

Website speed doesn’t cost a huge amount of money until you get to enterprise level solutions if you have a small to medium sized business website you are likely to be in the same level of packages that Loudon Design use ($20.00 per month).

Website Speed: How to make a lightning fast website

1. Minification

On your website you have several types of file:

  • HTML (The bones of your website)
  • CSS (The skin of your website)
  • JavaScript (The interaction layer of your website)

In order to increase the performance of your website, you need to minify these files as much as possible.

This can be achieved through a plugin service like BWP Minify which will minify the files on the fly as you update them. If you have a static website you won’t be able to use a plugin, that shouldn’t stop you from minifying your files, though. You are able to can copy and paste your code into a minification service online for free and the tool will generate a minified version on your behalf.

Automated should be the favoured option as it takes the work out of it. There are also paid for services that include minification as part of their offering.

Key Focus: Keep your files optimised with minification, small files result in a faster website.

2. Caching

When you first look into website speed performance you will see the word Cache getting used a lot. What is a Cache and why should you be focusing on it? Caching takes place at various levels of the web:

  • Browser Cache – This is when you visit a website and your browser remembers the images, and specific details by storing small files on your computer. If you have just had a lot of work carried out on your website you will likely be hearing the web designer asking you to “clear your cache”. This is necessary because you can often see non-existent errors as the browser tries to make sense from the “stored” version it’s expecting to see again and the new version.
  • Static/Dynamic Content Cache – This type of cache is the same thing but it takes place between your server and the user requesting to see your content. There are options on how to implement a content cache on your website. WordPress and other Content Management Systems offer plugins that can cache your content.There are great paid options from companies like Incapsula and CloudFlare.

A performance service like Incapsula sits in the middle of the request.

The cache has a memory of your website’s content which allows it to serve the content much quicker, than what it would if it had to request the content from your server.

Caching is one of the great services that have come to the market in recent times, it used to be a case that minification, image compression and keeping the website to a minimum were the only techniques we could employ. Thankfully with the growth of large rich content, companies like Incapsula and CloudFlare have been focusing on how to keep the load times to a minimum.

Key Focus: Set your website up to take advantage of a content caching, this will greatly reduce the number of server requests for content and will result in a much quicker load time.

3. Hosting

Hosting doesn’t need to cost the earth, but not all Hosting packages are equal. The supplier with the fastest hosting can change at any time. I keep an eye on the league tables as who you decide to host with, and the location of your web server they put your website on has a speed ranking factor.

The Loudon Design server is based in the United States, which might surprise you as I am in the United Kingdom, a lot of the clients I work with are based in America and access the website within their time zone. The hosting company you will look different to each person.

Time to the first byte is an important part of what makes your website load fast and in many cases comes down to who you host with.

  • How fast can your server react to the user’s request?
  • How well can it handle a large burst of traffic?
  • What is the server uptime?

The better the numbers the better the Host.

Key Focus: There are always a few companies that sit in the top five positions, selecting any of these as your hosting provider will help decrease your website’s load time.

4. Image Compression

I was recently discussing speed performance tips with a non-technical business colleague and we got talking about a slider on his website, he seemed concerned over the size of the javascript file that had come with a free plugin.

The truth is that the HTML/CSS/JS are often not the concern, minification and caching of all three resolves even the worst compiled code.(Not that you should be discounting the importance of good programming), however, you are talking about milliseconds of a difference between a good and a badly written set of code files after they are minified.

Jpegs and PNG images are much larger than coding files, and one of the main areas that get overlooked. Tools like Photoshop allow you to compress JPEGs using a sliding rule, but the inbuilt compression tools don’t allow for the best level of compression vs. quality on images.

Website Speed: Panda vs. Squid

  • TinyJPG (https://tinyjpg.com/) offer the ability to compress your images online, or for a small fee you can add their extension to your installation of Photoshop, and compress the images at the source.
  • Kraken (https://kraken.io/) offers a similar service only it handles the compression on the web server for you. This allows you to upload your images and have the algorithms built into the plugin handle how to best optimise your images.

The Automated route does come at a cost, one which is well worth paying if you are adding a lot of blog content and images to your website. If you are updating your website slowly and unlikely to make a lot of changes to things TinyJPG is the better option.

Key Focus: Remember to compress your website images. Don’t always rely on tools like Photoshop to make the most optimal compression choices.

5. Content Delivery Network (CDN)

Now we are getting into the most advanced techniques of accelerating your website. Ever wondered how huge ecommerce websites can load in a few seconds yet normal business websites can appear to take longer?

There has likely been an investment made into speed and performance with the bigger websites. Similar to caching you can pay for additional services that will drastically increase the performance of your websites.

A Content Delivery Network (CDN) is where you have two sources for your content.

  • Web Server – Location of your website files, CMS and Content.
  • CDN – A separate location for the websites images or video to be stored on.

The theory behind a CDN is that it serves your images quickly by only focusing on that one task. If you ask a web server to return images, coding files, video, etc. It has to break all of those requests into a list, and it slows the website down a little for each request.

Having a CDN for your website will reduce these requests meaning you have two servers, not one to render the website’s content.

Key Focus: If you chain CDN, Caching, minification and compression you will find that your website will perform at a very optimal level. Just with these listed features and minimal investment, I achieved huge performance results for Loudon Design on web page test.

6. Cut back on 3rd Party Services

“Wait, Loudon Design returns as a “C” in one of the web page test result boxes, does that not mean you have an average result in Cache Static Content?”

If I decided to host my font locally, and not use live chat I would have A’s across the board.

Third party services always add a huge overhead to your website’s performance as to render the page you are asking the browser to look up not just your local files, but 3rd party files from other companies to render the full website.

This lookup costs valuable time, which is why you sometimes see this specific area suffer. If you care purely about having a fast website you can decide to not use 3rd party tools like intercom, zopim, google fonts, etc.

Live chat offers a brilliant return for the small impact it makes on the speed of my website. Which is why I have decided to keep it on there. Even though it tarnishes an otherwise perfect score.

Key Focus: Don’t get lost in the numbers, a slightly diminished score is well worth it for better engagement.

Why Website Speed matters

All the major providers of quality SEO information, including Google themselves, have stated that your website speed optimisation and performance are ranking factors for a website’s position on organic search. These websites can be crawled and indexed a lot faster, so it is understandable why search engines favour this focus.

If you own an ecommerce web store your customers will buy more from you if your website is fast. One of the biggest causes for a high bounce rate on your website is the speed in which your website loads. If it takes a long time your users become frustrated and will leave to try a faster option.

Most of what we have covered in this article can be achieved for free, it takes a little bit longer to make a website that performs like this, but the results are well worth the effort.

If you don’t have time to optimise your own website but are convinced by the outlined benefits feel free to Get in Touch. Loudon Design love performance, and are more than happy to help you get setup with a new lightning fast website, or optimise the one you have already.