This is a step by step guide on how to set up your own unmanaged server or vps to run as a WordPress Performance server environment.  Using this setup you will have the ability to host a large WordPress Multisite set up or numerous single installs.  This guide assumes you have a basic understanding of using SSH via the Mac Terminal app or Putty for Windows and requires an unmanaged dedicated server or VPS hosting account with either the 32 or 64 bit Debian kernal available.

In my last guide I touted a Nginx reverse proxy cache with WordPress and Apache as the ultimate WordPress performance stack but since then I have found that there is really no reason to use Apache unless you have a specific need for it.  Nginx has matured and works great with the WordPress rewrite engine and even W3 Total Cache now includes Nginx rewrite rules for page cache, minify and browser caching.

Choosing a web host with Debian “squeeze” images available

Debian 6 aka “squeeze” is considered the grandfather of Linux distors and Debian is known for relatively strict adherence to the Unix and free software philosophies.  Debian is also distributed with access to repositories containing thousands of software packages ready for installation and use.

Most of the large managed hosting companies don’t give you the option of choosing your Linux distro so your going to need to find one that does.  The reason for this is that it’s much easier for a hosting company to provide support using cPanel or Parallels Virtuozzo VPS virtualization.  Virtuozzo allows them to squeeze many more VPSs on a box and control the resources and your limited to guess what – Cent OS.

Your going to need a provider that offers Xen virtualization.  Xen is a powerful open source virtualization platform that supports a wide range of guest operating systems including Linux – Debian, Ubuntu, Free BSD, Cent OS, Fedora and more.  When you set up your account have your provider load the Debian 6 aka “squeeze” image on your VPS or install it on your dedicated server.  If you have over 2GB memory go for the 64 bit version.

I use Softlayer (formally The Planet) for my dedicated server because of the state of the art data centers and major broadband backbone it’s connected to.  It also has a very powerful back end portal and allows you to connect to your box over a private VPN.  Linode, Slicehost, and VPS.net  are also very good choices.  I would stay away from Media Temple and Rackspace as I’ve had problems with both and they’ve had well documented  security vulnerabilities in the past.

Next Page: Connecting to your server the first time.

If your reading this anywhere other than C3MDigital.com, Facebook or an RSS reader then your using an un authorized source. C3M Digital | WordPress Development & Consulting - WordPress webdesign and development in Houston Texas

I recently answered a question over at WordPress Answers, Stack Exchanges new WordPress question and answer site, about best practices for using a caching plugin with a shared host.

Not all WordPress users are able to host their blog or website on a private server or VPS and need a way to speed up their websites. There are a few great WordPress caching plugins like WP Super Cache and W3 Total Cache. Both plugins are very popular, well supported by their authors and do a good job of caching.

WP Super Cache is developed and supported by Donncha O Caoimh who is a member of the Automattic team and a core WordPress contributor.

W3 Total Cache was originally developed for Mashable.com by their CTO, Frederick Townes .

W3 Total Cache is much more than a caching plugin. Along with page caching, W3 also does object caching, database caching, minifies and combines css and js files and also has built in CDN (Content Delivery Network) support. This is the only plugin available that tackles all the best practices of High Performance Websites

On shared hosting plans your caching options are limited.

You will only be able to statically cache the html output from your pages. This is the fastest way to serve pages but you loose the dynamic aspects of WordPress like making comments and seeing the latest comments on posts.

There are disk caching options available in W3 Total Cache for objects and database but for object caching you will only see gains if your host is running fast drives and most sites have far too many queries per page (due to poorly written plugins) to see any advantage from database disk caching.

When the plugin is first activated the recommended settings will already be in place.

How to Configure the plugin for best performance on a shared hosting plan

This article will go through all the steps of setting up the plugin to get the best performance gains on a shared host. If your on a VPS or private server you will have a lot more features to work with like using a PHP opcode cache and caching database queries in memory.

Page Cache Settings

Check all the options for page cache

Cache Preload

Turn this on and set the update interval at what ever is appropriate for your site. This will rebuild the page cache at the given interval.

Minify Settings

Select Rewrite url structure and if your going to use the CDN check the auto upload so newly minified files will automatically get uploaded to the CDN.

Minify HTML Settings

