To get the most out of our handwork, we suggest you simply work your way through the list, modifying your server as needed, and skipping the areas you’ve already completed. If you follow our directions to the letter, we promise you’ll emerge with a much faster system—Or your money back! So before you realize we’re doing this at no charge to you, let’s jump straight into the heart of the matter with:

1. Serve Your Static Media from a Cookie-Less Domain

About 80 to 90% of the time, your users are spending their time loading static content from your WordPress blog. This means that far more than the majority of the time a user is viewing your site, they’re waiting for items like images, stylesheets, scripts, Flash, etc. to load and present themselves on the screen. As such, you can optimize this content to arrive more quickly by telling WordPress to load it all from a cookie free domain. This eliminates a few precious micro-seconds of load time, which may not seem like much, but can really amount to a whopping time loss when added to other delaying issues.

Thankfully, it’s not hard to set up this kind of arrangement within WordPress. To do so, simply set these two constants within your wp-config.php file as so:

define(“WP_CONTENT_URL”, “http://static.yourdomain.com”);

define(“COOKIE_DOMAIN”, “www.yourdomain.com”);

After you’ve done that, just check to be sure you’ve marked “bloginfo( ‘template_directory’ )” to load your static content within your theme files. That’s it, allowing us to move onto point two!

2. Set-Up Cached Headers to Expire for Your Static Content

Serving up cached media is another great way to reduce load times. Thankfully, creating expiring headers for your static content is also fairly easy to do within WordPress, and can save you a lot of lag-based headaches. The best way to do so is to use the following code form the href="http://html5boilerplate.com/" target="_blank">HTML 5 Boiler Plate. You can append it to your .htaccess file for immediate results. This, essentially, tells your server to expire headers at a future date, saving them in a cached format until that expiration date. So without further ado, here’s the code to get the job done! /> —————————————————————————————————————- /> <IfModule mod_expires.c> /> ExpiresActive on /> # Perhaps better to whitelist expires rules? Perhaps. /> ExpiresDefault      "access plus 1 month" /> # cache.appcache needs re-requests /> # in FF 3.6 (thx Remy ~Introducing HTML5) /> ExpiresByType text/cache-manifest "access plus 0 seconds" /> # Your document html /> ExpiresByType text/html "access plus 0 seconds" /> # Data /> ExpiresByType text/xml "access plus 0 seconds" /> ExpiresByType application/xml "access plus 0 seconds" /> ExpiresByType application/json "access plus 0 seconds" /> # RSS feed /> ExpiresByType application/rss+xml "access plus 1 hour" /> # Favicon (cannot be renamed) /> ExpiresByType image/x-icon "access plus 1 week" /> # Media: images, video, audio /> ExpiresByType image/gif "access plus 1 month" /> ExpiresByType image/png "access plus 1 month" /> ExpiresByType image/jpg "access plus 1 month" /> ExpiresByType image/jpeg "access plus 1 month" /> ExpiresByType video/ogg "access plus 1 month" /> ExpiresByType audio/ogg "access plus 1 month" /> ExpiresByType video/mp4 "access plus 1 month" /> ExpiresByType video/webm "access plus 1 month" /> # HTC files  (css3pie) /> ExpiresByType text/x-component "access plus 1 month" /> # Webfonts /> ExpiresByType font/truetype "access plus 1 month" /> ExpiresByType font/opentype "access plus 1 month" /> ExpiresByType application/x-font-woff   "access plus 1 month" /> ExpiresByType image/svg+xml "access plus 1 month" /> ExpiresByType application/vnd.ms-fontobject "access plus 1 month" /> # CSS and JavaScript /> ExpiresByType text/css "access plus 1 year" /> ExpiresByType application/javascript "access plus 1 year" /> ExpiresByType text/javascript "access plus 1 year" /> <IfModule mod_headers.c> /> Header append Cache-Control "public" /> </IfModule> /> </IfModule> /> —————————————————————————————————————-

3. Optimize that Database!

Another great way to fix your server up to deliver your WordPress site with the most efficiency is to optimize your database. How does one do this? With mountains and mountains of code that take hours to append—We’re kidding! WordPress makes this unbelievably easy, thanks to a number of free plug-ins. You can search the plug-in database for server optimization, but some of our favorites are href="http://yoast.com/wordpress/optimize-db/">Yoast Optimize DB and href="http://livepage.apple.com/">WP DB Manager. Keep in mind too that most caching plug-ins also help with a lot of this, so you may find most of the workload being taken care of by your already extant caching softwares.

4. Use Cached Media As Much As Possible

On that note, creating cached .html files saves your server a mountain of database queries, and can easily be accomplished through any number of quality plug-ins. Essentially, these additions turn all those queries into static pages that load easy, saving your viewer from horrendous lag on the front-end. So what plug-ins do we recommend? Thanks for asking! Here are our favorites, though as with the database optimizers, there’s plenty more to be found in the plug-in database!

Our favorite caching utilities include: href="http://wordpress.org/extend/plugins/wp-super-cache/">WP Super Cache, href="http://wordpress.org/extend/plugins/hyper-cache/">Hyper Cache, and href="http://wordpress.org/extend/plugins/w3-total-cache/">W3 Total Cache. These generate .html files, but we also use DB Cache to cache the database queries themselves, saving even more time on the front-end.

5. Use a Content Delivery Network

We’re quite tremendous fans of the content delivery network. Everything about the technology gets us excited, and though we tend to evangelize the service to everyone we know, adding a CDN solution to your WordPress site is extremely easy, and can really save you a lot of load time. There are several freely available plug-ins that offer a fair amount of content distribution, but if you’re looking for a quality option, you really aren going to need to spend a little. However, we should mention the benefits of signing up for a CDN tend to far outweigh the cons, making the following services every bit as useful as they are expensive. If you’re hung-up on the price, though, we’ve also included a free option!

Our favorite content delivery providers are: href="http://aws.amazon.com/s3/">Amazon S3, href="http://www.maxcdn.com/">Max CDN, href="http://mediatemple.net/labs/cdn/">Media Temple CDN, and href="http://wordpress.org/extend/plugins/free-cdn/">Free CDN.

6. Compress and Adjoin All Those JS and CSS Files Where Possible

Generally speaking, it’s a fantastic idea to compress both your JS and CSS files, as this reduces the overall size of your website, and allows for speedier load times at the end-user level. However, if you’re looking to take your optimization to a whole new level, we also strongly suggest you combine the two where possible. Combining multiple files into a single offering can greatly reduce the number of HTTP requests from your web server, saving your viewers precious seconds in load time. And—you guessed it—we do happen to have a number of plug-ins ready to help you out!

Our favorite JS compressors include href="http://closure-compiler.appspot.com/home">Closure Compiler and href="http://www.minifyjavascript.com/">Minify JavaScript. Our favorite CSS alternatives are href="http://www.minifycss.com/css-compressor/">Minify CSS and href="http://www.csscompressor.com/">CSS Compressor. Alternatively, you can also use the href="http://wordpress.org/extend/plugins/wp-minify/">wp minify plug-in to combine your JS and CSS files directly from WordPress.

7. Compress Your Image Files

On the subject of compression, it’s also a pretty fantastic idea to compress your images, too. This reduces the overall size of your website, and can knock off quite a few moments during your site’s load time. The plug-in we favor uses the API of the smush.it site to compress your images for optimized use. It’s a brilliant bit of coding, and we can’t speak highly enough of it. So without further ado, go ahead and snag href="http://wordpress.org/extend/plugins/wp-smushit/">WP Smush IT to increase the speed of your site. You can also use CSS Sprite to reduce the number of HTTP requests, if you’re feeling particularly gung-ho.

8. Compress Your Static Content into a gZip

One more compression tip, and then we promise we’ll stop. You see, just as it’s generally a good idea to compress your CSS, JS, and image files, so is it also a great idea to shrink down all of that extraneous static content we mentioned earlier. Just as most of your load time comes from grabbing this junk, so too can it be relieved by downsizing the overall cost of the HTTP request. Thankfully, there’s an incredibly simple way to do this within WordPress: And taking the time to add the following code snippet can dramatically reduce your wait times. So without any more babbling, here’s the code you’ll want to add to your .htaccess file. In case you were wondering, this is yet another bit of genius straight from the HTML5 Boiler Plate: /> —————————————————————————————————————- /> <IfModule mod_deflate.c> /> # force deflate for mangled headers /> # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/ /> <IfModule mod_setenvif.c> /> <IfModule mod_headers.c> /> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding /> RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding /> </IfModule> /> </IfModule> /> # HTML, TXT, CSS, JavaScript, JSON, XML, HTC: /> <IfModule filter_module> /> FilterDeclare   COMPRESS /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ text/html /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ text/css /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ text/plain /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ text/xml /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ text/x-component /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/javascript /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/json /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/xml /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/xhtml+xml /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/rss+xml /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/atom+xml /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/vnd.ms-fontobject /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ image/svg+xml /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ application/x-font-ttf /> FilterProvider  COMPRESS  DEFLATE resp=Content-Type $ font/opentype /> FilterChain     COMPRESS /> FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no /> </IfModule> /> <IfModule !mod_filter.c> /> # Legacy versions of Apache /> AddOutputFilterByType DEFLATE text/html text/plain text/css application/json /> AddOutputFilterByType DEFLATE application/javascript /> AddOutputFilterByType DEFLATE text/xml application/xml text/x-component /> AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml /> AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype /> </IfModule> /> </IfModule> /> —————————————————————————————————————-

9. Disable eTags

eTags are generally a great way to aide the development of cached content within WordPress. However, if you’ve shrunk down all of your media and are using expiration headers for the majority of your static content, having them enabled isn’t nearly as good of an idea. As such, you should turn all of them off by adding the following line of code to your aforementioned .htaccess file. It’s a single line: /> File ETag none /> and with all the other improvements we’ve made during the course of this article, it will tie the bow on your load time savings.

Related posts: