How to Increase Website Load Speed


This is a tutorial on how to speed up your website’s load time. But before anything, does speed matters? The answer is a big YES! Visitors like web pages loaded to them instantly, they don’t want to wait. Make them wait for more than 10 seconds and you lose a potential sale, client or reader. And google loves fast loading websites, so making your website fast has an impact to your site’s SEO.

A website’s load time speed are determined by several major factors:

  • The network of your website’s server.
  • Your network (ISP)
  • Latency
  • Your website’s content.

We will not go over the first 3 on this article but hopefully I will have time to create an article that will cover those.

So let’s talk about “Your website’s content”. What I mean by content is not only the articles, comments, pages, posts, categories, tags and etc on your website, I mean everything or “ALL THE CONTENT” of your website. Including images (embedded through <img> or as background image through CSS), Javascript files, CSS files, and etc. Basically your website load time speed is also determined by how much time is needed to load all the content of your website.

This article will cover the basics of how to minimize your WordPress site’s loading time.

Also, i’m open to feedbacks and suggestions. So if you have any thing in mind just comment it.


  • The tests are true and performed on my website.
  • I do not state that what I did is the best way to optimize your website but it certainly works for me and I’m 99% sure that it will work for you too.
  • The article may be focused on a WordPress website but the techniques are general and are true for other dynamic or static websites.


The methods mentioned in this article like compressing and minification can be done by using existing WordPress plugins like W3 Total Cache. However, “for me”, installing such plugins may bloat your WordPress site and make it consume more CPU resource. This tutorial is meant to increase your website’s performance / speed without installing additional plugins except for WP Super Cache.

Original State:

Before we actually start to do any optimization. It’s best to know what is original state of our website. How many requests are made, the files being requested, their sizes and how much time before everything is loaded. There are various ways to do this, but for this article, I used Google Chrome’s built-in developer tools. You can see the Developer Tools  by clicking on any part of your website then click “Inspect Element” then “Network”.


This is what the Developer tools > Networks looked like. As you can see, the Developer tools is really powerful and gives us all the data we need to analyze our website.

The first column shows the files that are being loaded by your website. You can also see the file size of each of the elements, the time it took to be loaded and many more. And the last column displays how much time it took for your website to be loaded.

For the website we will be optimizing in this article, it took more than 20s before everything is fully loaded. The last element loaded is actually the last image from the slideshow which is only loaded through Javascript when the second image was shown. That being said, we will record the 8 – 10 seconds because the DOM was loaded during that time.

My goodness, 10s to load a website? What now?!

Yes, i know how you feel! 90% of internet users will not stay on a website for more than 5 seconds. So we will start cutting this madness! Like what I said above, a website’s page load time is determined by how many requests are made by your website, how many files are loaded, and their file sizes. Based on the data from the Developer tools, the website performed 80 requests with a total file size of 878kb.

For now we have 2 goals

1.] Minimize the number of requests. The fewer the requests the better.

2.] Reduce the total file size. It’s common sense, the little file the faster it can be loaded.

So how do we minimize the number of requests? First we will have to look for the files that are being requested. You can do it by navigating through the Developer Tools. As for the website I’m working on, the loaded files are CSS files, Javascript Files and images. What we can do is to combine all the CSS files into a single CSS file, all Javascript files into a single Javascript file and all images into a single image (sprites).

I will do the combination one by one and put the results on each one so we can appreciate the optimization better.