How To Decrease the Page Loading Time Of Your WordPress Blog By 75%

MonsterPost Editorial

6 years ago

In this post, I will tell you how to reduce page loading time from 9 to 2-3 seconds!

How we did it?

We used W3 Total Cache plugin and Amazon S3. W3 Total Cache is a great caching plugin and can cache pages and compress the JavaScript and CSS files. Additionally, it also offers CDN integration.

How can you speed up your website too?

Just follow the tutorial instructions, and that’s it!

Time Required: 15 minutes.

Before continuing, please take a full backup of your blog.

Installing and configuring W3 Total Cache Plugin?

When I noticed the page loading times, I first looked at the options. I had used WP Super Cache before but did not have good experiences with it. So, I decided to give W3 Total Cache a try.

You can get the plugin from WordPress Plugin Directory here. For now, enable Page Caching, Minify and Database Caching and leave CDN integration as we are going to do that later. Here's a short description of what these options do:

Page Caching: Saves WordPress generated pages as simple HTML and serves these pages to visitors.
Minify: Reduces the size of JavaScript and CSS.
Database Caching: Caches the results of queries made by WordPress.

Default settings of the plugin are good to go by, and the only thing you need to do is enable database caching.

Now, W3 Total Cache is all set.

After setting up the plugin, out loading times fell to 6-7 seconds - okay but still a bit slow. So, we decided to use Amazon's CloudFront as CDN for fast delivery of images. This leaves our server with the task of handling PHP and SQL only and makes it super-fast.

Adding the main booster (CDN)

Why CDN Is Important: Before doing anything, you should know why it is needed and how it works! Here's an example that will relate to everyone!

Think of your blog as a math teacher and you as a server! Remember when you were in seventh grade and the teacher gave you those lengthy "statement" questions which were difficult to understand initially but had fewer calculations? Wouldn't it have been simple if you had a friend that would convert all the statements for you

First, sign up for Amazon Web Services account here. Now, you need to decide between CloudFront and Simple Storage Service. Here's a brief description of how they work:

Amazon S3: S3 stands for Simple Storage Service and does precisely what the name says. It will store your files on Amazon servers and allow you to fetch them from theirs. So, if someone from India visits your site, they will have to fetch the files from Amazon US server (if your bucket is in the US!).
Amazon CloudFront: In the above example, how about if a person visiting from India is served the same file from Japan? Japan is nearer, and the load time will decrease this way! This is what exactly CloudFront does. It will deliver the file from nearest edge location to your visitor.

You need a credit card to sign for S3 and CloudFront.

Now, go to your AWS Management Console and go to your account. Click "Security Credentials". Under access credentials, you will see your access keys. Click "Show Secret Key" and note both the keys (access key id and secret access key) values down.

Also, create a new bucket in S3 console.

Creating A Bucket (S3)

A bucket is a storage location for all your files. To create a bucket, sign into Amazon Management Console and switch to Amazon S3 tab. Create a bucket. You can name it anything as long as it is available.

Now, either you can use S3 straightaway or signup for CloudFront. I recommend signing up for CloudFront as it has the same pricing as S3 and will provide an excellent boost without adding many costs!

If you want to use S3 only, skip the following step.

Adding CloudFront

First, sign up for CloudFront. Next, click “Create Distribution”.

Select “Download” as delivery method and select the bucket that you just created as the origin.

You can enter custom CNAMEs if you want. CNAMEs allow you to use your own sub-domain for CDN (like we use cdn.bloggingwithsuccess.net) and click “Create”.

If you want a custom CNAME, follow the following steps:

Once you create a CloudFront distribution, note down its URL. It should be like asdcxzciascd.cloudfront.net
Log into cPanel.
Look for Simple DNS Zone Editor. Click on it.
Now, switch to the domain you are adding CDN to.
Add the CloudFront distribution to CNAME and above it, NAME. NAME is the sub-domain you want for CDN. Make sure that NAME ends with a period(.). For example, if you want cnd.yourdomain.com, NAME should be cdn.yourdomain.com.

Back to W3 Total Cache

Now your Content Delivery Network is all set, and you need to configure the W3 Total Cache plugin correctly.

Go to Settings? W3 Total Cache and then click Content Delivery Network in the plugin menu.

Now, you will see options to host different files on CDN. Here’s what each option does:

Host wp-includes/Files: Moves all your WordPress static files to the cloud. This includes things like smileys (yep, WP includes smileys!), etc.
Host Theme Files: Hosts all your theme files in the cloud. It is better to turn this off as it makes theme editing very difficult.
Host Minified CSS and JS Files: Moves compressed CSS and JavaScript files to cloud. Only available if you have enabled minifying.
Host Custom Files: Moves custom files (specified in custom files list) to cloud. This may be your whole gallery.
Force Overwriting: Allows you to overwrite existing files when uploading.
Import External Media Library Attachments: Imports images that are attached to posts but are hosted on an external server.

I’d recommend hosting wp-includes and custom files (including WP gallery) because this is the central part of your blog. If you are not a frequent theme customizer, you can also host theme files.

Now, enter the access key id and secret key and other information (bucket name for using Amazon S3 and CNAME for CloudFront).

Export the required files by clicking the corresponding button. The process will be fast.

Now check the images of your blog. If their source is not cdn.yourdomain.com (or CNAME you chose), the process is successful!