Where Can I Improve the Speed of My WordPress Web Site?

There are 5 general areas where you could improve the performance of your WordPress web site:

1. PHP code
2. HTML code
3. CSS code
4. Javascript code
5. MySQL database

It would take a lot more than a single blog post for me to go through all of this in great detail. One of the easiest ways to speed up your WordPress is install a bunch of caching and “code minimizing” WordPress plugins.

WordPress Plugins That Speed Up WordPress

I tested the following WordPress plugins and measured the impact of the plugins on the loading times of my web site.

1. WP Super Cache – Generates html files that are served directly by Apache without processing comparatively heavy PHP scripts.
2. WP Minify – Combines and compresses Javascript and CSS files to improve page load time.
3. WP Optimize – A database clean up and optimization tool that allows you to remove post revisions, comments in the spam queue and unapproved comments.
4. WP Smush.it – Reduce image file sizes.
5. DB Cache Reloaded – Caches every MySQL database query to improve performance.
6. Clean Options – Removed redundant database entries in the “wp_options” database table caused by uninstalled plugins and themes.

The plugins above eliminate the need for you to edit source code or fiddle with images to reduce their sizes. This is a great start to optimizing your WordPress for speed but more improvements can be done by tweaking the source code of your PHP, Javascript and CSS files.

Case Study: MaverickWebCreations.com Before WordPress Speed Optimization

I should have disabled my WP Super Cache plugin before the test. What you’re seeing here is the effect of all the plugins above except for the WP Super Cache plugin.

This is a screen shot of the web page speed report I got at WebSiteOptimization.com. As you can see, I have 73 HTTP requests with a total page loading size of 881972 bytes or 861.30 kilobytes (KB). I am embarrassed that my web site got so big!

Case Study: MaverickWebCreations.com After WordPress Speed Optimization

Previously, I had 73 HTTP requests and a total size of 881972 bytes or 861.30 KB. Now, I’ve got 52 HTTP requests and a total size of 694141 bytes or 677.87 KB. That’s a reduction of 21 HTTP requests and a 183.43 KB reduction in file size. That’s a nice 21.3% reduction in page size!

Your results will vary depending on how your web site is set up. Optimizing WordPress for speed was something I did not put a lot of emphasis on before I discovered how bad things can get over time. These plugins are relatively easy to install and configure. Give them a try and you will wonder how you got by without them for so long!

I had a feeling it would not be so easy but I thought it would be worth a try because I get to move the attachment, tags, comments and pages to my destination blog.

At my Maverick Web Creations’ blog, I selected the Tools -> Import link. I had to upload the XML file I got from the export to import the content. After the long wait, I could see that over 400 posts/pages were moved over!

The hard part was sorting out the categories and delete the unwanted posts/pages. I should have deleted the useless content before exporting/importing content from my previous WordPress blog to this WordPress blog. That would have saved me a lot of time.

Fixing the Google Friend Connect WordPress Plugin’s XHTML Errors

The Google Friend Connect WordPress Plugin has a few XHTML errors.

• It uses the <br> tag, which has been depreciated and the <br /> tag should be used instead.
• It uses the <b> tag, which is depreciated and the <strong> tag should be used instead.
• There is an unnecessary <br> tag in the fc_wp_comment_form() function. This may cause your comment form to look weird.
• 1 of the img tags does not have the closing />.

To fix these errors, you need to make the following changes.

Original code:

'<img align="left" src="' +  viewer.getField("thumbnailUrl") + '">' +
'<b>Hello ' +  viewer.getField("displayName") + '!</b><br>' +
'<a href="#" onclick="google.friendconnect.requestSettings()">Settings</a><br>' +
'<a href="#" onclick="google.friendconnect.requestInvite()">Invite</a><br>' +
'<div id="loadprof"></div>';

// The fc_wp_comment_form function
// This just creates a div tag that will be replaced by the javascript code
// when the page gets loaded
function fc_wp_comment_form() {
 ?>
   <br>
   <div id="profile">
   </div>
 <?
}

Edited code:

'<img align="left" src="' +  viewer.getField("thumbnailUrl") + '" />' +
'<strong>Hello ' +  viewer.getField("displayName") + '!</strong><br />' +
'<a href="#" onclick="google.friendconnect.requestSettings()">Settings</a><br />' +
'<a href="#" onclick="google.friendconnect.requestInvite()">Invite</a><br />' +
'<div id="loadprof"></div>';

// The fc_wp_comment_form function
// This just creates a div tag that will be replaced by the javascript code
// when the page gets loaded
function fc_wp_comment_form() {
 ?>
   <div id="profile">
   </div>
 <?
}

1. Replace all <br> tags with <br />.
2. Replace all <b> tags with <strong>.
3. Remove the <br> tag in the fc_wp_comment_form() function on line 49.
4. Add a back slash to the <img> tag on line 150.

Editing the CSS of Google Friend Connect WordPress Plugin’s Sign In Box

Original code:

#profile {
font-size:13px;
margin: 20px 40px;
border: 1px solid blue;
padding: 15px;
background-color: #E5ECF9;
}

Edited code:

#profile {
font-size:12px;
margin: 0px;
padding: 0px;
}

This really depends on how you want the sign in box to look like. I hate the blue border and how it was aligned to the centre of the page. So I removed the border and margin/padding space.

You might also encounter CSS problems with the code below:

