After looking around in search and forums, I could not find an all-in-one, Ultimate WordPress Optimization Guide. So, I made one! Simply put, speed is the name of the game. As we already know, the faster a site is, the more traffic it tends to maintain. Any site that takes longer than a second to load shows significant drop-off rates from visitors. You might be able to bring users in with Search Engine Optimization, but this WordPress Optimization Guide is specifically for improving User Experience. Let’s keep the audience on the page!

After trolling my way through forums, groups, and comment posts, it seems everyone is need of a WordPress Optimization Guide. In this guide, I hope to answer all of your questions and hopefully show you some tips you don’t already know. I will cover basic web tools, plugins, .htaccess hacks, data/media compression, security measures, and much more. Check it out!

1. Browser Tools | WordPress Optimization Guide

   • YSlow

     YSlow is developed by Yahoo and can work within the Firebug menu. After requesting the current page, YSlow runs numerous speed test and let’s you know where you site is dragging. In the menu you will find some additional tools like the YUI CSS Compressor, All JS Beautified, and All Smush.It (I will have different solutions for these three tools, but keep them in mind for later). These tools attempt to minify or compress all CSS and JavaScript into one file, All Smush.It on the other hand, compresses images down to their smallest file-size possible while still retaining the same level of quality (this is like a better automated version of PhotoShop’s “Save for web and devices”. YSlow also informs you of some new vocabulary regarding optimization that we will be talking about later on in this guide. Install it, run it, and do some reading.

     

   • Page Speed

     Page Speed is Google’s version of YSlow, but in my opinion isn’t as good. It often gives higher scores on sites that take over 3-5 seconds too load. It does break down the data a bit differently with more precision. With that said, I still use it in conjunction with YSlow just to get a second opinion.

   • Speed Tracer

     Speed Tracer is a Google Chrome only Extension. Most of us use FireFox to develop, so this one is only for those of you who are heavier Chrome users. This tool looks a bit different than the last two. It breaks down load times in ms for various load sections of the site. This is helpful for finding out what specific part of the site is dragging.

   • What do these tools tell us?

     We now have a check list of things we need to take care of (I will ignore CDN’s and basic HTML/CSS syntax errors for now. These are no-brainers). This tutorial will tackle this list and some addition WordPress Optimization methods.

     1. Minify and combine all CSS and JavaScript
     2. Remove all inline JavaScript and styles, unless this data is specific to a single page
     3. Compression of all images (Includes the use of Photoshop’s “save for web and devices”, Smush.It and Image Sprites)
     4. Cache all files with gZip from the server
     5. Use of .htaccess to control traffic
     6. Cache all pages with a caching plugin
     7. Place all CSS at the top of the document and all JavaScript at the bottom (Allows the entire site to appear while still loading additional scripts)
     8. Configure entity tags (ETags)
     9. Reduce requests in code
     10. Compress and minimize mySQL database size
     11. Additional Plugins to the rescue
     12. Remove Unneeded JavaScript from the wp_head() Hook

2. Minify and Compress all CSS and JavaScript | WordPress Optimization Guide

   • WP Minify

     WP Minify will automatically grab all CSS and JavaScript, minify and compress them, and finally, place them in perfectly on every page of your site. This plugin allows you to cut the weight of all those additional file loads implanted by those pesky plugins. This saves you lot’s of time considering you cannot edit plugins and the files make servers load (.css and .js). Be cautious, some caching plugins offer this feature already.

   If you server seems to be having troubles with memory limits, or is just slowing to a crawl, considering minifying CSS and JS manually. If you take this route, disable/delete this plugin.

3. Compress Images | WordPress Optimization Guide

   • Photoshop’s “Save for Web and Devices”

     A must have in the WordPress Optimization Guide… Some people are not aware of the simple and true method of saving images for the web. Saving images in this way can save yourself some major load times. Whenever you create a graphic (yes, even website structural images), go to “File” > “Save for web and devices”. Here you can see the image in its original quality while comparing it with the new low-sized web counterpart. Jpeg’s usually work well for larger images, and PNG’s for graphics that need transparency or images that are smaller. Always remember the background-repeat CSS rule that allows you to make images that are 1 x 1 pixels in resolution and repeat. Spare not a single byte in file size while still retaining quality. It will all be worth it when applied to all images on the site.
     

   • Smush.It Plugin

     WP Smush.It is an amazing plugin. When images are uploaded to your WordPress server, Smush.It will automatically crunch data saving you lot’s on file sizes. I ran this on my WP build and found the plugin reducing files sizes all the way up to 75%! If you already have loaded images on your server, you can still Smush them. Simply go to the “Media” menu in your WordPress wp-admin page, go to library, look for the last column on the page entitled “Smush.It”, and notice a link to “Smush” for each image in the Media Library. While it may be annoying to click through all the images, I decided to Smush only the images on pages with the highest traffic.

   • smushit.com/ysmush.it/

     You may be thinking, “Why is he repeating himself?” Well, on the Smush.It site you can upload files to be smushed and sent back as a .zip. Why would you need this? Don’t forget, you haven’t smushed the images that make up the structure of your site. That means the background, header, sidebars, and so on. One of my images reduced in size by 60%! Worth the hassle.

4. Compress Files with gZip | WordPress Optimization Guide

   gZip is a simple method of compression that most high traffic sites use. This requires editing of the .htaccess file, so PLEASE save a back up of this file before overwriting it. I have taken sites down because of this. Don’t learn the hard way, or you might be talking to your server provider begging them to restore this little guy.
   <ifModule mod_gzip.c>  mod_gzip_on Yes  mod_gzip_dechunk Yes  mod_gzip_item_include file \.(html?|txt|css|js|php)$  mod_gzip_item_include handler ^cgi-script$  mod_gzip_item_include mime ^text/.*  mod_gzip_item_include mime ^application/x-javascript.*  mod_gzip_item_exclude mime ^image/.*  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule>


5. More Edits with .htaccess to Control Traffic, Uploads, and Security | WordPress Optimization Guide

   • Top 10 .htaccess Hacks

     Check out my Top 10 .htaccess Hacks as a starter. These are quick to add and help out with security, spammers, and maintenance. Add additional code snippets below.

   • Force Browser Caching

     Self explanatory. This creates a lifespan of all files on your server. The specified time tell the browser when a re-download is due/necessary.
     # manual caching - force use of browser cache
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

   • Limit File Size Uploads

     # limit file uploads to 10mb
LimitRequestBody 10240000

   • Disable Directory Browsing

     Remove the ability for users to browse directories.

     # disable directory browsing
Options All -Indexes

6. Caching Plugins | WordPress Optimization Guide

   • WP Super Cache

     WP Super Cache is indeed a super plugin… it is a very fast caching engine for WordPress CMS that produces static html files from php calls. This allows pages/posts on your site to be cached as appose to being called from the database. This might not seem like much, but on higher traffic sites, this plugin will help keep load times down and server stress low. Gives you options on what to cache and how often so you can make sure the homepage gets special attention. Caching can be user defined as well, so you can remove caching for your most lucrative users.

     As an update, I have recently created a tutorial on how to install this plugin properly. Check it out!

   • W3 Total Cache

     A must mention for this WordPress Optimization Guide, theW3 Total Cache plugin is possibly the best caching plugin for WordPress. I have always used WP Super Cache, so I can’t personally vouch for this plugin, but I have read other developers announcing its superiority. Try one, or them both, but only have one activated at a time. Let me know which is better!

7. Removing ETags | WordPress Optimization Guide

   • Simple .htaccess snipet. Look up ETags on Yahoo! for more info.# kill them etags
FileETag none

8. Reduce Server Requests | WordPress Optimization Guide

   • Creating Image Sprites

     Mt friend Dave Shea over at A List Apart has a great tutorial on creating image sprites. This method allows you to group images together into single file so the server only has to load one. Simply put, this saves sever stress.

   • Removing Unneeded Server Calls

     Most themes have hard coded PHP snippets that call your mySQL database for data. Sometimes, these calls (or queries) are unnecessary and can be replaced with plain HTML. Major culprits usually exist in the header.php and footer.php files of a theme. Keep in mind that if you are using caching plugins aggressiveness, you may not have to worry too much about reducing server queries.

     So, instead of a Facebook Open Graph meta call like this,
     <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
     You could replace with all HTML,
     <meta property="og:site_name" content="Geebart" />
     If you look hard enough, you can probably find anywhere from 4-10 unneeded queries.

   • Debug PHP Queries

     Simple add this code to your theme/page/.php include…
     <?php
foreach ( $wpdb->queries as $query ) {
echo "$query[0]<br />";
}
?>
     And add this code to your wp-config.php file…
     define('SAVEQUERIES', true);
     This should generate a list of queries for the last page view.

9. Compress Database for Faster Loads | WordPress Optimization Guide

   • Optimize DB Plugin

     The Optimize DB Plugin quickly optimizes tables in your database, and reduce their overhead. Simple, quick and developed by Yoast so you know it is super optimized!

   • Mass Automated Deletion of Unapproved Comments

     Akismet should take care of spam on its own, but If you happen to find yourself with a database full of comment spam, check out this nice post on Blogopreneur.

10. Additional Plugins | WordPress Optimization Guide

    • Easy iFrame Loader

      As you probably already know, iFrames are a huge stress on pages. On top of this, WordPress doesn’t seem to support them very well. Frame code tends to disappear in the visual editor, and fails to load on pages at times. This plugin fixes all that, forces the frames to load last (just like JavaScript) on the page, adds shortcodes, a widget, and some nice settings to fiddle with. Worth it if iFrames are dragging your site down. Besides, who wouldn’t want to support media for iPhones and iPads?

    • Use Google Libraries

      Use Google Libraries to offload commonly used AJAX Libraries that most plugins share. This will save some server load and relocate JavaScript resource requests to Google.com. This is the ultimate form of a Content Distribution Network (CDN). Simple. You should also consider using Google Sites to host other files to save on loads.

11. Remove Unneeded JavaScript from the wp_head() Hook | WordPress Optimization Guide

    • What is the wp_head()?

      The wp_head() is a function.php hook that generates CSS and JS files into the “head” of your theme. These files come from plugins and built-in WordPress features. Theoretically, if you found CSS and JS being generated in the header that was unneeded, we could remove them by telling the wp_head() not to call them. Before we do that, we need to figure out what CSS and JS have the largest file sizes and/or are extraneous. Back to YSlow!

    • Using YSlow to find problem CSS and JS

      After running YSlow in the browser, click on the “Components” menu item. This will generate a list of resources being spent on certain file loads (doc, js, css, cssImage, iFrames, image, and favicon). If you expand the JS section (this usually has the most files and thus the largest loads) look for the largest file that is soaking up the KB’s. In my experience, Jquery is usually the biggest culprit. I noticed that my Lightbox Plus plugin was causing a huge drain because of this Jquery JS file.

      If I decided that Lightbox and all of this jQuery wasn’t worth the bandwidth. Besides, why not test my site load without it being called. Normally you would disable this script within the functions.php file, but doing so will destroy your site’s admin page (it requires jquery). This is where the wp_head() hook comes in handy. Again, this is located in your header.php file at the end of your “head” tag. Before wp_head() is called, implant the code below to disable Jquery scripts from loading…
      <?php wp_deregister_script('jquery'); ?>
      To my surprise, this snippet of code removed not just one script, but 4! Talk about saving on file loads.

      You can also be selective on which pages load jQuery. Maybe the homepage doesn’t contain images that will work in a lightbox. Extend the code above with…
      <? if (is_front_page();): wp_deregister_script('jquery'); endif ?>

      I would like to thank Falcon1986 for the original post. Check it out and learn more!

12. Content Distribution Network (CDN)

    This is an updated section. Recently, I have created a tutorial on setting up a CDN with Amazon CloudFront with WP Super Cache using the Original Pull Method. Follow this tutorial to a T to start using a CDN.

With this WordPress Optimization Guide, your site could go from a “D” rating in YSlow to an “A” or “B”. Mine went from a high “D” to a low “A” on the homepage and a low “C” to a mid “A” on interior pages.  My homepage now weighs in at 217kb while my interior pages average around 300kb.  Now that’s small! Likewise, it will be easy to score over a 90/100 on SpeedTest.

I still have some more work to do… At the moment I am simply using too many plugins. Not that plugins = slow loads, but I just have a little more than I’d like. I’m going to start attacking the plugins that require the most server queries and see how I can make a hard-coded replacement. If that doesn’t work, I’ll try a different, lighter plugin that has similar functionality. If you happen to disable plugins and/or delete them, sometimes you have to clear your cache. The Cache plugins above will sometimes forget paths to minified CSS and JS files. A rule of thumb, always re-cache when doing heavy maintenance.

To replace plugins, look for code snippet sites to help bring some lighter-weight functionality to your site. I have created a list of my favorites, check it out.

A CDN also helps, but I realize most people want to get around paying for this service.  If you start to see some heavy traffic, a CDN is most certainly worth it.

Just remember less code usually means a faster site. Remove white space and compress, compress, compress!