WordPressGarage.com

38 ways to optimize and speed up your WordPress blog

WordPress blogs and sites can be notoriously slow. But fear not - here are ways to make your WordPress blog super speedy and fun for your visitors to view with a few tweaks, hacks and plugins. Be sure to check back because I will be updating this post as I discover new and wonderful ways to optimize and speed up WordPress blogs.

[This post is in honor of the current Pessach (Passover) season, a Jewish holiday where we clean our houses frantically in the hope that not one crumb of leavened bread (i.e. regular bread) be found during the 7 day holiday. This post is the WordPress version of Pessach cleaning, where cluttered databases are equivalent to leavened bread, etc. Happy Pessach!]

Define goals and create benchmarks:

1. First, define a goal, such as reducing page load time from 8 seconds to 2 seconds.
2. Measure your initial state and the results of each modification so that you can quantify any improvement. Test your site’s speed with the Website Speed Test, but do multiple tests since the results can be inaccurate due to fluctuations in your internet connection and other factors.
3. Use Pingdom to get a detailed analysis of your blog’s loading time and performance.
4. See what your browser is doing with tools like Firebug’s network tool, Charles Proxy or Wireshark, and review the server logs.
5. YSlow - analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with Firebug. See this presentation from Yahoo! that covers their latest research results and performance breakthroughs. It covers their existing 14 rules, plus 20 new rules for faster web pages. They’ve categorized the optimizations into: server, content, cookie, JavaScript, CSS, images, and mobile.

    

   | View | Upload your own

Reduce the number of dynamic PHP and http calls:

1. “There is an inherent overhead in each HTTP request. It takes substantially less time to serve one 30K file than it does three 10K files.” So combine all files in a type into a library. Learn how here.
2. Use different host names to increase the number of active download threads.
3. Minimize PHP and database queries - Each time a page on your site loads, if your browser has to execute any PHP queries, it adds to the load time. If you replace the PHP queries with static HTML, every time a page loads, your browser just reads the HTML. An example from WP Candy:
   With PHP requests: <title><?php bloginfo(’name’); ?><?php bloginfo(’description’); ?></title>
   Without PHP requests: <title>WPCandy - The Best of WordPress</title>
Joost de Valk says that you can remove 11 queries to the database by doing the following in your header.php and footer.php files:

   • making your stylesheet URL’s static
   • making your pingback URL static
   • making your feed URLs static
   • removing the blog’s WordPress version
   • making your blog’s name and tagline / description staticSee more examples of how you can replace code in your WordPress template files with static HTML here and here.
4. Check if you have too many external calls to things like Amazon, eBay, MyBlogLog, etc. Try commenting them out one by one to see if it speeds things up.

Optimize your files: CSS, HTML, Javascript, images, video

1. Optimize your image files for the web.
2. Make sure that all images have height and width tags.
3. Consider hosting your images on an external site like flickr that has huge servers and can handle the load.
4. Use CSS sprites for static web images. CSS sprites are where the images are added to one larger image file, and laid out in a convenient way. Here’s a CSS Sprites generator.
5. Do not host videos on your server. Upload them to YouTube, Google Video, or any other video sharing site and let them handle the server load.
6. Compress your Javascript, using a tool or by removing formatting (and potentially by shortening function and variable names). This can reduce file size by 60%. Add gzip compression to that as well and you’re looking at a serious size reduction.
7. Compress HTML and CSS by removing HTML formatting, white space (where you divide code among separate lines for easier readability), trimming class names, omitting unambiguous quotes around attributes, etc.
8. Compress your CSS with the CSS Compress WordPress plugin - Automatically removes comments, new lines, tabs, and gzip compresses (GZIP) any CSS file called with “<?php bloginfo(’stylesheet_url’); ?>” Just activating the plugin with the default Kubrick theme will reduce the CSS file from 8k to 1.7k.
9. Compress your CSS by using shorthand CSS. Here’s an example from WP Candy:
   Long: .test {margin-top: 7px; margin-right: 1px; margin-bottom: 5px; margin-left: 3px;}
