Optimizing Your WordPress Blog

This article is guaranteed to bore even those who are not usually bored of reading my articles! Why? Today’s article is really quite "techy". Please don’t waste your time here unless you have a decent knowledge of HTML (at the very least). Thanks :)

If you are an optimization freak like me, probably you don’t like all the JavaScript and CSS garbage that you notice in your blog’s header. Not only it makes your header look untidy (when you look at the source code of your blog, that is), it also slows down your blog’s average page load speed. I have been wondering about how to remove all the garbage from the header for some time now, and after experimenting for several days, I was partially successful in cleaning up my blog’s header. Due to lack of time, I have managed to cleanup only one of my four blogs (yeah, this one is yet to be cleaned up, sigh!! :P ). Before I resume my "cleanup" job again, I figured I should bore you a bit! ;)  

So, here are all the steps I took to cleanup my WordPress header-even if only partially! ;)

Step 1: Of course, as a rule of thumb, I backup my blog database using the WP DB Manager before making any modifications to my blog. You can of course use your favorite backup plugin, but please understand that this step is crucial! :D

Step 2: Next, I downloaded and activated the wp-minify plugin. For the geeks, here is a detailed documentation on how the plugin works. For troubleshooting any issues with the plugin, the author recommends the Firebug addon of Firefox, and I second it. The addon is a gem and would help you troubleshoot a lot of web accessibility issues in general, whether or not you choose to use the wp minify plugin.

Now, by the way, if you are concerned about your blog’s security, then you must make some changes to the code to make sure that your blog is not hacked later on. As a matter of fact, the plugin cannot work unless you CHMOD the /wp-minify/cache/ directory to 777. However, if you set the cache folder to 777, basically anyone can read, write and execute any scripts through this folder, leaving your blog vulnerable to plenty of hack attempts .
Someone familiar with this plugin would search for the /cache/ directory of this plugin and upload some malicious script into it in order to hack your blog (btw I am not a hacker so cannot really say how they think/act) . ;)

Ideally, any directory that requires to have 777 permissions should be created outside of the root directory, that is, one level ABOVE the public_html directory or the www directory, as pointed out here. :) Unfortunately, this requires more code hacks that I am capable of. So, I devised a somewhat simpler fix.

I opened the wp-minify.php file with PSPAD, and replaced all instances of

cache/

with

acustomfoldername/

Where "acustomfoldername" is my custom folder name. It can be any name, and I suggest that the name be rather cryptic so that hackers cannot easily guess its name. :D

Then I renamed the "cache" directory to "acustomfoldername", CHMOD it to 777 and also uploaded a .htaccess file to the folder for extra protection. For those who cannot modify the plugin themselves, you can download my modified copy from here.

NOTES ON THE MODIFIED PLUGIN:

a) The name of the cache folder is "cache-xyzc". You can keep it "as is", or edit the wp-minify.php file to change the folder’s name to anything you like (but please also be sure to rename the actual cache folder accordingly).

b) This is version .0.9.3 of the plugin. If you ever upgrade the plugin via WordPress’s autoupgrade functionality, all the custom changes I have made to the code would be lost. So, you would either need to keep using this version of the plugin forever or modify the newer versions of the plugin accordingly BEFORE copying them your server. :)

c)  Due to my time constraints, I would NOT be able to offer any personal support for the modified version of this plugin. So please use it at your own risk! :)

d) If you ever have problems with the modified version of the plugin you can either:

-Delete the .htaccess file from the cache directory and see if that helps.

-Use the original version of the plugin (and suffer from insomnia and hackerphobia) ;)

Sorry to be so rude but I prefer to reveal everything – cut, dry and open ;-)

Now, as for the plugin’s configuration settings, you would initially need to chmod the /wp-minify/min/config.php file to 777 so that you can change the plugin’s options according to your tastes. The default options seem to work fine for me; so, other than disabling the linkback from your blog (in case you want to), I don’t think you would need to make any other changes. For security reasons, be sure to chmod the config.php file back to 644 as soon as you have saved your settings!

Huh, what a security freak! :D

By the way, some people have reported weird issues with WP minify when used with WP super cache, and vice versa. Personally the blog on which I am using this plugin does NOT have WP super cache, so I cannot say anything for sure. If you have issues with either of these plugins, just deactivate one of them and see if that helps. :)

Also, I think that WP Minify has a conflict with the WP SEO Master plugin. I say this because whenever I activated the WP SEO Master plugin, WP Minify failed to work. On the other hand, deactivating WP SEO Master fixed the issue. I suggest the SEO Ultimate plugin anyway, because it is a lot more versatile than WP SEO Master, and also because it works just fine alongside WP Minify :)

Wait, I am not finished boring you yet! :)

Step 3 (optional): If the above solution does not clean up the blog header to your satisfaction, there are some additional techniques you can use:

If you use the semiologic theme then this step is really easy; not that I am asking you to stop using your favorite theme, but since I use semiologic my instructions are in par with that theme. Note that WordPress themes generally have a lot of similarities between them; for example, almost all modern themes come with a file such as functions.php – that is where we would be making our major modifications. So, if you know your way around the coding of WordPress themes then you should be able to adopt these instructions to your theme anyway.

Again, please keep in mind the rules:

a) Be sure to backup your original theme files to a safe location, preferably somewhere on your hard drive (and make sure that you do NOT modify these files)!

b) I would not be able to offer any technical support for the modified theme. IF for any reason this modification does not suit your tastes you can always  undo the changes by uploading your backup theme files. :)