Original code:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
h2 {color: #3366CC; font-size: 18px; font-weight: normal}
h3 {font-size: 13px; font-weight: normal}
h4 {color: grey; font-size: 11px; font-weight: normal}

Google adds this code to your WordPress site whether you like it or not. This to me, is very sloppy coding from Google. They could have added classes instead of forcing all h2, h3, h4 tags to look the way they want it to. Lucky for me, I use CSS classes to control how my h2, h3 and h4 tags so I am not affected by this code. However, if you use a general h2, h3, h4 without any classes or IDs, then good luck!

Edited code:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
h2 {color: #3366CC; font-size: 18px; font-weight: normal}
h3 {font-size: 13px; font-weight: normal}
h4 {color: grey; font-size: 11px; font-weight: normal}

I found that it was okay for me to remove the body code and it did not affect the sign in box.

Hopefully we will see some improvements to Google’s plugin in the future. It is still rather buggy at the moment.

My fix was inspired by this post from Texto.de. I also posted my exclude_tree fix on the WordPress forum.

Open up wp-includes/post-template.php in your favourite editor. Look for the line 616:

$r['hierarchical'] = 0;

Add 2 back slashes to the code to “comment hide” it.

//$r['hierarchical'] = 0;

That’s all there is to it! Stop using the exclude_tree parameter for the wp_list_pages function until a fix has been announced.

TwitThis is a free service and WordPress plugin that allows you to add a “Tweet This” button at the end of your WordPress posts/pages. Another plugin would be Tweet This, a WordPress plugin with a bit more features than the TwitThis. I prefer the latter because it helps me to shorten the URLs automatically with 3rd party URL services.

If you don’t wish to use a WordPress plugin, you could follow the “Tweet This” hack from WordPress Hacks.

I wanted more control on how and where I should display my Tweet This button and I decided that I had to use the Tweet This WordPress plugin to achieve the look and function I want.

Step 1: Download, Upload and Active Tweet This

Dowload Tweet This from Richard X. Thripp’s web site. Upload the files into the /wp-content/plugins folder of your WordPress installation and activate the plugin in WordPress.

Step 2: Configure the Tweet This Settings

If you would like to manually display the Tweet This link with your own button, you should uncheck the first 2 automatic options. For this example, I will be using one of the free Twitter buttons I downloaded from MilkAddict.com so I will not need the automatic options. Feel free to select any URL service you wish to use.

Step 3: Download An Alternative Tweet This Icon (Optional)

If you would prefer to use graphics to display the Tweet This link, here’s a list of Twitter buttons you may use for your web site.

• Twitter buttons from MilkAddict.com
• Twitter buttons from Siah Design
• More Twitter buttons from Siah Design
• 31 Twitter Logos from VincentAbry.com
• Twitter buttons from Randa Clay
• Twitter buttons from WebDesign by mts
• Twitter buttons from limeshotmarketing
• Twitter buttons from iconspedia

Step 4: Add a Tweet This Link to Your Blog Page and/or Post Template

Open the files single.php and page.php in your favourite HTML editor. Add the following code to your template.

<!-- TWITTER - START -->
<a href="<?php tweet_this_url(); ?>" rel="nofollow"><img src="<?php echo bloginfo('template_directory'); ?>/images/icon-twitter.png" width="70" height="70" alt="Tweet This" /></a>
<!-- TWITTER - END -->

My assumption was you upload your Twitter button to a folder called “images” within your theme folder.

Preview of My Tweet This Button

I displayed my Tweet This button below each post. Here’s what happens when you click on it….

Hopefully people will use your Tweet This button to submit your interesting blog posts to their Twitter profile. I hope you enjoyed this Twitter/WordPress tutorial. Feel free to send me any questions via the comments or email.

1. /wp-includes/feed.php
2. /wp-includes/version.php
3. /wp-includes/post.php
4. /xmlrpc.php
5. /wp-admin/users.php

Gotta love these tiny updates!

An alternative way to organize my avatars would be to use Gravatar. Gravatar allows you to display your avatar through a simple URL.

The Normal Avatar Code

<div id="twitter_photo"><img src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/images/icon-twitter.jpg" alt="" width="73" height="73" /></div>

The Gravatar Avatar Code

<div id="twitter_photo"><img src="http://www.gravatar.com/avatar.php?gravatar_id=%3C?php%20echo%20md5%28" your...@email.com="" );="" ?="" />" width="73" height="73" alt="" /&gt;</div>

You should replace “your...@email.com” with the email address of your Gravatar avatar email address. With Gravatar, I no longer need to upload and manually change the code whenever I update my avatar. Now, I only need to edit it from Gravatar and all my sites will display the updated avatar.

I got my idea from Tim Ferris’ blog…

You see that nice speech bubble effect? It is actually quite a pain in the neck to create with pure CSS and images. It is possible to create it with pure CSS code in Firefox but not in Internet Explorer. I decided to go with Will Mayo’s CSS Speech Bubbles because the code is simpler than other similar speech bubble scripts I found on the internet. I further simplified Will’s code to cut out the unnecessary code and make it even more idiot proof.

Step 1: Download Will’s CSS Speech Bubbles

Download Will’s CSS Speech Bubbles and extract the zip file’s contents to your computer. This script uses the Curvy Corners Javascript by Cameron Cooke and Tim Hutchison. This is a really cool way of creating rounded corners without messing around with images. The image files in Will’s package are for the part where the speech bubbles connect with the text but they have nothing to do with the rounded corners.

If you open “index.html” from Will’s files, you will see the examples above. We have 2 challenges to make it look like Tim’s blog.

1. The “triangle” of each speech bubble is pointing downwards but we want it to point to the left.
2. We want to add an image to the left of the speech bubble but the default code won’t align to the right of the image.

Step 2: Download and Install Twitter for WordPress

I tested about 5 Twitter plugins that claimed to display the latest Twitter status messages on your WordPress blog. Some did not work at all, while others did not work like I expected. I settled on Twitter for WordPress because it is easy to install and customize.

Step 3: Tweak Will’s CSS Speech Bubbles

This just won’t work out of the box for our desired layout. Before we do that, let’s take a look at Will’s default code.

<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
	<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
	<script type="text/JavaScript">
	  window.onload = function() {
	      settings = {
	          tl: { radius: 10 },
	          tr: { radius: 10 },
	          bl: { radius: 10 },
	          br: { radius: 10 },
	          antiAlias: true,
	          autoPad: true
	      }
	      var myBoxObject = new curvyCorners(settings, "rounded");
	      myBoxObject.applyCornersToAll();
	  }
	</script>

This is what you must have within your head tags. I shall put all that window.onload code into a Javascript file and load it from there.

/* Normal Bubble */
div.bubble {
	width: auto;
	font-size: 0.75em;
	margin-bottom: 24px;
}
div.bubble blockquote {
	margin: 0px;
	padding: 0px;
	border: 1px solid #c9c2c1;
	background-color: #fff;
}
div.bubble blockquote p {
	margin: 10px;
	padding: 0px;
}
div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(tip.gif) no-repeat 20px 0;
	font-style: normal;
}
/* Rounded Bubble */
div.bubble div.rounded {
	margin-bottom: 10px;
	border: 3px solid #fff;
	background-color: #b7e0ff;
}
div.bubble div.rounded blockquote {
	border: 0;
	background-color: transparent;
}
div.bubble div.rounded blockquote p {
	margin: 0px 10px;
}
div.bubble cite.rounded {
	position: relative;
	margin: 0px;
	padding-left: 15px;
	padding-top: 12px;
	top: 9px;
	background: transparent url(tip-rounded.gif) no-repeat 15px 0;
}
/* Pimped Bubble */
div#pimped.bubble {
	font-size: 0.9em;
}
div#pimped.bubble div.rounded {
	color: #fff;
	border: 3px solid #fff;
	background-color: #111;
}
div#pimped.bubble cite.rounded {
	background: transparent url(tip-pimped.gif) no-repeat 15px 0;
}