Short: .test {margin: 7px 1px 5px 3px;}
10. Use external scripts - Instead of placing tons of code in your header.php file, use external scripts. This allows the browser to cache the script so it won’t have to read it for every other page.
11. Validate your code at W3C to make sure you don’t have any major errors slowing down your page.
12. Allow progressive rendering: Load CSS files at the top of the page, from within the head section; load JavaScript files at the bottom of the HTML. And/Or…
13. Stop slow loading scripts from breaking your blog with IFrameWidgets v1.0 WordPress plugin. Slow widgets or snippets of Javascript can either time-out, or prevent the items below them from loading. The plugin creates WordPress sidebar widgets that run in an IFrame. Since IFrames load in parallel to the rest of the page, slow loading JavaScript widgets won’t affect the rest of the page.

Plugins

1. Disable or delete unused plugins - some plugins have tons of script and code, and even create database tables in your WordPress database. Use only the plugins you really need, and delete the rest.
2. Sometimes plugins require that you add a snippet of code to your theme’s template files to call the plugin. Usually, it looks something like this:
   < ?php refer_plugin(); ?>
   However, if for some reason you disable that plugin, you will get an error. Joost de Valk recommends using PHP’s special function called function_exists to prevent the blog from breaking if plugins are disabled or removed. Using it will make the code look like this:
   < ?php if (function_exists(’refer_thanks’)) { refer_thanks(); } ?>
3. Control when your WordPress plugins are loaded: WordPress processes all of the code for all active plugins, even if that plugin isn’t used on a particular page. If a particular resource heavy plugin isn’t used on certain pages, then you can tell WordPress not to load it on those pages by wrapping an if statement around the content of each function to check what page is being loaded. Learn more about how to do this here and here.

Database

1. Use phpMyAdmin to optimize your database: Log in to phpMyAdmin, select all the tables, and then “repair” and “optimize.”
2. Delete excess records in your WordPress database. All plugins use the wp_options table to store data, which is the same table used by WordPress to store all settings for your blog, and is accessed every time you open any page. When you deactivate a plugin, these records are left behind, bloating your database. To clean it up you can use the WordPress Clean Options Plugin, which finds orphaned options left after you have removed plugins and removes them from the wp_options table, or manually as follows: Back up your database, login to phpMyAdmin, open your blog’s database, and click on browser for the wp_options table. Go through this table record by record to identify any records left behind by old plugins. (from WordPress Web 2.0 Spot-Er).
3. Use the Optimize DB plugin to optimize the tables of your database.
4. Use WordPress Plugin: Fix Database to check all tables in your database and fix any errors.
5. Lester “GaMerZ” Chan’s WP-DBManager 2.11 plugin sorts your database backup files by date in descending order, can repair databases, and allows automatic scheduling of database backups and optimization.

Caching and protecting for server overload

1. WordPress has a built-in caching system. Learn how to enable the default WordPress object cache. This has apparently been disabled in version 2.5.
   
2. WP-Cache 2 - caches Worpress pages and stores them in a static file for serving future requests directly from the file rather than loading and compiling the whole PHP code and then building the page from the database.
3. WP Super Cache - This plugin is a fork of the WP-Cache 2 plugin, and generates html files which are served without ever invoking a single line of PHP.
4. PHP Speedy - PHP Speedy is a script that you can install on your web server to automatically speed up the download time of your web pages.
5. Use the Expires and cache-control max age headers for all pages; Make dynamic pages support the if-modified-since request header; Use far future expiry headers on static resources; Use the cacheability engine to test that you have caching and validation set up correctly. If you don’t know what all this means, don’t worry, neither do I, but you can find out more here.
6. Digg Protector plugin - The Digg Protector will determine if a visitor is from Digg, and if the visitor is indeed from Digg, the plugin will serve them a remotely-hosted version of the image. Otherwise, the plugin will serve the locally-hosted (on that server) image.
7. Some more caching possibilities: MySQL query cache, PHP Compiler Cache. Learn more here.
8. Configure Apache for maximum performance.

Happy Optimization!

Sources:

Speed up your website: Part One

How-to: Optimize your site for speed - really excellent article with practical tips

How to Enable the Default WordPress Object Cache - talks about wp-cache, wp-cache 2, and built in wordpress caching.

Digg Protector

4 Simple Ways To Speed Up WordPress

Speed up and clean up your WordPress!

5 Tips to Help Your Slow or Sluggish Blog or Web Site (Wordpress Especially)

Deleting excess records in your WordPress database

WordPress on Speed: 17 Tweaks to Accelerate your WP

The 3 Easiest Ways to Speed Up WordPress

WordPress Theme Hacks

Diggproof & Speed up Your Wordpress Blog