Enable and check remove line breaks, inline js and css minification. If your using adsense or another service that uses comment stems enter them here to avoid having them minified.

CSS and Javascript Minify Settings

In the file management choose your theme and add any css files you want combined and minified. There is also a help wizard that will search all your templates and add the suggested files for you.

Using The Help Wizard

W3 Total includes a tool that goes through your theme templates and finds Javascript and CSS files that are used and provides recommended settings. First try theses settings and if problems are encountered go back and modify as needed. Any files highlighted in red are files you have already included to be minified.

The minify settings give you the option of placing the minified files in different locations. After <head>, after <body> and before </body>. It is best to put as many as you can before </body>. If any plugins add inline js you won’t be able to use before </body> for jquery or the plugins js because it will need to load before any inline <script> tags. You can include any combinations of files in each location and for each template. For instance you can set your comment-reply.js to only load on single.php

Browser Cache Settings

This is the most important one to get right. If you properly cache your static content in your users browsers you can drastically reduce page load times and reduce bandwidth usage.

General

Check everything. Make sure and check “do not process 404 errors for static objects”. browser cache settings is a big win for shared hosting because invoking PHP and returning 404 pages to bots etc is a big drain on resources and this feature prevents that.

CSS and Javascript Browser Cache Settings

Check everything and set expires header lifetime to far future. 31536000 seconds is 1 year and what yslow recommends. If you make changes to your css or javascript you have to change the file names to prevent users from using the old version. If your using minify you won’t have to worry about serving outdated content because W3 takes care of changing the name of the minified file for you.

Set your cache Control policy to cache with max age.

There are two more browser cache setting sections. HTMl and Images. For Images use the same settings as CSS and JS.

For HTML don’t set expires unless your site is mainly static. You can use short lifetimes if you want (180 seconds) but I wouldn’t go higher. Enable gzip and you can check “set W3 Headers” so you can check the response headers to make sure they are working.

CDN Settings

CDN is one of the largest performance wins for any hosting scenario even if self-hosted. W3 Total has built in support for popular origin pull and origin push CDN’s and a robust self hosted option that requires you to set up subdomains and cnames. Note: Do not check force override unless new files are being overwritten. Force override will constantly re-upload files even if they already exist. This wastes bandwidth and resources.

Self hosted CDN will let you take advantage of pipelining. Browsers can only download a few files at once, only 4 in some cases. Pipelining is a technique whereby aliases (subdomains for example) of your server are used to allow your browser to increase the practical limit of files that can be downloaded in parallel. Doing so maximizes the throughput of the your internet connection and allows the browser to render a page faster. W3TC takes care of managing these files transparently once DNS CNAMEs (aliases) and subdomains are properly configured.

Support

W3 Total Cache is one of the best supported plugins on the WordPress.org plugin repository. The author responds to all questions tagged w3-total-cache and a support tab is also included in the plugin to use for reporting bugs.

Testing

You should always test your results and tweak your settings accordingly. I like to use WebPageTest.org. To compare my results and identify any potential problems.

How much can you increase your performance using W3 Total Cache on WordPress with shared hosting?

I recently helped a client reduce his page load times from almost 10 seconds to 3 seconds by implementing these settings on his WordPress blog.

Before:

As you can see by the waterfall image he was loading javascript before css which causes a blocking condition. Blocking is when the loading of a script or file makes all other requests wait until it is fully downloaded. He also had 50 external file requests and some 404 errors.

After installing and configuring W3 Total Cache

These results are not perfect but they are a dramatic improvement over what they were. We reduced the total time to load the page from 10 seconds to 3 seconds. By combining and removing the javascript to the bottom we reduced the Start Render time from 3.5 seconds to .45 seconds. The start render time is very important because it indicates when the page starts becoming viewable in the browser. This progressive rendering effect gives the illusion of instant page loads because the user doesn’t notice there are still files being loaded in the background below the fold.

Conclusion

W3 Total Cache is the best choice for a caching plugin because it has so many more features than just caching. What has your experience been with W3 Total Cache or other web performance solutions? I would love to hear some of your best practice tips lets discuss this further in the comments.

Other Performance Resources

Optimizing WordPress for Performance, my WordCamp Houston presentation.
How to add a re tweet button in an Iframe after the page loads for better performance
The Quest for Speed   by Frederick Townes

