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)
- 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.
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 AM DELETING MY BROWSER’S CACHE BEFORE RELOADING THE WEBSITE ON EACH TEST.
- 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.
- BEFORE DOING ANY OPTIMIZATION ON YOUR WEBSITE. I STRONGLY SUGGEST THAT YOU MAKE A BACKUP OF YOUR WEBSITE FILES!
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.
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.
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.
I will do the combination one by one and put the results on each one so we can appreciate the optimization better.