site-logo

Why your website’s loading speed matters.

Every second your site takes longer to load you are losing new potential clients. It has been stated that about 60% of your new potential customers abandoned a site after 3sec. This is why your website’s loading speed matters. Especially when so many clients these days use mobile devices on sometimes slower connections. You see SEO can only help so much… if your site is slow and not following recommended requirements set out by the search engines it is going to be penalised. This is not marketing, this is facts. There is the reasoning behind this.

So what can you do about it?

There is a whole optimized process you can follow. I will explain in more detail what each process beyond the introduction.

Local Caching of your website pages

So the content of your website page is delivered as a static copy that is fast to read by the internet client, called the browser.

CDN

Content Delivery Network. Makes clones off your website and distributes it to servers in other regions of your country and also across continents. Everything is optional and you can be fine-tuned to serve your website to regions of your choosing.

Website Optimising

None of the above is going to be truly effective if your website is not optimized to search engine requirements. This includes optimizing images, minifying JavaScript & CSS files. Setting expiry headers on content and allot more… The reason this has become a fine art to perform and is a whole process that can take a few hours to a couple of days or even weeks to perfect depending on your budget.

Server.

Whatever you do, if you are a business DO NOT USE a shared hosting option. There is a reason why you get what you paid for. A shared hosting solution is where many websites live on the same server to share the same CPU, RAM, Hard Disk Drive and more. Not to mention the same bandwidth from that server. So if one site is heavily occupied, all the other sites are going to suffer and compete for the remaining resources. Not to mention security issues, because if a hacker gains access to one website he has all the other websites to play with. That is why its called “SHARED HOSTING”. You are far better off with a VPS, Virtual Private Server or dedicated server not only for performance but security too!

What really happen behind the scenes every time a webpage loads.

Just a quick explanation of how a CMS website works so you can get an idea what happens behind the scenes.

  1. Every time the client, your browser, access a domain name for example “mysite.com” the DNS server called the Domain Name Server gives the client an address book to tell the browser where the site is located.
  2. The client then connects to the website on IP port 128.0.1.2 for example and looks for the folder where the website’s files are. The server also has an address book to route traffic to a folder coming from a certain domain name.
  3. The browser then starts to read the index file that the server offers it, but there is more. Since a CMS website is dynamically rendered every single time you access it.:
    1. It needs to render the layout(HTML), style the layout (CSS), add features and effect(JavaScript: like Google Analytics, Menu effects, Facebook feed).
    2. Load the images from their locations.
    3. Fetch the content from the database and render it on the page in their place holders called DIV blocks. Div blocks is HTML.
  4. Some more process…

I am going to stop here so that we don’t get too technical. This is what a basic CMS website needs to perform every single time on every single page load. It is a lot of work and a lot of information that needs to be processed and the server only has a few seconds to process this data + it needs to be sent to the browser + the browser needs to parse this information.

Then Search Engine like Google comes along and measure you on the time it takes to process this in their test performance platform. If you are weighing in at 8+ seconds the Search Engine Server, the non-human entity, that works on predefined algorithms, is going to think you are not in this “local”, location where you want to serve these pages and going to move you down the SERP rankings. It is only fair that businesses and websites located in their local location/region requires preference above you.

This is why CDN services were introduced. To tell a search engine like Google.: “hey I might not be in these locations, but my services stretch across borders and I have an audience/clientele here too”.

So what is a CDN?

A Content Delivery Network called short for a CDN can help your site tremendously especially if you are in a remote location or if you or your clients are very far away from the server where your website is hosted.

A CDN takes a static copy of your website. Like a clone. Called a cached copy. It then distributes that copy worldwide to servers located on different continents(countries) and in different regions/areas.

So in return when a customer/visitor access your site they will get a local copy in a split second. Where if the browser grabs a copy from an international server or if that server is located in another region in the same country, there would be a latency delay called lag if you don’t use a CDN.

Like my site is running on a very fast VPS server in the UK, but I am down here in South Africa, Cape Town. Just the latency loss for a browser to contact the server without a CDN or even with any content takes about 900-1000ms. THAT IS A WHOLE SECOND! That latency is called the TTFB, Time To First Byte. The time it takes for your browser to start interacting with the website’s code.

This is not just for websites located on a server in other countries. Take for example sites located in the USA, New York. For a customer located on the West Coast, they will also experience a big latency when they access your website without a CDN. Making your site appear slower. Services like Google will take note and will rank your site lower in the SERP(Search Engine Result Page), because sites closer to home would get preference. Make sense right? That is a whole 1sec lost and then the server still needs to return the full website to the browser. So now your site has less than 2 secs to render all the content in a customer/user’s browser.

Website optimization in a bit more detail.

This will include things like.:

Images

Are your images correctly sized to display at the correct dimensions it should? For example, if the container where the image is located is only 250 x 250 pixels and you use an image that is 2000 x 2000 pixels that is overkill. It is not displaying at the correct dimensions(disregard search engine requirements) and is very heavy. So where that 250×250 pixel image could have been 25KB in size its now at 800KB. Just to make it clear. If you have an internet connection of say 800KB/s then it would take 1 second to load that image, where it would have taken a few milliseconds to load if it was smaller. Actually, it is a bit more than 1sec, a few milliseconds extra, because there is still a handshake and handoff that needs to take place.

