FlatTrendz.com was started around 10 months ago. I created this site with my colleague Navin Nagpal using WordPress and a custom theme. While most of our readers are designers like me, I still wanted to share the technical aspects of maintaining this WordPress site and how I managed to optimize it to handle more traffic and also make it load faster without spending on expensive managed WordPress hosting.

In last few years managed WordPress hosting companies are becoming popular as they offer a hassle free approach to setting up and running with a WordPress site. They take care of site speed, optimization, security and backup. But this comes at a premium, ranging anywhere from $ 25 and going upwards as far as $ 100 if your website gets even 10,000 page views a month. (Yes they do charge based on pageviews)

Pingdom Report
– Pingdom Report before any optimization

After trying an unmanaged VPS, than a Managed VPS followed by managed WordPress hosting, I have come back to my shared hosting account for the simple reason that using just 1 plugin (WP-Rocket.me) and CDN service (MaxCDN.com) I was able to get the 1 second page load time and maintain control of my site at one tenth the cost of managed WordPress hosting.

Pingdom report after optimization
– Pingdom report after enabling all options in WP Rocket

Before I discuss what I did to optimize this site, let’s talk about the common issues most WordPress site owners face:

  1. Time for connecting to your server
  2. Dynamic sites take more time than static sites to send the first byte. This also results in increased overall page load time and only worsens resulting in performance issue when multiple users are visiting the site at once
  3. Slower speed for users furthest from the location where site is hosted
  4. Lack of control in serving the right sized image or retina version.

While I may have not found an effective solution for all of the above problems, this approach enabled me has allowed me do maximum optimization of my existing resources. Until your website outgrows and even these basic optimizations don’t help only then it’s time to get a VPS or managed host. So let’s address the above issues.

 01. Time for connecting to your server

To be able to make quick connection to your server, the most important thing is using a great DNS company. Using name servers provided by your host is not only inefficient but it also makes you rely on 1 company for everything.

Solution: CloudFlare.com

CloudFlare.com is one service I absolutely recommend to all site owners. The free version offers more than necessary tools for average site owner. It only takes a few minutes to do the initial setup, after which, if in future you plan to change your hosting, your domain will point to the new server in matter of minutes and not hours.

List of features CloudFlare offers:

  • DNS Hosting
  • Security: CloudFlare offers security so malicious users could be blocked right before they even get near your website.
  • Optimization: CloudFlare offers basic optimization and compression to increase the speed of your website.

Even if you stop your optimization work just after using CloudFlare, you still would be able to see a considerable performance difference. This helped me reduce page load time by half a second, but it was still not enough.

02. Reducing time to send the first byte, overall page load time and maintain performance even when multiple users are visiting the site at once

Dynamic websites like the once built using WordPress need to connect to the database to retrieve data, perform different operations to put together a web page based on a theme and multiple plugins. This results in even a simple blog taking more than 1 second to start sending the first byte to the user’s browser. Add this to the time to load multiple images, CSS & JavaScript files, and your website would easily take another 4 to 5 seconds to fully load. CloudFlare is great, but your website still needs to do a lot of things to send a page to the user.

The Solution: Caching Plugin like WP-Rocket.me

WP RocketThe free and most widely used caching plugins for WordPress are W3 Total Cache & Super Cache, but after trying them for years, I was lucky to come across a new premium caching plugin “WP Rocket” developed by a company from France. The reason I chose this plugin was due to its well thought options, simple interface and awesome support. Once you activate the plugin and enter your license code, caching starts automatically. At this point of time without activating any other features your website will start loading much faster.

A caching plugin will create a static version of your website which results in incredible reduction in the time to serve the first byte. By creating static copies, the server is reduced which helps get the most out of your hosting account. By using minification & merge option for HTML, CSS & JavaScript, the number of files required to render your website are further reduced which has a big impact on the overall page load time.

Time to load first byte
– Time to load first byte before and after activating WP Rocket

Some of the features of this plugin:

  • Simplicity: This without exception is one of the simplest and straight forward caching plugin in the market. The options are neatly organized in tabs and every aspect seem to have been created with end user in mind so you’d find proper descriptions in plain English next to every option.
  • Cache Clear Time: The options allows you to set a time period after which the cache will automatically be cleared.
  • Minification & Concatenation: This option similar to other plugins allows one to choose whether you wish to either minify the HTML, merge & minify CSS, merge & minify JavaScript files or do all.
  • Lazy loading support: Lazy loading is a very important tool for larger websites especially similar to ours with a lot of image based content. With built-in lazy loading only the images within the visible screen area are loaded, this feature alone is responsible for our fast loading site. And it just takes 2 clicks and no code modifications to activate this feature.
  • CDN Support: This option allows easy integration with popular CDN services to load your content from globally distributed servers of the CDN provider instead of yours. This reduces the load on your server resulting in faster page load time.
  • Affordable & comes with exceptional support: For $39 one time charge which is same as the monthly cost of a managed WordPress hosting provider, you could get a simple to use product that does what it promises to do. The support has been exceptional so far and every single question I asked was answered promptly and satisfactorily by them. (One of the founders, Jean-Baptiste even went further than that and helped me setup a VPS, so I might be biased for them from this point on). While I hope you do not start expecting these guys to setup your VPS, but you can definitely expect a great product backed by superior support.

There are many other features such as DNS prefetching, deferred loading & cache preloading and I may not be able to cover them in detail but if you’d like to give this plugin a try, thanks to the good folks at WP Rocket you can use coupon code “flattrendz” to get 15% discount.

03. Slower speed for users furthest from the location where site is hosted

Most websites are hosted in data centres located in Northern America & Europe. While this trend may change, if you host your website on a single machine, the further the user accessing the site from the server, the slower the site will load for them.

Solution: Using a CDN service like MaxCDN.

MaxCDNMaxCDN is the first CDN service I tried and I hope it’s the last. It is affordable, easy to setup and the support team is top notch. For 8 cents per GB of data transfer, even if your website transfers 100 GB each month, you still would pay around $9 / month.

MaxCDN location
– Locations from which content of FlatTrendz.com is currently served.

With multiple locations around the world, irrespective of the location of the user, in a fraction of a second, MaxCDN will serve your website content from one of their data centres closest to the user resulting in better experience.

04. Lack of control in serving the right sized image or retina version

I am still experimenting with the new proposed picture and multiple src tags but I still have not been able to find a foolproof way. I would continue experimenting and post an update once I find a solution.

This may have not been the go to guide or step by step guide for optimizing a WordPress site, but that was never my intentions. My aim was just to give an idea of how easy it is to speed up your website with minimum efforts without changing your host. If reading this made you even a little bit curious to try some of the things I mentioned, then I’d consider my work done. And if you have any doubts or questions, please feel free to ask using the comment form below.