WordPress Optimisation: Control When Plugins Are Loaded

Posted in Tips | 16 Comments »

4 reasons not to host your blog on WordPress.com

When starting out, many bloggers seek out the cheap and easy route, either choosing to blog on Blogger, WordPress.com, or another free and hosted blogging platform. This approach makes sense, since a person can never know until they’ve started if they even like blogging, let alone whether they’ll be successful.I almost always suggest to beginner bloggers to set up a blog on WordPress.com, but the reason is not because I think this is ideal, but because it is easiest to migrate a blog from WordPress.com to a self-hosted WordPress.org site, which is ideal (as opposed to migrating from Blogger, which can be a nightmare). One of the reasons it’s so easy is because you can select the same permalink structure as in your original WP.com blog, and just change the main domain name part in a 301 redirect. Also, by using WP.com, you will become familiar with the WordPress system and interface, which is similar in the self-hosted WordPress.org version.

Why am I against WordPress.com?

I am not against WordPress.com. I think it’s a great service, and the quality of the features is unmatched in any of the other free hosted blogging platforms. In addition, people in the SEO industry have told me that due to the strength of the WordPress.com network, blogs that are hosted there do incredibly well in the SERPs. But if a person wants to take up blogging as a serious activity, or finds that their WordPress.com blog is growing, I suggest that they move their blog off of WP.com to their own self-hosted blog. Here is why:

1. Limited blog design flexibility - whenever I’ve tried to use a WordPress.com blog, I’ve always found myself stuck at some point because I can’t add certain features. Users are limited on WP.com by the amount of customization they can do to the CSS, even if they pay for extra access to the CSS. They also can’t customize the loop, and the sidebars can only be modified to the extent that widgets allow. Also, WP.com users can’t add WordPress plugins, which is one of the keys to expanding your blog’s features.
2. You don’t control your content - as soon as you are using a service that is hosted by someone else, you have lost partial ownership over your content. I’m not talking about what exactly it says in the WP.com terms of service (we’ll get to that soon), but I am talking about the issue of your content sitting on someone else’s servers. I personally prefer to try to keep my content under one roof - my own. As for the WP.com Terms of Service - you are at the mercy of their discretion as to whether your content is appropriate. When hosting your content on someone else’s servers, you are always at risk that someone may decide that your content is inappropriate, and they can easily shut you down.
3. Hosting quality issues may haunt you - if the WP.com servers are having trouble, like the recent DoS attack on the WordPress.com servers, you will suffer. Of course, that is the case on all servers, but if you are really unhappy with a service provider, you can call them up, complain, and always change servers if need be. When your blog is on WP.com, it’s not as easy.
4. You are at risk of being censored in certain countries - upon finding content that they don’t like on WP.com, certain countries with undemocratic tendencies will simply block the entire system. While it is possible for them to just block the individual WP.com blogs that they find offensive, these countries either don’t care enough to try, or are happy to block an entire blogging universe since blogging is all about free speech, and they are not. Countries that have blocked WordPress.com are Turkey, China and Brazil.

WordPress.com is a great service, and the people providing it are incredibly generous. However, like any other free hosted service, it has its drawbacks which should be taken into account when deciding on which path to take for your blog: free hosted or paid and self-hosted.

Posted in Tips | 14 Comments »

Stylish Firefox add-on plus Google Redesigned equals pretty Gmail

I know that Gmail and Firefox don’t really have anything to do with WordPress, but I decided to write about them anyways because:

1. I have nothing earth-shattering to say about WordPress right now. Everyone else is talking about version 2.5, and I still haven’t installed it (my bad) so I don’t have anything to add to the conversation.
2. I would guess that most WP users are Firefox fans and probably Gmail fans too, so…so nothing. That’s not a very good argument, so I’ll stop right here.

ANYWAYS, Gmail is ugly. The interface is so eye-poppingly cluttered and unimaginative that this is actually one of the reasons I haven’t really gotten into Gmail. I just found it hard to get my eyes used to.

Well, now there’s a solution! There is a cool Firefox add-on called Stylish, that lets you define custom styles for any page on the web. For example, if you didn’t like the brown on WordPress Garage and prefer a nice shade of magenta, you could use Stylish and define a new CSS style that will make all text on this site magenta. Basically, as they say on the Gmail Redesigned page, “Stylish is to CSS what Greasemonkey is to JavaScript.”

