followers 19 popularity
23
following 1

following  view all

Groups
michaelpehl is not in any groups

Interests

html/css/jquery/wordpress
Michael | michaelpehl

Boosting The Loading Speed Of Your WordPress Blog

Jan 9th 2012 at 11:22 PM

Many people have a blog that is not optimized for loading speed.

One of the problems of a WordPress blog is – the more plugins you install the worse the loading speed will get.

To prevent loss of your blog’s loading speed you can use plugins that will help you combining and minifying your CSS and JavaScript.

If you are familiar with Firebug you could check the start page of the CookielessDomain blog.

This blog is optimized using the W3 Total Cache WordPress Plugin.

I must admit that this blog does not use any fully-loaded theme, it’s using the Carrington Text theme from the Carrington Framework.

A Kwicks slider, a scroll-to-top script, the header and the footer were added to the theme and some CSS modifications were done.

Okay, anyway… what I did after installing some plugins was thinking about how to achieve a high

Google Page Speed score.

ATTENTION: BACKUP YOUR FILES/DATABASE BEFORE CHANGING ANYTHING

Using The W3 Total Cache Plugin To Boost The Loading Speed

Using the W3 Total Cache plugin, a cookieless domain (in this case cldm.cookielessdomain.de) and the ability of W3TC to store the static content (CSS/images/JavaScript) via the self-hosted FTP option were the key to get a Google Page Speed score of 93/100 for the CookielessDomain blog.

www cookielessdomain com blog1 300x169 Boosting The Loading Speed Of Your WordPress Blog

So, here is basically what I had to do.

After installing and activating (maybe changing some settings, too) all the plugins you want for you blog, you should take a look at the source code of your blog to find out which CSS files and JavaScript are getting loaded.

It could look like this (I will take another blog as example because the CookielessDomain Blog is already optimized):

blog header 300x159 Boosting The Loading Speed Of Your WordPress Blog

I have marked the CSS and JavaScript files that are located in the header.

We have 8 CSS files and 8 JavaScript files.

We all should know that loading JavaScript files in the header are slowing down the loading process and rendering the site correctly will slow down, too.

The best solution for loading JavaScript files is putting them to the bottom of your code. Read more about this at the Yahoo Developer Network.

ATTENTION!!! If the script uses document.writeto insert part of the page’s content, do not move it from the head.

Settings In The Browser Cache Section Of The W3 Total Cache Plugin

When the W3TC plugin is installed and in it’s default state there are some settings that need to be checked.

Since the Browser Cache settings are a lot you can just take a look at the picture to see the CookielessDomain blog settings.

w3tc browser cache settings1 155x300 Boosting The Loading Speed Of Your WordPress Blog

Summary of the Browser Cache Settings (in case the picture is too big):

Set expires header, Set cache control header and Set entity tag (eTag) activated in all 4 sections.

Enable HTTP (gzip) compression activated in General and Media & Other Files sections.

That’s it. Save changes and deploy it.

W3 Total Cache And .htaccess Files

To get things working as you need it you have to get some .htaccess files and other “Tools” installed/configured.

Head over to the Install section of the W3TC plugin.

In this section everything is described well, so you should normally get no problems. In case you have any problems you can check with Google or post your problem at the WordPress forum.

Activating Minify And The Content Delivery Network Options

Now go to your W3 Total Cache General options and activate Minify and Content Delivery Network. Choose Self-hosted / File Transfer Protocol Upload for your CDN settings.

w3tc general options 300x238 Boosting The Loading Speed Of Your WordPress Blog

Save changes and move on to the next step.

Combining And Minifying CSS And JavaScript Files

First we should combine all CSS files to one file and get it minified.

I will show you the W3 Total Cache page from the CookielessDomain blog where you can see the CSS files that get combined and minified. Go to the Minify option of the W3 Total Cache plugin.

minify css 300x210 Boosting The Loading Speed Of Your WordPress Blog

You can see that I have added all 5 CSS files that my blog is loading to the W3 Total Cache Minify CSS option.

Press Save changes and follow the instructions of W3 Total Cache. It’s really easy.

Okay, now we will get a combined and minified CSS file.

In the same W3 Total Cache plugin section (Minify) you can add your JavaScript files to get them combined and minified. It’s right above the Cascading Style Sheets option.

Take a look at the next graphic.

minify js 300x191 Boosting The Loading Speed Of Your WordPress Blog

You can see that I have added every JavaScript the CookielessDomain blog is loading that I want to be combined and minified.

Save changes and again… follow the instructions of W3 Total Cache to get one combined and minified JavaScript file.

Now that you have only one CSS and one JavaScript file, that is at the bottom of your (X)HTML code, your blog should load a lot faster now.

Preparing The Content Delivery Network

Here you can see the settings I am using for the CDN option of W3 Total Cache.

w3tc cdn settings 270x300 Boosting The Loading Speed Of Your WordPress Blog

Well, before you can use the CDN option you need to insert your FTP username and password, and if a path if you need.

In my case, since I am using a subdomain of cookielessdomain.de that goes into /cldm/ of the cookielessdomain.de account and I am connecting to the FTP with the main user, I need to set the path to /cldm/.

When you inserted your FTP username, FTP password and all other settings are correct you should press Test FTP server.

If everything went OK (Test passed) you can press Save changes.

Maybe you have to play with Passive Mode and/or SSL settings, if they are supported by your host/server.

Now, look again at the picture above. You see those 2 red arrows.

After the connection from your blog to the FTP server is working you need to click on importing attachments into the Media library (1 in the picture above) and then exporting media library to CDN (2 in the picture above).

Now a popup will open and you just need to press Start. The media library files will now get exported to your CDN.

Exporting The Combined And Minified And Other Files

In my settings I have checked the following in the General CDN Options:

  • Host wp-includes/ files
  • Host theme files
  • Host minified CSS and JS files
  • Host custom files

The custom files are defined in the Advanced settings, take a look at the picture.

w3tc cdn advanced settings 300x210 Boosting The Loading Speed Of Your WordPress Blog

You can see that I have added the folder wp-content/plugins/* to get the whole plugins directory exported to the FTP Server. I did that mainly because of the SexyBookmarks plugin.

Now it’s time to export the files.

In the picture below I have marked the buttons you need to click to get all needed files exported to your FTP Server.

w3tc exporting other files 300x227 Boosting The Loading Speed Of Your WordPress Blog

Click on the button Upload includes files (1) and a popup will open. Click on Start to get the wp-include files exported.

Next is Upload theme files (2), then Upload minify files(3) and the last one is Upload custom files (4).

After exporting you should click deploy and then empty all caches.

The settings in the sections Database Cache, Object Cache and User Agent Groups were not changed by me.

Testing The Loading Speed Of Your Blog

Okay, time to test everything.

For me the process went smooth and well. The loading speed increased a lot and it was worth the time I had to spend to get it working like it is now. FAST.

0 comments
Please to comment

sign in

Username
Password
Remember Me


New to IM faceplate? join free!

Lost Password? click here