This is the CSS code you should include into your web page or you own style sheet.

<div class="bubble">
		<blockquote>
			<p>Works great for blog comments!</p>
		</blockquote>
		<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
	</div>
	<div class="bubble">
		<div class="rounded">
			<blockquote>
				<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
			</blockquote>
		</div>
		<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
	</div>
	<div id="pimped" class="bubble">
		<div class="rounded">
			<blockquote>
				<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
			</blockquote>
		</div>
		<cite class="rounded"><strong>Dark Bubble</strong></cite>
	</div>

For this tutorial, I shall create a speech bubble that is a cross between the first and second examples. I like the simplicity of the first speech bubble but it does not have any rounded corners. The code above shows 3 different implementations of the speech bubbles. I do not understand why Will uses the blockquote tags because I find them rather redundant. I also disagree with some of the CSS code and I shall show you how I cut it down to the bare essentials.

My code is very different from Will’s default samples. Firstly, I uploaded the file “rounded-corners.js” into the “js” folder of my WordPress theme.

//LOAD THE CURVY CORNERS FOR THE ROUNDED CLASS
window.onload = function()
{
	settings =
	{
		tl: { radius: 10 },
		tr: { radius: 10 },
		bl: { radius: 10 },
		br: { radius: 10 },
		antiAlias: true,
		autoPad: true
	}
	var myBoxObject = new curvyCorners(settings, "rounded");
	myBoxObject.applyCornersToAll();
}

I also created a file titled “rounded-corners-loader.js” with the code above and uploaded into the same folder as the previous “rounded-corners.js” file. Please note that I have renamed the default file name of “rounded_corners_inc.js” to “rounded-corners.js”.

Here’s what you need to add to the header.php file of your WordPress theme:

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/rounded-corners.js"></script>
<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/rounded-corners-loader.js"></script>

Here’s my updated CSS code for the CSS speech bubbles. Add this code to the style.css file of your WordPress theme:

/* TWITTER BUBBLE */
#twitter_bubble
{
	width: auto;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
#twitter_bubble #twitter_photo
{
	position: relative;
	width: 89px;
	height: 73px;
	margin: 0px;
	padding: 0px;
	background: url("/wp-content/themes/YOURTHEME/images/bg-twitter-bubble-tip.gif") no-repeat right;
	z-index: 10000;
}
#twitter_bubble #twitter_photo img
{
	border: 1px solid #D5D5D5;
}
#twitter_bubble div.rounded
{
	width: 170px;
	margin: -63px 0px 0px 88px;
	padding: 10px;
	border: 1px solid #D5D5D5;
	background-color: #FFFFFF;
}
#twitter_bubble div.rounded p
{
	margin: 0px;
	padding: 0px;
	font-size: 11px;
}

I created my own graphic to display on the left of the speech bubble. I won’t go through the steps on how I created this because that would be a whole different topic. Please feel free to use your image and update the “YOURTHEME” code in my CSS code to match the image folder of your WordPress theme.

Now we shall display the speech bubble and your avatar in your WordPress sidebar. I am assuming that you already have a picture ready. I created 73 px by 73 px picture of myself. Feel free to create a picture with whatever dimensions you want but you would have to edit some of the CSS code. Alternatively, you may use Gravatar avatars to replace the code below.

I design my sidebars with a fixed width therefore I manually restrict the width of the speech bubble to make it look good within my sidebar.

<div id="twitter_bubble">
		<div id="twitter_photo"><img src="<?php echo bloginfo('template_directory'); ?>/images/icon-twitter.jpg" alt="" width="73" height="73" /></div>
		<div class="rounded"><p> on Vincent's <a href="http://twitter.com/vincentliaw" rel="nofollow">Twitter</a>, <a href="http://friendfeed.com/vincentliaw" rel="nofollow">FriendFeed</a>, <a href="http://www.linkedin.com/in/vincentliaw" rel="nofollow">LinkedIn</a> and <a href="http://www.facebook.com/people/Vincent_Liaw/701298781" rel="nofollow">Facebook</a>.</p></div>
	</div>

Twitter for WordPress has a bunch of options for you to configure. Please refer to the plugin’s site to find out more about how you may customize the Twitter status messages if my preferred settings do not suit your needs. The Twitter messages end with the time of the message like “12 hours ago”. I simply added my own text “on Vincent’s Twitter….” with links to my social networking accounts with the same update. I use Ping.fm to post status messages to my social networking accounts to save me time.

This tutorial seems very long but it really is quite simple. I briefly explained the differences between my code and Will’s code, which took up quite a big chunk of this article. You might have to tweak my code further to make it look good on your web site.

Please check out my internet marketing blog to see it action as I have not added this Twitter speech bubble to this blog at the time of this post. Let me know if you have questions about this tutorial and ideas to improve it further.

With the release of WordPress Version 2.1, the option to set your own front page can be accomplished via your Administration > Settings > Reading panel. However unlike the old explanation that follows, you must NOT name your home page template file “home.php”. If you do, this will cause a conflict with the WordPress 2.1 system.

I personally find that there are some weird behaviours when I use the recommended way of setting a page as my WordPress home page. I noticed that WordPress does not really recognise the home page as a page when I use the is_page() function.

I like to display my blog posts in the “/blog/” folder but I do not wish to install WordPress in the “/blog/” folder. There is a document on WordPress.org on how to make your blog appear in a non-root folder. I find it too much of a hassle to implement it that way.

That is why I still prefer to use the Filosofo Home-Page Control plugin to manage my home page and blog directory.

I don’t have to edit any reading settings.

This is where the magic begins. Simply select the page you wish to display as your home page and and enter a name for your blog directory. I also ignore my permalink settings and leave it as it is. That’s how I store my blog posts in a “virtual blog folder” and have all other posts and pages in the root folder. A working example is the web site you’re looking at!

Sometimes the “Page Template” field disappears when you are trying to update the page template of your WordPress pages. This usually happens after you have upgraded your WordPress to a newer version.

Here’s how you can fix the missing page template…

Step 1: Activate Another WordPress Theme

I am using my own custom WordPress theme so I activated the default WordPress theme as an example.

Step 2: Re-Activate Your WordPress Theme

Activate the WordPress theme you were using when this bug occurred.

Step 3: Reload Your Edit WordPress Page

You should see the “Page Template” field back in the “Advanced Options” when you edit your pages. I don’t know why this happens nor do I know how to permanently fix it. This is just what I do to fix it as and when it happens.