JavaScript & CSS

JavaScript is a scripting-coding language that does all the fancy effects on a site, but allot more and it can be built in a very complex program. I am not here to talk about what JavaScript can do. The thing is, it is been used extensively by websites these days. So there are hundreds to thousands of line so code for any given website.

So the CSS is the scripting language that does all the fancy styling on your site. The colors the fonts and so forth.

Both JavaScript and CSS scripts require processing via the browser. So if there is a lot of JavaScript and CSS to process this will also affect the load time of the site. But that is not a big problem. It is how the payload of these is delivered to the browser. For example, a standard section in a CSS file will look something like this. .something {
xxxxxxxx;
xxxxxxxx;
xxxxxxxx;
xxxxxxxx;
xxxxxxxx;
}

//. see all this blank space above on the right side? This makes your code files allot bigger.

The problem is all those spaces next to the XXXXXX that is called white space. So every command is written on a new line. Good for humans, slow for computers to understand. To speed up the process we use something called minifying. Where it takes the code above and compress everything to one line. The computer understands it perfectly, but us human coders find it difficult to read.

.something{xxxxxxxx;xxxxxxxx;xxxxxxxx;xxxxxxxx;xxxxxxxx;}

So compressing called minifying remove all those blank spaces. Now imagine that example and multiply it by x50 000 or even x100 000 … suddenly there is ALLOT of space been waisted.

This process can also be achieved optimizing the code manually, caching system or CDN.

Note! Sometimes there is a problem with programs that minify the code and break it at the same time. So these automated solutions don’t always work 100%. Since a CDN does give you the option to do it automatically it first needs to be tested! That is why you going to need a developer to iron out these issues for you.

Plugins!

Plugins are like little programs or extensions to programs. It brings more features to your site. All plugins become part of your websites as one big program at the end of the day.

If you are running a CMS website like WordPress and you have a ton of plugins installed, then you are adding bucket loads of features that need to be processed by the server. The more plugins you have the longer it will take for the server to process all of these.

That is not the only problem. How well are some of those plugins coded? In other words how well is a plugin optimized? One plugin, if not properly optimised can slow your site down and add as much as 10-15sec to the loading timeline. I have experienced and seen this first hand. The solution is to find an alternative plugin that does the same for the client, fixes the current one or creates a custom one that only does what he/she requires.

Plugins also do not sometimes play well with other plugins especially if some plugins have incompatible JavaScript code differences. This is the best way I can explain it, but we as developers know what the true problem is and why it happens.

The problem with most plugins is that it adds more features than you’re requiring and don’t need. These features need to be processed by the server and loaded into memory. So for any big plugin, all the features are loaded no matter if you require them or not.

The point is you would need to perform an assessment on the plugins you use and their performance needs to be tested. Yes, there are tools for that. It does not help you choose the cheap route by installing a plugin to get a feature you want to save on development cost. You will be penalized on performance if you don’t choose wisely. Everything comes at a cost. Mostly taking the cheap route. That is why a good build and optimized websites will always outperform the competition on any given day. Rank higher, get more sales, earn more revenue.

Website Performance Optimisation

Website Performance Optimisation is an art of its own. It takes time to perfect and good practice needs to be in place after it has been optimized else you will go back to square one.

You don’t have to splash out all your money on the first run. Doing some basic optimization could make a huge difference and the search engine robots will take note of this. Just a basic optimization can save about 5 – 20sec! load time on your site alone. The real work comes in the 3 – 5 second load time and the art and experience required comes in at 100ms – 2.9sec.

Dynamicly Created Static Sites. – Optional

CMS sites will always be slower than a custom build a static site or to put it the other way around. A good build custom developed static site would outperform any CMS available website any day. But these sites are much more expensive too developed. They have a lot more positives than CMS sites to name a few, they are much, much more secure, much faster and rank much better in SERPS for desktop and mobile performance. They cost more because they require much more time to developed(build). But once delivered, they will outperform your competition and will pay for itself in a very short term. The returns on these custom sites are just much greater than an available CMS or SaaS(Software as a service) solution.

Not everyone can afford a custom build a static site, that also interacts with a database and services like a CMS site. Mostly reserved for big businesses and corporates. Maybe… as I can develop one for much ‘cheaper’ than what you are going to pay an agency if you come directly to me. Hey, I am the one-man-do-it-all, Full Stack Development, literally for many years now.

Closure

The point is every website requires optimization, you can’t use it as is, “just like it came out of the box”, and expect it to rank well in SERPs. It requires serious attention and aftermarket performance optimisation to perform well and to be able to beat the competition. There is so much work that goes into site optimisation and it takes years and years of experience to master this skill to get sites to perform load times of under 3 seconds globally. It is not just a skill to master, but you need to have a very good understanding what happens in the backend, how services talks to each other and how code processes function. That is why I strongly encourage you to make use of a developer than to tackle this on your own, because if you do not do it right and use the wrong settings or wrong commands you can make it even worst than it currently is.

The internet is one big speed race track, how well does your car(website) perform currently?

GO BACK : BLOG-PAGE