Boosting The Loading Speed Of Your WordPress Blog

October 11, 2010

WordPress

 

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.

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 and the ability of W3TC to store the static content (CSS/images/JavaScript) via the self-hosted FTP option are the key to get a Google Page Speed score of 90 and more for your blog.

What you should do to boost the loading speed?

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

Most times the CSS and JavaScript files are located in the header. Let’s say 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 JavaScript uses document.write to 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.

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

W3 Total Cache General Options

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.

Add all CSS files that your 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.

W3 Total Cache Minify JavaScript

Add every JavaScript your blog is loading that you want to be combined and minified. Not every JavaScript works when minified, so you should test which is working 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

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 that goes into a folder of my cookieless domain and I am connecting to the FTP with the main user, I need to set the path.

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.

After the connection from your blog to the FTP server is working you need to click on importing attachments into the Media library and then exporting media library to CDN.

Now a popup will open and you just need to press Start. The media library files will now get exported to your CDN (self-hosted FTP).

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.

W3 Total Cache CDN Advanced Settings

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.

W3 Total Cache Exporting Other Files

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

Next is Upload theme files, then Upload minify files and the last one is Upload custom files.

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.

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.

About Michael Pehl:  39 years old Front-End Developer and System Engineer. At the moment I am very focused on optimizing websites/blogs to get the maximum loading speed. On my blog Cookieless Domain I am explaining different techniques how to get a massive loading time boost. You can contact me any time and ask for help. Feel invited to discuss with us on my blog. (c) Copyright Michael Pehl - All Rights Reserved Worldwide.

Article Source: http://EzineArticles.com/?expert=Michael_Pehl
 
, , , , ,

About Souvik

Web Developer and SEO Specialist with 10+ years of experience in open source web development. He is also the moderator of this blog (www.rswebsols.com)

View all posts by Souvik

4 Responses to “Boosting The Loading Speed Of Your WordPress Blog”

  1. Rabin Says:

    ok..I will give this plugin a try and come back here later..Let’s see if it increases my blog’s speed.

    Reply

  2. Alex Says:

    no, it’s probably my mistake, delete the comment please

    ps but i still recommend to remove 404 handler

    Reply

  3. Alex Says:

    In fact your blog is very very very sloooooow.

    One of the reasons probably is because you have some resource consuming redirects for any content, even graphics.
    Try, for example http://www.rswebsols.com/images/somefolder/gif.gif
    Slow as hell, and shows a resource eating dynamic page.
    You need to remove 404 handler from graphics.

    Funny thing, but google’s Page Speed doesn’t show this problem, it thinks for some reason that you have no broken images.
    But if we look into the first css file wp-content/themes/freshnews/style.css
    we see string “background: #ebe9e1 url(images/bgr.jpg) repeat-x top;”
    But there’s no such image: wp-content/themes/freshnews/images/bgr.jpg

    Google’s Page Speed doesn’t find that error (“Avoid bad requests” paragraph).
    Yahoo’s YSlow doesn’t show that error either (“Avoid HTTP 404″ paragraph).
    Try yourself on gtmetrix.com

    And only http://siteloadtest.com after waiting 5 minutes or so shows all your 96
    broken images and one broken js file. The test slows down on the download phase, so be patient.

    Either I’m making some mistake here or both Page Speed and YSlow don’t see your problem.
    Your site is nearly dead now, concurrent request test on siteloadtest shows “Requests per second: 0.44″ but Page Speed still gives it “C”. It’s crazy.

    There are some more problems with optimization, study the report from siteloadtest.

    Reply

  4. Tom Jones Says:

    Hi,

    Just wanted to suggest a fantastic hosting service that you could include in your blog

    http://www.novelaspect.com

    Novel Aspect provides web and data hosting solutions. We can provide a link exchange if you are interested as well.

    Warm Regards,

    Tom Jones

    Reply

Leave a Reply

Current day month ye@r *