Ditching bloat: How this blog gained incredible speed

---

This website previously used a fantastic tempate but it came at the incredible cost of "bloat".

The point of this site was never to wow and amaze aesthetically. It was meant to provide users with useful information and allow them to move on. In fact, that should be the point of any blog, IMO. Being aesthetically pleasing should be second in line when it comes to conveying a well-thought out expression through a blog post. 

With that in mind, I looked at how I can completely eradicate the bloat on this site but to do so, I needed a benchmark. I decided to rely on good ol' GtMetrix and got this initial result:

Total page size: 4.61MB
Total requests: 61

The grading is a bit unfair because it is being tested from Canada and the server that ardi.co.za is hosted on is located in South Africa. Nevertheless, the result is still very poor. I mean, users only start to see anything after 3 seconds and can only really start doing anything after about 6 seconds. That's not good at all! We want clients to see something after less than 2 seconds.

I decided the best way to go about this is to remove everything: all scripts and CSS, and then replace it with the most minimal CSS framework I can find. I looked at various frameworks: Milligram, PicniCSS, PureCSS, Bulma, etc. I even found a treasure trove of options here.

After reviewing several, I choose Skeleton. It's certainly not the best but it had what I wanted:

• Small file size
• Responsiveness

It requires only the import of two files:

  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="skeleton.css"> 

The first file is 12 Kb in Size and the latter is 8 Kb in size, giving us only a 20 Kb usage. But how much is that after gzipped compression? The answer is.... 

skeleton.css: 2.65 Kb
normalize.css: 2.54 Kb

That means a total of only 5.19 Kb!

After adding Skeleton to the project, I ended with this final result:

Total page size: 3.13MB
Total requests: 34

That's a saving of about 1.5 MB and 27 requests! Definitely an improvement but still not quite what I want. I'm going to fiddle a bit more and see if I can get the number of requests and the total size down a bit more. 

• UPDATE: I am not saying the Porto theme is bloated. It is an extremely versatile theme and I use it on a variety of websites. What I mean by bloat is that for ardi.co.za, I don't need 99% of what Porto has to offer. This is a very basic blog which should primarily be fast for those visiting the site and not necessarily look as amazing as, for example, an online shop.
  
• UPDATE2: I managed to get the score to be even better but this was mostly by compressing images. I'll spend some more time at a later stage to see if I can get it to be even faster. The biggest change I believe I can make is to actually generate thumbnails of the blog preview images. But for now, this is where I am at:
  
  
• UPDATE3: I decided to complete the Thumbnail Generation code. All thumbnails are now resized and the smaller version is shown where thumbnails need to be displayed. This has given me a nice boost on GtMetrix:
  
  
  Total page size: 755 KB <--- a whopping 83.6% down from the 4.61 MB that I started with
  Total requests: 27
  
  The initial 1 second lost is likely due to the server connecting from London to a server in South Africa. So the site likely loads locally in 1.6 seconds. GtMetrix, if are reading this, it would be really nice of you to add South African servers to the mix. (Give Namhost a shout if you need amazing local South Africa hosting)
  
  To really conclude whether speed is optimal, I need to either find a better tool to test with, or I need to host my site on a server in the US/London. For now, I'm not going to bother. Perhaps at some time in the future I will come back to this.
  
• UPDATE 4: As a final tweak, I added browser caching. So after the first load, most things will load insanely fast. I think that's a wrap!
  
• UPDATE 5: I decided to remove Google fonts completely to see if it will make a difference, and what do you know, it does:
  
  I am still losing 1 second but it looks like a part of it is due to a redirect. Let's see what happens if I use the direct URL https://www.ardi.co.za/, instead of ardi.co.za.... and unfortunately, not much of a difference. Nevertheless, it is amazing what a difference it makes when you remove those fonts. For now, I'll stick to not having any special fonts but will certainly look at a way to add fonts at a later stage but when I do, it must not impact speed.