We so often face the scenario when we wanted to look up something on our mobile phones, but gave up halfway when the site was too slow to load. In a world where more traffic is moving to mobile from traditional desktop browsers, loading speed has become a major factor that determines bounce rate and time spent by users on a website. But the dichotomy lies in the fact that if we make the site too barebones in an effort to make it lightweight, it reduces the usefulness (and often the usability as well) of the website.

So, how do we attain the “just-right” mix of loading speed and functionality, while keeping the site simple and user-friendly too? Well, as it turns out, it is not too difficult, actually, if we keep some basic tenets in mind while optimizing:

• A site with lots of high-resolution images, several fonts and a lot of stylesheets shall be sluggish to load, no matter the level of optimization. Before optimization even begins, we have to clean the cruft at the core. Replacing large JPGs with PNGs or WEBPs, several different fonts with a single (or maybe two at most) are a good place to start.
• Once the basic cleanup is out of the way, we can now try to optimize our server setup. Most sites on the internet are served by some dedicated or shared hosting server running some flavour of Linux. While this is a great out-of-the-box solution to get you up and running, it doesn’t necessarily scale well under loads. There are several ways in which we can tackle this. For example, we absolutely have to start using different servers to run your application and the database, instead of having them run on the same machine. If you are on a cloud server platform such as Heroku or DigitalOcean, you can additionally benefit from horizontal scaling by spinning up more nodes on-demand as you receive a spike in traffic and putting them behind a load balancer. Also, if you have the moolah to splurge, buying the biggest and baddest server out there probably won’t hurt.
• With the server optimization in place, it’s time to look at your app code. If you are using a dynamic website (which you probably are, for I have never heard of a static site having scaling issues till date), you are either rocking an off-market CMS such as WordPress or Joomla, or something custom-made on top of Rails, Django, Laravel or insert your framework name here. Most content management systems provide some way to cache the generated views. (WP Super Cache or W3 Total Cache come to mind for WordPress.) Also, MVC frameworks also usually come with out-of-the-box support for caching views, so it is usually a question of enabling it. You can cache your views on disk, in memory or in a database. For the more technically proficient, there is always Memcached or Redis for object storage.
• The last thing that you do to boost your site speed is caching at the DNS level. CloudFlare, with its distributed CDN and globally distributed network, is undoubtedly the king of this hill. (What’s more, it throws in DDoS protection for free.) Amazon CloudFront could also be used for this, but it requires a lot more configuration to work than CloudFlare. By storing cached copies of your site locally at datacenters across the globe, your site speed can be boosted hugely for global audiences.
• If you are looking to squeeze the very last ounce of speed from your site, you can try swapping out the hosting sofware that you run on your server. While Apache is often commonly used as a web server (with mod_deflate enabled for compression), many people have reported speed upticks after switching to Nginx with a load balancer and GZIP compression. However, this is subject to interpretation and may not even be compatible with your website or app, so your mileage here may vary.

And that’s pretty much it! If you have followed along, you now are the proud owner of a shiny new website which is pretty much rearing to go at full throttle by this point, and hopefully your Google SiteRank has been cranked up a couple of notches. Follow my blog for more sysadmin and random tech tutorials. Cheers!