c). Especially for semiologic users, I have tested the following instructions only with version 0.9.4 of the theme. If you ever upgrade the theme, all the custom changes you make to the code would be lost. So, you would either need to keep using this version of the theme forever or modify the newer versions of the theme accordingly before copying them your server. :)

NOTE: Semiologic folks recommend using the custom-sample.php file provided with the theme for adding any additional code to the theme; however, I have not been able to make most of the following functions work through that file.

d) Please understand the implication of each function before following the instructions. That is why I have posted the notes on all the functions before giving you the actual code. Short and sweet: if you don’t need a function, remove it, but if you need a function, don’t! ;)

EXPLAINING THE THEME FUNCTIONS:

 i) First of all, how about making yourself a little familiar with the WordPress theme code? ;)

ii) To remove the following junk – err, post relational links – from your WordPress header (note that this is just an example):

<link rel=’index’ title=’Blog Name’ href=’http://www.yourdomain.com’ />
<link rel=’start’ title=’Article in the distant past’ href=’http://www.yourdomain.com/hello-world/’ />
<link rel=’prev’ title=’The Post Before This One’ href=’http://www.yourdomain.com/post-before/’ />
<link rel=’next’ title=’The Post After This One’ href=’http://www.yourdomain.com/post-after/’ />

Use the following code:

remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');

iii) To remove superfluous feed links such as category feeds, comment feeds, individual post’s feeds, etc., use the following code:

remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );

In my opinion, only one feed is enough for a blog-the main feed, such as: http://yourdomain.com/feed

However, if you have any special reason to keep the extraneous feed links then just keep them :)

iii) If you don’t integrate your blog with external XML-RPC services such as Flickr then the "RSD" function is pretty much useless to you:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://yourdomain.com/xmlrpc.php?rsd" />

Therefore, you can remove the above from your WordPress header by using the following code:

remove_action( 'wp_head', 'rsd_link');

iv) If you don’t use Windows Live Writer™ then this function is just another piece of junk added to your blog:

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://yourdomain.com/wp-includes/wlwmanifest.xml" />

You can remove the above by adding the following function to your theme’s functions.php file:

remove_action( 'wp_head', 'wlwmanifest_link');

v) It is a good idea to hide your WordPress version from the public:

<meta name="generator" content="WordPress 3.xx" />

Remember that different kinds of people – the good, the bad and the ugly folks – read your blog. ;) While there are several plugins that can do this job for you, you can easily remove this piece of cr*p by adding just one line of code:

remove_action( 'wp_head', 'wp_generator');

This keeps your blog safe from the newbie hackers! :D

vi) [The following function is being mentioned here solely for educational purposes; it can seriously cripple some themes and plugins, so please use it carefully; on another note, if you are already using WP minify, you can safely ignore it because you are not going to get any extra benefit from using this function, as far as page load speed is concerned.]

Remove extraneous jquery links from your blog header with the following function in the header.php file:

wp_deregister_script('jquery');

You should add the above code just above the ('wp_head'); tag (in some themes it can be in the form of do_action('wp_head'); ), like this:

Please DO NOT add this function in the functions.php file!

Contrary to what you might think, this does NOT disable jquery from loading on the admin side of your blog; rather, it just disables Jquery from loading into your theme.

THE COMPLETE THEME CODE:

For semiologic users: Open the theme’s functions.php file and locate the following:

# kill resource hungry queries
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');

First remove the "#kill resource hungry queries" comment. This would activate all the four functions listed therein. After "remove_action(‘wp_head’, ‘adjacent_posts_rel_link’)", paste the following code:

remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link');
remove_action( 'wp_head', 'wlwmanifest_link');
remove_action( 'wp_head', 'wp_generator');

So that the whole code snippet would be:

remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link');
remove_action( 'wp_head', 'wlwmanifest_link');
remove_action( 'wp_head', 'wp_generator');

For non-semiologic users: If your theme does not come with a functions.php file, you can paste the following code in a new file (I suggest using PSPAD for this), save the file as functions.php and upload it to your theme directory!

On the other hand, if your theme already has a functions.php file then just copy and paste the following code BEFORE THE CLOSING PHP TAG of your theme’s functions.php file:

remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link');
remove_action( 'wp_head', 'wlwmanifest_link');
remove_action( 'wp_head', 'wp_generator');

By the way, you can really do yourself a great favor by learning about more ways to cleanup your wp header (but only IF you are not yawning already! ;) ):

WordPress Performance: Speed Up a Slow WordPress!
Remove Unnecessary Code from wp_head
Remove unwanted WordPress header elements
Optimized WordPress header : Cleanup unwanted element
How to disable scripts and styles
wp_head Question
Some WordPress Stuff

Step 4: (optional): If you use a lot of stats plugins then you can manage them all with just a single plugin called Custom Headers and Footers. I mentioned this because from the little I have noticed, Wp Minify only optimizes your blog’s header, and not the footer (it may have some valid reasons behind this). With the help of this plugin you could insert all the tracking codes into your blog’s footer (rather than the header, where most of the tracking plugins insert the codes by default), thus enhancing your blog’s page load speed. I am not sure if it would work with Google™ analytics code, but it should work with most traditional tracking codes. :) 

As a side note, the fewer plugins you use, the less clutter on your blog’s header! ;)

Step 5: (optional): Please click here to post a nice comment, thanks (but only IF you have managed to stay awake with eyes wide open)! :D