Wordpress Speed Hacks – Go Top Gun

This is the 2nd Guest Post by the one and only @Side3Media, or Christopher Doherty. It’s been a personal pleasure of getting to know him better, especially since it appears he’s a “little” smarter than me in a number (a lot) of areas.
He also gets points for the wickedly good photoshop skills… If you want to read his other post, go here.
So you have made the jump to self-hosted Wordpress.
Let’s get you ready for Top-Gun School.
Moving to a self-hosted WordPress install can be both rewarding and stressful. Now that you are on your own, you can add those features to your blog, change up your theme in dramatic ways and enjoy the added flexibility of your own space on the internet. Unfortunately, you also lose out the deal because you no longer have the full arsenal of servers of Wordpress.com keeping your site running smoothly.
Not a problem….
Once you have selected your hosting provider (preferably one that has the flexibility to grow with you) you need to tweak your install for Top-Gun performance. You see you never know when a blog post is going to be popular, very quickly. So you need to be ready for that digg, that twitter, that word of mouth to check it out that could bring your site to a screeching halt.
Some of the blogs that I read have had these problems recently, so I decided to follow up with a post started on Human3rror (ChurchCrunch founder John’s superhero alter-ego), John gives us some quick tips on how to improve self-hosted Wordpress performance with some quick database tweaks.
You can find the post here at Epic Wordpress Speed Hacks .
Done?
Okay….now the engine that runs the behind the scenes of your site has a some ninja like Top-Gun skills to battle the traffic, we can take a look at the front end.
I did want to give a quick warning, these tips range from the beginner to a little more advanced level. Some of these involve editing your wordpress theme files manually.
1. If you are not comfortable making these changes, you probably want to have someone help.
2. If you are doing this on your live server, first make sure you have copies of your theme pages in case you miss something.
3. If you change your theme often you will have to make these changes each time you switch.
4. I added this line because I felt it looked more important if I had 4 points in my list instead of 3. Thanks.
Now that that’s out of the way we can begin…
Images:
Images are some of the biggest thieves of your page load times. As internet readers have short attention spans, you have the potential of losing your audience with slow load times. There are a number of tools out there to help so it will be a personal preference on what you use. If you don’t already have a program, I found this really slick app called Shrink-O-Matic that could be just what you are looking for. Shrink-O-Matic is a drag and drop image editor built on Adobe Air. It’s a lightweight application that won’t impact your desktop performance and Shrink-O-Matic is a niche application, it does one job and does it well.
Screencaps from Christopher at Lightvox on Vimeo.
Editing image sizes will have a huge impact in your page performance. If you want to use Hi-Res photos, you can always put a link to a photo stored on Flickr or Photobucket and save yourself some bandwidth.
The next section gets into a bit more advanced editing. If you are familiar with editing HTML you will do just fine. Again, make a backup and you can always overwrite your changes if you make a mistake.
Wordpress Queries:
Wordpress stores your information in a database and recalls the information it needs to present it in a web browser. You don’t create a new page for each post, just an entry in the database and Wordpress pulls it together through templates and queries. In this section we talk about data that pretty much stays the same throughout the life of your blog. So, why does Wordpress need to check a database to know where to find files it has to load every time you load a page?
1. Header.php
Your blog is your blog and unless you decide to change the url for some reason it’s pretty much going to stay that way.
In looking at the header we find:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="
<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
This is the standard HTML for a webpage so it can be replaced with:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
If you are settled on a theme and your blog feed things like:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
can be changed to static links like:
<link rel="stylesheet" href="http://PATH TO YOUR STYLE SHEET/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="YOUR BLOG NAME" href="http://YOUR BLOG URL/feed" />
<link rel="pingback" href="http://YOUR BLOG URL/xmlrpc.php" />
<meta name="generator" content="WHATEVER VERSION OF WP YOU ARE USING" />
Take a look at your Header.php in the Wordpress Dashboard and open your blog in a web browser if you are not sure about the absolute paths. If you view the source all the paths will be viewable there.
Just these quick changes took 8 queries out of your page.
2. Navigation
The majority of bloggers have tons of posts and only a few pages. You have your standard pages like; about me, archives, contact, categories, etc. and chances are you are not adding new pages every day, so why bother having wordpress check to see your pages and load them from a database. Change the dynamic links to static ones.
Take a look at this nav section
<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
</ul>
</div>
This code tells WP to get the page names from the database and present them as a “li” but if you look at the source code for your page in a browser you can get the HTML code for the pages and just copy and paste that into the section of your theme files that load the navigation. Like this:
<div id="main-nav">
<ul>
<li><a href="http://YOURSITE/PAGE-LINK">Home</a></li>
<li><a href="http://YOURSITE/PAGE-LINK">About</a>
<li><a href="http://YOURSITE/PAGE-LINK">Advertise</a></li>
<li><a href="http://YOURSITE/PAGE-LINK">Contact Us</a></li>
<li><a href="http://YOURSITE/PAGE-LINK">Privacy Policy</a></li>
</ul>
</div>
9 queries down let’s see what else we can do.
3. Categories.
Check your categories. Come up with a few categories that all of your posts can fit into and change the query to load your category list to static HTML. If you have to add categories later you can drop it in manually.
4. Includes
Some Wordpress themes use includes. This tells the page to load other pages and add them as part of the current page. Check the pages of your templates for includes they look like this:
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
Changing the TEMPLATEPATH to static HTML (view your source code in a browser for the path) since it is unlikely that your pages are going to move around without you knowing.
This could remove 1 or 2 more queries depending on your theme.
5. Footer.php
A lot of themes have tons of queries in the footer.php. Check the footer for items as well that you can replace or remove.
As an example:
<div id="credits">
<p id="site-information">
<strong>Content © <?php bloginfo('name'); ?></strong>
Proudly powered by <a href="http://wordpress.org/">WordPress</a><br/>
</p>
<p id="rss-feeds">
<a class="rss-entries" href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a><br/>
<a class="rss-comments" href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>
</p>
<p id="site-run-stats">
<?php echo get_num_queries(); ?> queries.<br/>
<?php timer_stop(1); ?> seconds.
</p>
<span class="clearer"></span>
</div>
All these queries can be removed or replaced with static info. If your theme footer contains a timer as shown in the above example, you can remove that section completely.
By fixing just those pieces, we have removed about 18 queries from your pages. If 100 people visit one page on your site that’s 1800 queries removed, 1000 people hit your site thats 18,000. If they look at two pages 36,000, and so on. I think you get my thought process here.
Extraneous Content :
This section is more from a personal observation of web surfer behavior and areas where you can optimize your page. In other words my personal ranting section.
1. Archives
If you have been blogging since Jan 1903 congratulations, but honestly I don’t think anyone going to your site says “Oh I wonder what he/she wrote about in Sep. 1927″. If you are going to have a listed archive on your page you really should limit it. Have 6-12 months listed and have your full archive on a separate page.
2. Tag clouds
Check your stats. Is anyone really clicking on them? I am sure that you will find if you have concise navigation and well thought out categories there is no need for a tag cloud. At this point it’s gimmicky and overdone. That widget you are using to load the cloud is wasting server resources. Not to mention diverting search engine bots down never ending loops of posts and tags. With that said, make sure you put tags on your full posts. If people want to click they will and it does enhance the relevance of your page.
3. Repeated info.
Got, top comments by, most recent comments and most commented posts, most popular posts, etc. widgets? Are they all on the same page? It fills that space quite nicely but does it really have value, think about how much of that information is the same or close to the others. Pick one or two and drop the other widgets, valuable page weight and database resources are being used.
4. Plugins
Before you install another plugin. Ask yourself if the ones you have now are really necessary. Try to limit the number of plugins to those you really need. Things like twitter status can be displayed on your blog with a few lines of code instead of a full plugin and widget.
Like this:
<!--twitter -->
<div id="twitter">
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURUSERNAMEHERE.json?callback=twitterCallback2&count=3"></script>
</ul>
</div>
<!--twitter end -->
With a good hosting provider, the database tips from Human3rror and these tips here you are well on your way to Top-Gun blog status.
If you have any other great tips, or questions leave a comment below.