If your reading this anywhere other than C3MDigital.com, Facebook or an RSS reader then your using an un authorized source. C3M Digital | WordPress Development & Consulting - WordPress webdesign and development in Houston Texas

One of the topics discussed in my WordCamp Houston Presentation, Optimizing For Performance, was putting social media share buttons in an iframe to improve page rendering. I thought it would be helpful to describe in more detail how to accomplish this.

Since Facebook already does a pretty good job of putting their widget code in an iframe we will use the TweetMeMe Re-Tweet button for this example. If you were to just put the code directly in an iframe it wouldn’t help much because Javascript embedded in an iframe will block the rest of the page from loading until it was complete.

To accomplish our goal of progressive page rendering we will need to start with a div placeholder for our iframe code and write a short Javascript function to add the iframe code to our placeholder div once the page has completely loaded. This is the same method Fredrick Townes, creator of the W3-Total Cache plugin and CTO of Mashable.com, uses to place the buttons on Mashable.

First we need to add our div placeholder to our template files where we want the Tweetmeme button to appear. In this case we will use div id=”tm_box” then close the div.

Next we will need to build our iframe src variable.

1. Start with the button.js url that Tweetmeme provides in their embed code:
http://api.tweetmeme.com/button.js
2. Add ?url= followed by the page url (for now we will add URL as a placeholder because we will want the url to be whatever page the button is placed on).
3. Add &style= followed by what button style you will want to use. Either normal or compact.
4. Add &source= followed by your Twitter username.
5. Add &service= followed by a URL shortening service for ease of use we will use the bit.ly service see the Tweetmeme api reference on how to add other services.

Your completed src variable will look something like this:
http://api.tweetmeme.com/button.js?url=URL&style=normal&source=Chris_Olbekson&service=bit.ly

Now we will set the width and height attributes:

For the normal style button: width="50" height="61"
For the compact style button width="90" height="20"

Now that we have all our variable our iframe code will look something like this:

<iframe src="http://api.tweetmeme.com/button.js?url=URL&style=normal&source=Chris_Olbekson&service=bit.ly" scrolling="no" frameborder="0" width="50" height="61" ></iframe>

Now to convert your iframe code from html to JavaScript you can use this simple online HTML to JavaScript Converter

Next we need a JavaScript function get the current page url. We will use the escape() function just like TweetMeme uses in its button.js and we will add window.onload = tweetMemeButton which will fire the code after the page is completely loaded.

Here is our completed JavaScript which we can save as an external file and call it in header.php or footer.php (It won’t matter where we call it because it won’t fire till the page is loaded).

function tweetMemeButton() {
	if (document.getElementById("tm_box")) {
		var iframeCode= "";
iframeCode += "<iframe src="http://api.tweetmeme.com/button.js?url=" + escape(document.URL) + "&style=normal&source=chris_olbekson &service=bit.ly" scrolling="no" frameborder="0" width="50" height="61" >";

		document.getElementById("tm_box").innerHTML = iframeCode;
	}
}

window.onload = tweetMemeButton;

This code is used to add the TweetMeMe Re-Tweet button at the end of this post.

**Update: 08/12/2020
Twitter just announced the release of their new tweet button. I will be evaluating the performance over the next few days.

If your reading this anywhere other than C3MDigital.com, Facebook or an RSS reader then your using an un authorized source. C3M Digital | WordPress Development & Consulting - WordPress webdesign and development in Houston Texas

If your reading this anywhere other than C3MDigital.com, Facebook or an RSS reader then your using an un authorized source. C3M Digital | WordPress Development & Consulting - WordPress webdesign and development in Houston Texas

I will be speaking at Houston’s first WordCamp, a one day camp dedicated to serving beginner to advanced, businesses to bloggers, and everyone in between.

My topic will be “Optimizing for Performance” – How to make your WordPress Blog Faster and Scalable. The discussion will include tips for installing and configuring the W3 Total Cache plugin and how to take advantage of APC, X-Cache, or eAccelerator opcode caching, using efficient CSS selectors and theme files, and how to maximize your MySql database for performance.

If your reading this anywhere other than C3MDigital.com, Facebook or an RSS reader then your using an un authorized source. C3M Digital | WordPress Development & Consulting - WordPress webdesign and development in Houston Texas