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

Have you noticed something strange with Blogging With Success recently?

No!

Well, really? How can you not notice the decrease in our page loading times! We brought it down by at least 75%! Before this, Blogging With Success homepage was taking 8-9 seconds as reported by site-perf.com.

Now, same test reports 2-3 seconds!

In this post, I will tell you how we did it and how you can do it too!

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 also compress the javascript and CSS files. Additionally, it also offers CDN integration.

How You Can Speed Up Your Blog Too

Just follow the tutorial instructions and that’s it!

Time Required: 15 minutes.

Installing And Configuring W3 Total Cache Plugin

When I noticed the page loading times, I first took a look 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 to visitors.
• Minify: Reduces 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 only thing you need to do is enable database caching.

Now, W3 Total Cache is all set.

After setting up plugin, out loading times fell to 6-7 seconds. Good, 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 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 basically, how it works! Here's an example that will relate with everyone!

Think of your blog as a maths teacher and you as a server! Remember when you were in seventh standard and teacher gave you those long "statement" questions which were difficult to understand initially but had less 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 both of these work:

• Amazon S3: S3 stands for Simple Storage Service and does exactly what the name says. It will store your files on Amazon servers and allow you to fetch them from their. So, if someone from India visits your site, he will have to fetch the files from Amazon US server(if your bucket is in 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 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/or 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 same pricing as S3 and will provide good boost without adding much costs!

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

Adding CloudFront

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

Select “Download” as delivery method and select the bucket you just created as 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 cloud. This includes things like smileys(yep, WP includes smileys!) etc.
• Host Theme Files: Hosts all your theme files on 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 external server.

I’d recommend hosting wp-includes and custom files(including WP gallery) because this is the main 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 corresponding button. The process will be pretty fast.

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

What’s Next?

Well, take some time off and enjoy your faster blog!

If you have any problems, feel free to ask in comments. Also, do not forget to tell us about your experience with it.

Please share this tutorial on Delicious, Twitter or Facebook if you found it useful! Thanks.