ANYWAYS, the people at Globex Designs have created a special Stylish style for Gmail - Gmail Redesigned. They have taken the over 1500 (!!) styles and very complicated structure of Gmail and redesigned it. They are updating the styles almost daily, and if you’ve already installed Gmail Redesigned and you visit their site, it will tell you if any updates have been made since your last install and you can update with one click.

I installed it, and I can tell you it makes a world of difference. Gmail is now…pretty. Pretty Gmail is no longer an oxymoron.

Gmail Redesigned says it currently only supports English, but Hebrew worked for me too, and is not supported with the “Better Gmail 2″ or the “Remember The Milk” extensions. Support for these extensions will be added in the future.

And now, a partial screenshot of my Gmail account with all incriminating evidence either archived or painted over (hopefully):

Posted in Tips | 2 Comments »

Plugins and hacks for improving the WordPress TinyMCE editor

The WordPress TinyMCE editor mercilessly strips tags at will. Some will tell you that in order to avoid this problem you should disable the visual editor, but this is not a realistic solution since a. Many people feel more comfortable using a visual editor and b. The editor should not remove code from the coding editor, period.

This problem is becoming even more acute with the proliferation of embeddable services available on the web for easily sharing rich content like videos, slideshows, and documents. In order to display these services on your blog, you need to embed the code within your post, but doing so will often break your blog layout since the divs are stripped.

There are many topics on the WordPress forum related to this issue, none of which have been resolved satisfactorily. The question is - do the folks behind WordPress have any intention of fixing this problem?

How to fix it

A few days ago I wrote about a way to make the WordPress TinyMCE text editor stop stripping div tags. The original code that I wrote didn’t work, but I subsequently found a solution that I tested and did work, and have since corrected the original post.

While I was searching for a way to get the hack to work, I found a bunch of other hacks and plugins that help you force the WordPress editor to stop stripping tags, or show you how to customize the editor. So here are some other options you may find useful:

Plugins:

1. TinyMCE Advanced - Among the many things this plugin does, it says it supports XHTML specific tags and (div based) layers. This may mean that it doesn’t strip div tags.
2. Disable wpautop Plugin - This plugin disables the WordPress wpautop function. The wpautop function changes double line-breaks in the text into HTML paragraphs (<p>…</p>), and this plugin disables that annoying feature.

Hacks:

1. To stop the WordPress editor from stripping out div tags, replace line 25 in the wp-includes/js/tinymce/plugins/tiny_mce_config.php file with the following: $valid_elements = ‘#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;
   (This method was described in my previous post on this subject.)
2. To stop the editor from removing line breaks, open wp-includes/formatting.php, and change line 402 to this: $content = str_replace('<br />', '<br clear="all" />', $content);. Alternately, you can use <br clear=”none”/>.
3. To get the advanced toolbar functions to open by default, instead of needing to click on the Show/Hide Advanced Toolbar button, open wp-includes/js/tinymce/tiny_mce_config.php and change line 34 to read $mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'fontselect', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo')); (via 1000 Miles or Bust)

That’s it for now. I’ll probably update this post as I find more information on hacking the TinyMCE editor.

Posted in Tips | 7 Comments »

Amazing hack for fixing the code changing habits of the WordPress editor

Update March 23, 2008: The code that I originally wrote below based on Roland O’Connor’s post didn’t work. I subsequently found this WordPress Forum topic, which had the correct code to replace, and I’ve corrected the post below.

Also, I wrote a follow-up post to this one with more tips on using plugins and hacks for fixing this editor problem. So read this post, and then check out Plugins and hacks for improving the WordPress TinyMCE editor

Have you ever embedded code in your WordPress editor, only to find that saving the post causes the code to change and your whole blog’s layout to break?

Have you ever tried to use divs in your WordPress editor, only to find that all your div tags have been replaced with p tags?

Well, despair no further! Roland O’Connor has written about an easy solution that fixes this problem.

Here’s what you do:

1. Find the file wp-includes/js/tinymce/tiny_mce_config.php.
2. Find the line
   $valid_elements='p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]‘;
3. Change it to
   $valid_elements ='-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;
$valid_elements = '#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]‘;


Make sure all the code is on one line. That’s it!

The only problem with this hack is that you have to remember to redo it every time you upgrade your WordPress blog. Unless of course someone feels like making this into a plugin…hint hint, wink wink, nudge nudge.

Posted in Tips | 10 Comments »