Case Study: How I Reduced my Blog Loading Time by 60 Percent

I have been blogging since 2012. I started and sold ( closed few too ) various blogs and then focused more on niche blogging.

I manage Codeforgeek.com which is a programming blog where I post tutorials, tips and news mostly related to Node.js, databases and anything related to programming.

Codeforgeek is running on Wordpress and used to take approx 7 seconds ( Including ads time as well) to load which was killing the SEO and user experience. I managed to shrink it down to approximately 2 seconds on an average.

This case study is all about how I did it and you may replicate it on your website ( Of course on your risk ;)). My friend Rahil replicated same on his blog Ciphetrick and it works quite well.


Pointing out issues

This was crucial. I did Google search to find out what possibly could be wrong and most of the sites on page one of Google suggested the following:

  • Use good host.
  • Use a lightweight theme, like less than 2 MB.
  • Use fewer plugins, less than 10.
  • Use CDN, all recommended Cloudflare.
  • Use Caching plugin, W3 Cache or WP Super cache.

I did all of that, I use DigitalOcean VPS as my host.

I use Nginx to reverse proxy and cache as much request I can.

I use Redis with Wordpress to cache the common metadata queries.

I deleted few plugins.

I added CloudFlare as the CDN.

I configured WP Super cache with Memcached.

And still, my loading time was approx 6-7 seconds.

So what was wrong?

In order to find out, I used this tool. It's called webpagetest. This is a tool which is a hidden gem for website speed testing.

After running my test, I got this result.

There was A grade for everything except "First byte time". I didn't know what it is but I was sure that this is something which I need to shrink down.

Solving First-byte issue

In order to solve this issue, I first needed to know what it is!

Technically, Time to the first byte is the time taken by your Server to send first response to the client or CDN provider.

Now, Wordpress is a complex software. There is a lot of PHP scripts and MySQL queries involved to send the first byte to the client.

But I was sure that the with the setup and configuration of my server, PHP scripts won't be an issue. I did run few test scripts to make sure it's working properly.

Then I moved towards MySQL, optimized all the tables and turns out it was not the issue either.

So the only thing was left, is the SSL.

During my research, I came to a discussion thread on some forum where one guy mentioned that PHP and SSL don't really work well together and you need to tune it a bit.

Optimizing SSL and PHP

Before optimizing both, I first enabled the HTTP/2 in Nginx.

Open up your main Server block and add this code.

server {  
  listen 443 ssl http2;
  #rest of your config here
} 

Next, set up the Fast CGI cache. This you need to enable in nginx.conf file.

fastcgi_cache_path /etc/nginx-cache levels=1:2 keys_zone=phpcache:100m inactive=60m;  
fastcgi_cache_key "$scheme$request_method$host$request_uri";  

Next, open up your Server config file and add this code in HTTP block.

location ~ [^/]\.php(/|$) {  
 fastcgi_cache phpcache;
 fastcgi_cache_valid 200 30m;
 fastcgi_cache_methods GET HEAD;
 add_header X-Fastcgi-Cache $upstream_cache_status;
 #rest of the config
}

Restarted the Server.

sudo service nginx restart  

Then ran a speed test and this was the result.

Notice the loading time and first byte time. I reduced approx 60 percent of the loading time.

Next, I removed caching plugin and some image optimization plugin and loading time shrink down to less than 2 seconds.


Summary

I am sure you can relate this case study with your blog or website. If you need some help to fix loading time issues, please contact at [email protected], would love to help!