So I recently installed a syntax highlighter and by coincidence the author of that plugin also had a post about decreasing wordpress bandwidth usage. So I’ve read it and I thought let’s check how big the frontpage of my blog is when downloaded by a new visitor (The FireFox extension FireBug works great for this). A whopping 1.05MB! as my website is hosted on my server at home and my upload speed is at max 150KB total that would mean to load the pages take about 7 seconds to load.

So I went back to this persons blog post (You can find it here btw) and started reading through it again. First I tried wp-minify but as he stated this doesn’t work properly in Internet Explorer and your images wont load if your css contains relative urls, so this wasn’t going to work.

He also mentioned that his syntax highlighting plugin uses a lot of bandwidth to load all languages it supports so I made it only load the languages it needed. Dunno how did affect the bandwidth usage but it decreased page load times.

After that there was 1 last thing I had to test, enabling GZip compressed output. So after a little searching I found a WordPress plugin to enable it. I tested it, No changes at all. So I checked my apache installation and noticed mod_deflate wasn’t enabled (This is needed to enable the compression). So after enabling this I checked the size again, but it only decreased by 0.03 MB (That’s about 30kb).

So leaving that enabled I decided to check if the compression was indeed enabled(I used this page to test it). Firstly I checked the frontpage, It said compression enabled, and compressed to 23% of the original size, But this wouldn’t explain why the size still was 1.02MB. So I decided to check an image on my blog to see if that was being compressed, filled in the url hit check, and the results, not compressed. This meant that the compression was only enabled on WordPress pages.

So I decided to search on google how I could enable GZip compression for all files through a .htaccess file and found this. Though this person said don’t enable it on images and also not on flash as that might make flash stop working I ignored it and tried anyway by just adding the following code to my .htaccess file.

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4\.0[678] no-gzip\
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

After adding this I hit ctrl+f5 in my firefox (Clears cache before loading page) and checked the size again, now it was down to 163KB! that means it would load in around a second instead of 7 seconds. I’m now trying to find out how to fix WP-Minify because that would bring it down even more, and I might also try to decrease the size of the images used in the sites layout/design. I’ll report how that went after I’ve done it.

Hope this was helpful, If you have any questions or feedback don’t hesitate to comment.

Regards, Xeross

I was working on my CMS (Just took a brake to write this), and I tried to figure out how to pass additional arguments to a javascript callback. After some searching I found what I was looking for, I told the people in the jQuery IRC channel and someone gave me shorter and cleaner code that does the same. So let me run you through the code (Note: This is jquery but the same method would also work with normal Javascript) .

In this example I will use an argument that defines where to load the data got from an AJAX request in.

//Custom function that's used instead of the long jQuery Syntax
function loadUrl(url, destination)
{
    // Use a get request to get the page at URL
    $.get(url, function(html, status) { loadedPage(html, status, destination) });
}

// The callback function
function loadedPage(html, status, destination)
{
    // If the AJAX call failed stop the function
    if(status != "success")
        return;

    // Set the html of destination (Which is in this case a jQuery Selector) to the jquery repsonse
    $(destination).html(html);
}

If you haven’t figured out how to pass the additional arguments from the above example I’ll explain in detail, Let’s take a closer look at line 5(Formatted for readability).

$.get(url,
    function(html, status)
    {
        loadedPage(html, status, destination)
    }
);

As you can see we are using a custom defined function for the callback, What we do is make a function that has the arguments that get passed to the callback.

function(html, status)
{

}

And in that function we call our real callback function but with the additional arguments we passed to loadUrl()

function(html, status)
{
    loadedPage(html, status, destination)
}

And that’s it, this can be done with as many additional parameters as you like just add them to the call of the real callback function.

Leave a comment if you have any questions or feedback.

Regards, Xeross