How to Increase Website Load Speed

Contents:

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.

Notes:

  • 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!

Foreword:

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”.

rsworkers-pagespeed-1

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.

Website Migration and Updates

Hello,

It’s been a few months since my last blog post. I’ve been really busy working with some other things.

Well, I just want to update everyone of the recent downtime of my website. I purchased a new hosting service from “StableHost” and moved all my websites there. It’s been a few weeks and i’m really happy with their service and their prices 🙂

Also, if you have noticed my website is now SSL-secured, for those who are not techy, you will notice that my web address is now https://donmhi.co and not https://donmhi.co. You will also notice a green lock notifying you that my website is safe and secure for browsing.

I’ve got plenty of plans for the new year, first one in my mind is to give a review of the new WordPress 3.8 ,  tutorials and of course updates for DM Confirm Email.

Hello World!

So at last i managed to have the time to create my own personal website. I’m Michael Joseph Panaga and my alias is donMhico. I’m a programmer, gamer and a musician.

Not because I just created my own personal website means that i just started. NO! I’m not really new to the internet, the fact is I’ve been programming, building websites, fixing websites, creating themes, plugins and etc. It’s just that i’m so busy working on other peoples’ or business’ websites that I can’t find the time to create my own.

Well guess what, i’ve managed to make donmhi.co up and running. And the very motivation I created this website is because it’s the same time i will share my very first “own” plugin. Please notice the emphasis on “own” because this is not the very first plugin I created. I’ve created, modified and worked with so many plugins before, both free and paid. But since the start, i always wanted to create my own plugins / scripts.

Just to give you a short description of my first plugin. I called it, DM Instagram. DM Instagram is a wordpress plugin that connects wordpress sites with the admin’s instagram account. The plugin allows the admin to immediately display and share his / her uploaded photos on instagram. The plugin is fairly simple, just like i want it to be simple and working, but it does offer some cool customization. Just check it out here to learn more.

Anyway, this site will, of course, contain things about me.  I will post here about the things I learned, games I played, and scripts I’ve made. But i will be sure to share knowledge by creating good tutorials, game reviews maybe, and of course free scripts.

Be sure to come by every now and then. =)