Going to Performance School: YSlow, WordPress, and ComicPress

ComicPress: The Technical Guide

Now that ComicPress Manager has reached a fairly stable point at 1.1.2, I have a bit of time to write about some of the more technical aspects of using WordPress + ComicPress to publish your Webcomics. This series of posts quickly walks you through what it takes to make WordPress + ComicPress work, and is in no way meant to be a comprehensive guide to setting up a WordPress + ComicPress site.  These entries are mostly geared toward the slightly above average WordPress user, someone who is comfortable editing the PHP templates necessary to make their site work, and who has a basic knowledge of WordPress, PHP, HTML, and CSS. A lot of this information is here because of the questions that have been asked on the Lunchbox Funnies ComicPress forum, and so this guide is sort of an attempt to keep those questions from needing to be asked again.

Be warned that some of the material in here is of a much more technical nature than simply editing templates, and that you’d need a background in PHP, WordPress, and other server technologies to get a lot out of these tips. If you’re a total newb, I highly recommend starting with the WordPress template primer, Stepping Into Templates and the PHP simple tutorial.

First, to subsequently ask and then answer some questions about ComicPress and ComicPress Manager…

Why use the ComicPress theme?

Because it’s a straightforward way to publish Webcomics on your own server, and it provides all of the advantages (and disadvantages) of using WordPress as the backend. At its most basic, the work required to create a Webcomic site and post comics is extremely simple.

Why not use Webcomics Nation, Drunk Duck, or any other the other Webcomics hosting services?

Hosting your own comic gives you unparalleled flexibility, but at the price of dealing with the added complexity of maintaining your own server software (WordPress + plugins) and, potentially, bandwidth bills if you become popular, which have hit, and destroyed, numerous Webcomic artists over the years.

Why not use static HTML pages?

To save time and to make the inevitable site redesigns go much more smoothly. It’s 2008, and your server supports some sort of Web scripting language, be it PHP, Perl, Ruby, Python, VB.Net, or C#.Net – it’s time to start using it.

Why not roll my own content management system (CMS)?

While WordPress is not perfect, you do get the advantages that one gets when using a popular CMS: prompt security fixes, a large, experienced user base, and a large number of plugins that provide functionality that you don’t have to write yourself. Trust me, I’ve re-invented the CMS wheel many times, and I got sick of having to maintain most of that code myself. Moving to WordPress has let me concentrate on the important parts of managing a site – the usability, the design, the content.

WordPress is big and slow!

…and there are techniques you can use to greatly improve WordPress’s speed and reduce bandwidth, both optimizations being important not only for desktop machines but for mobile phones, which will only get more popular in the coming years.

What about other blogging solutions like Movable Type?

Why not? I know a few people who use Movable Type for their Webcomics, and they like it a lot. And I’ll be the first to say that the WordPress API really needs a good ole’ redesign (honestly, get_adjacent_post() should be able to return an adjacent post, no matter what type of page you’re looking at).  But these entries are about ComicPress, therefore we talk about WordPress here, warts and all. 

Basic Requirements for WordPress + ComicPress

A webhost with support for the following:

• WordPress (standalone install, not an account at WordPress.com)
  • MySQL server version 4 or higher
  • PHP version 4.4.8, but version 5.2 or higher is highly recommended
  • If your host installs WordPress for you, you need to be able to use and modify custom themes and, ideally, install & customize plugins.  Some hosts who pre-install WordPress do not allow this.
• FTP/SFTP access with the ability to chmod/chown files & directories

Optional PHP extensions/external programs for enhanced functionality:

• ImageMagick or GD installed for processing images using ComicPress Manager
• Zip extension installed for uploading Zip files of comic images in ComicPress Manager
• Alternative PHP Cache (APC) installed and configured for caching compiled PHP opcode and (optionally) storing cached data in memory
• Xdebug installed and configured for improved error reporting, better var_dump() output, and the ability to profile PHP code using KCacheGrind/WinCacheGrind

PHP 5

It’s highly recommended that you find a host that uses PHP 5. PHP 4 was discontinued at the end of 2007 and there are many performance and security benefits that PHP 5 provides.

Getting Started, or, Webcomics Fame in 5 Minutes

• Install WordPress on your hosting account, or have someone help you install it.
• If you choose, you can move the WordPress root so that your site is delivered from http://mycoolsite.cool.wow/ instead of http://mycoolsite.cool.wow/WordPress/.
• Be sure to secure your WordPress installation before going any further.
• Install ComicPress in your wp-content/themes folder and ComicPress Manager in your wp-content/plugins folder.
• Create your comics folder at the root of your WordPress install (wherever the index.php file lives) and make it writable by your Webserver.
• Make your themes folder writable by your Webserver.
• Log in to your WordPress site.
• Set up your blog information.
• Activate ComicPress Manager.
• Set up ComicPress using the ComicPress Manager Config screen, adding categories as necessary.
• Upload comics using ComicPress Manager.
• Webcomics Fame!

That’s the end of Part 1. Come back next week for Part 2, which covers Site Performance, Basics of ComicPress, and ComicPress Manager!

(You’re reading Part 2 of ComicPress: The Technical Guide. Read Part 1 here.)

Site Performance

Having a responsive site means more readers can read more pages in less time. It also means that more ads will be shown, more product pages will be shown, and more search engines can index your content more often. It also means that if you get hammered by a social networking site that you can take the hits and serve all those potentially new readers. “Death by Popularity” has claimed a lot of Webcomic authors.

A Simple Way to Improve Performance

Install and activate wp-cache2. If your site’s content doesn’t change too often, set the timeout in seconds to a high value (3600 seconds = 1 hour, so if your site only changes once every day, set the timeout to 3600*24 = 86400 seconds. If you do tricky server-side dynamic stuff on your site, setting the cache time to a small value, say 120 seconds, will still provide some benefits.  While you’re working on your site, be sure to disable caching, otherwise you’ll always see cached pages and you’ll never see your changes.

Things You Shouldn’t Do In Your Theme’s PHP Code When Using wp-cache2

• Changing the content based on the browser that’s visiting
• Showing things on the page that must be random

Use JavaScript for those purposes.

The Alternative PHP Cache (APC)

If you’re on a personal, colocated, or virtual private server, such as a Linode (disclaimer: affiliate link, but they are really good and I’d recommend them even w/o the affiliate program), you can most likely use APC. APC will cache compiled PHP code (called “opcode”) in memory, and this speeds up code execution greatly, as you no longer have to:

• load the code off disk
• translate it into machine code instructions
• and then throw away the code and start fresh

with each hit to your Website.

WordPress + a bunch of plugins takes up about 10 MB of memory, so be sure to allocate enough RAM to APC to avoid cache full errors. Virtual Private Servers are almost always memory-bound, so good RAM management is important. Also, too many cache full errors and your site can go down. Not good. Active monitoring of your RAM for the first few weeks of using APC, until you understand how your site reacts with it turned on, is crucial.

If you’re really good at PHP, you can even cache the slower parts of your theme in APC’s shared memory and get an incredible speed boost. The sidebar on my site performs a lot of database accesses. It’s also the same across all pages on the site at all times. Even with wp-cache2, that sidebar will need to be redrawn with every page access, so creating the sidebar once and caching it in memory improves site performance even more than with just wp-cache2 alone.

There are other opcode caches out there, but I like APC because it is easily installed as a PECL module. It’s also free.

Installing and Choosing a ComicPress Default Theme

Download and unzip the ComicPress theme distribution, then upload all of the folders to the wp-content/themes/ folder in your WordPress install.  Within the ComicPress installation are a number of default themes, geared toward different comic sizes/orientations. You can then use the theme selector to swap between themes and see which one you want to start your customization with.

Configuring ComicPress

Two parts of your site need to be configured properly for ComicPress to work:

• there need to be enough categories defined
• there needs to be a folder created to hold your comics.

Both of these parameters are defined in the comicpress-config.php file that lives in your chosen ComicPress theme directory. Inside of comicpress-config.php, the following global variables arae defined:

• $comiccat – the ID number of the category for comic entries
• $blogcat – the ID number of the category for blog entries
• $comic_folder – the name of the folder that holds your comic image files
• $rss_comic_folder – the name of the folder that holds your RSS feed image files
• $archive_comic_folder – the name of the folder that holds your Archive page image files
• $archive_comic_width – the width, in pixels, of the images in the Archive folder
• $blog_postcount – the number of blog category entries to appear on the home page of your site

You can edit this file by hand, or you can use ComicPress Manager to edit your config. Additionally, if you have ComicPress Manager installed, you’ll be warned if you’re missing any of these critical components.

Comic Folder

By default, ComicPress expects a directory called comics to be located in the same place as the WordPress index.php file (this may be different if you’ve moved your WordPress root):

• /index.php
• /wp-content/
• /comics/

Your comic files are placed in this directory.  This directory name can be changed in the comicpress-config.php file. Enter in the name of the folder, without leading or trailing slashes, in between single or double quotes, as the value for the $comic_folder variable:

$comic_folder = "my_comic_folder";

The archive and RSS folders have the same format (more about them below):

$archive_comic_folder = "my_archive_comic_folder";

$rss_comic_folder = "my_rss_comic_folder";

Categories

A ComicPress install requires that two categories be defined in WordPress, a comic category and a blog category. Child categories are not supported at this time. In the WP Admin area, visit Manage -> Categories and make sure you have at least two categories defined.

If you are manually editing your comicpress-config.php file, you will need the category ids. The easiest way to obtain these is to visit Manage -> Categories, enable the status bar in your browser, and then hover over the link to edit the category. The category will appear in the url in the status bar, as a number, after the cat= part of the url.

This category id is then placed, in double quotes, into the appropriate variable definition in the comicpress-config.php file for your theme, either for $blogcat or for $comiccat:

$blogcat = "3";

$comiccat = "5";

Other ComicPress Settings

Two additional settings in comicpress-config.php are the Archive image width and the homepage blog post count. The Archive image width ($archive_image_width) is used to scale comic images for Archive views, and is also used by ComicPress Manager as the size at which to generate thumbnail images. The homepage blog post count ($blog_postcount) controls how many posts that are in your $blogcat will be shown on the home page. If you don’t want a blog on your homepage, for instance, set this to “0″.

Naming Comic Files

By default, comic files are named with a prefix of YYYY-MM-DD and require an extension (gif, jpg, png). Everything between the end of the date and the period that separates the extension is optional with regards to ComicPress. ComicPress Manager uses that information between the prefix and extension to automatically generate a title for the posts that it generates. The date format can be changed by modifying the calls to mysql2date() to use a format other than Y-m-d.

Using the default format, dates need to be zero-padded. So, for a comic that goes live on January 1, 2008, the date would be 2008-01-01.jpg.

Changing the Date Format

If you want to use a different date format, such as YYYYMMDD (which translates to mysql2date(’Ymd’)), you have three options, all of which require modifying the functions.php file in your chosen theme:

• Find-and-replace all occurrences of Y-m-d with your chosen date format. The date format for mysql2date() is the same as the PHP date() function’s format.
• Define a constant at the top of the file with your chosen date format, then find-and-replace all occurrences of Y-m-d with the name of your constant:

  define("CP_DATE_FORMAT", "Ymd");

  ...

  $todays_comic = mysql2date(CP_DATE_FORMAT, $post->post_date);

• If you’re using ComicPress Manager, you’ll need to configure the default date format there anyway. Use ComicPress’s defined constant, CPM_DATE_FORMAT, in your theme:

  $todays_comic = mysql2date(CPM_DATE_FORMAT, $post->post_date);

Creating a Comic Post

For this example, we’re assuming a comic that is going live on January 1, 2008.  Upload a comic to the comics folder with the correct date prefix:

/comics/2008-01-01-my_new_years_comic.jpg

Log in to WordPress and write a new post.  Set the go-live date of the post to be the same as the date of the comic (2008-01-01).  The time of the post matters somewhat in that WordPress is not yet Daylight Saving Time aware. Theoretically, publishing a post at 12:00am in DST means the post goes “live” one hour earlier on the prior day. I publish my own comics after 2:00 am for this reason. There are plugins which compensate for this deficiency, but I’ve never tried any of them:

• Automatic Timezone
• Time Zone plugin

Be sure to select the comic category you defined earlier to be the category for the post. Publish the post and you’re done! Webcomics Fame!

Archive & RSS images

By default, ComicPress will take the files as they exist in the comics directory and scale them, via HTML (<img width=”<?= $archive_image_width ?>”>), for the Archive view, and will deliver the unscaled images in the RSS view. You have a couple of options when it comes to setting up your Archive and RSS views:

• Use this default setup, which is the simplest but most inefficient – you will be delivering very large files and then scaling them down to smaller sizes. The scaling for all but the most modern browsers is also not the most ideal, and the scaled images will look blocky.
• Deliver full comics for the RSS feed, and deliver thumbnail comics for the Archive. You will need a separate comic_archive folder, and each thumbnail needs to be named exactly the same as the larger version of the comic.
• Deliver the same reduced comic file for both the RSS feed and the Archive. Set both the archive and RSS comic folder to the same value, creating the thumbnails as above.
• Deliver a separate RSS image and a separate Archive image. Define two folders, one for RSS and one for archive, and put your thumbnail images (again, named exactly the same as the larger version of the comic) in the appropriate folders.

Right now, ComicPress Manager can automatically generate thumbnails for the Archive and RSS folders, but they will both be at the Archive size. Being able to generate thumbnails for the RSS feed will be added in a future version of ComicPress Manager.

ComicPress Manager

OK, so I’ve already mentioned it a dozen times, and it has its own button on in the sidebar, but what is ComicPress Manager? ComicPress Manager is a WordPress plugin which simplifies ComicPress site management. It creates a new tab on the WordPress admin screen.  It is recommended that you make sure you understand how ComicPress functions by uploading and posting a few comics manually at first.  After you understand how ComicPress Manager works, use it to save you a lot of time in managing your comic.

Permissions (for Unix-based hosts)

In order for ComicPress Manager to be able to write uploaded files, thumbnails, and config file changes to your Webserver, you’ll need to correctly set the permissions on the comics & theme folders. The correct permissions vary depending on the setup of your host:

• Your web site is delivered by a webserver that runs as your username. Any files written by the webserver have the same permissions and needs that you would have. You shouldn’t have to change anything. This setup is rare.
• The webserver runs as a special user, and both you and it belong to the same usergroup. The directories and files need to be made group writable. In Unix parlance, this means chmod 775 for directories and chmod 664 for files.
• You and the webserver share no permissions. This means that the directories and files need to be made world writable, and that special care needs to be taken to ensure that the only script that writes to these folders & files is ComicPress manager. In Unix parlance, this means chmod 777 for directories and chmod 666 for files.

If for some reason you are unable or unwilling to set up the permissions on your comic & theme folders in any of these ways, you won’t be able to use ComicPress Manager. Go ahead and skip to the next part of this guide.

The following directories need to have their permissions set so that ComicPress Manager can write to them:

• Your ComicPress theme folder in wp-content/themes/
• The comicpress-config.php file in your theme directory
• Your comic folder and your RSS & archive folders, if you are using those
• All of the comic files within your comic, CSS, & archive folders

ComicPress Manager will generate warnings and/or errors when the directories won’t allow writing by the webserver process.

PHP Safe Mode

Safe Mode is an option used to attempt to secure PHP scripts on shared hosting setups. It can cause a number of issues with regards to including files, reading directories, and permissions. Getting ComicPress Manager to work in Safe Mode can take some work, as it needs to be able to read a directory outside of the directory the script lives in. This is beyond the scope of this guide. Safe Mode is being removed in PHP 6, as it’s not PHP’s job to enforce security in shared hosting setups.

Permissions (for Windows-based hosts)

Most Windows Webservers will be using NTFS file systems on their hosting drives. By default, ComicPress Manger will upload all files to Windows with chmod 777, which translates into inheriting the permissions of the parent folder and ensuring that the read-only property is not set. You’ll need to make sure the destination folders have enough permissions for the IIS/Apache user so that they can write to the folders.

Windows & Temp folders

Be sure that only one Temp folder is defined in your php.ini file, and that it is writable by IIS, otherwise you will have errors that are tough to track down. The indicator that you have a problem with Temp folders is that, when you upload a comic, it will have no permissions when moved to the WordPress folder, and can only be removed by a user with Administrator privileges.

ImageMagick and GD

Image processing for making thumbnails is done using either the ImageMagick convert tool or the GD image processing library, with ImageMagick being preferred as it supports better scaling modes. If no image processing tools are found, you won’t be able to automatically generate thumbnails and you’ll receive notifications to this effect. ImageMagick integration only works so far on Unix, as ComicPress Manager uses shell_exec(’which convert’) to find the convert binary, and I don’t know what the best approach would be for Windows to find convert.exe.

Uploading Comics and Generating Thumbnails

ComicPress Manager will handle generating posts and, if properly configured, thumbnails for all file uploads, regardless if you’re uploading individual images, multiple images, or images packed in a Zip file (this operation requires the Zip extension). When creating posts, ComicPress Manager will use the text after the date prefix to generate the title of the post. For example, the title for the comic file 2008-01-01-my_new_years_comic.jpg will be My New Years Comic. This automatic conversion can be overridden, and a large number of other post settings, including default post bodies, default tags, and post time, can be set in the upload interface.  Thumbnails for RSS and archive images can also be uploaded, and you can also replace existing files on the server with another file of your choosing, renaming the source file to the target filename in the process.

You can also generate thumbnails for any existing comic image on your server, and you can delete comics and their associated posts and thumbnails.

Importing Files from another Webcomic System

Provided that your files are named with the ComicPress date prefix, you can create posts for files that have already bee uploaded to your comics folder. The post creation options are the same as for file uploads.

Editing the comicpress-config.php file from ComicPress Manager

The configuration for your ComicPress site can be managed in ComicPress Manager. Backups of your config will be written to your theme directory just in case something goes wrong, and you’ll be able to restore from a prior backup in case of problems.

By configuring through ComicPress Manager, you’ll ensure that the correct values for categories and directories are selected, which helps to eliminate common errors.

And that’s Part 2! Stay tuned for the final part, which will cover Theme Editing and Support Options for ComicPress & ComicPress Manager.

(You’re reading Part 3 of ComicPress: The Technical Guide. Read Part 1 here and Part 2 here.)

Editing your Theme

It’s always best to edit a copy of your existing theme and use a plugin like Theme Tester or the built-in WP 2.6 theme testing functionality so that you’re not editing your live site. If you break your live site, not only can you drive away visitors, but you can reveal information about your server that attackers can use to take down your site.

ComicPress themes the following types of WordPress pages with the following files:

• The index page (index.php)
• A single blog post (single.php)
• A page (page.php)
• An archive results page (archives.php)
• A search results page (search.php)
• The page that’s shown when a bad page/category is requested (404.php)
• The sidebar (siedebar.php and/or sidebar-left.php & sidebar-right.php)

For each of these pages, the following additional php pages are loaded:

• functions.php (loaded before the rest of the theme is loaded)
• header.php (loaded when get_header() is called on the theme page)
• footer.php (loaded when get_footer() is called on the theme page)

And finally, with ComicPress, comicpress-config.php is loaded from functions.php. All of these files are loaded after any plugins are loaded, so that themes will have access to plugin functions.

The Loop and The Sidebar

WordPress templates revolve around a concept called “The Loop” – a block of code that is repeated once for every post that is found in a database query. When a page is loaded, WordPress will figure out what database query to perform and will create a global query object, $wp_query, to represent the query. This object is then used by the functions have_posts() and the_post() to pull individual posts out of the query, in the order specified by the query, so that your theme can act upon them. The other template functions also use $wp_query along with $post, $wpdb, and a number of other global variables.

The problem with this approach is shown when you want to make additional queries beyond the main query, which you often do in the Sidebar. Those global variables can get wacked very easily, and this will make your paage behave incorrectly. Additionally, there are certain templating functions that only work if WordPress believes that you are in the “main” loop, or that you are out of it. To be able to do the things that ComicPress needs to do, it has to:

• Preserve the main loop query global variable before making any other database queries
• For certain operations, either force WordPress to believe that you are in the main loop, or that you are out of the loop, or that you are on a certain type of page in the site

This is well out of the scope of this introductory document, and requires some PHP knowledge to get working correctly. Even then, it’s still quite frustrating to deal with, if you want to stay within the accepted WordPress API.

Bandwidth

Mobile phones, dial-up users, and satellite internet providers (and even users on mad fast broadband connections) will appreciate a quick download of your site. Besides reducing image sizes, which is well-documented throughout the internets, there are a number of techniques you can use to reduce bandwidth usage.

Wp-compress-html

This plugin will remove whitespace from your source files. If you’re using firebug to debug your sites, you won’t need to look at the source file much anyway. Combined with wp-cache or a fast server with APC, this can efficiently reduce the bandwith of your pages by a significant amount. Be careful, as you’ll need to exclude certain parts of your site from processing, specifically JavaScript parts of your site. Improperly configured, it can strip out things such as Project Wonderful ads (which us Webcomic authors all love to use) and analytics tracking systems like Piwik and make them non-functional.

Trimming plugin fat

Plugins can load all sorts of other files which may be unnecessary. Firebug’s network tool will help you find extra files that are being loaded.  I like Event Calendar a lot, but if you’re not using its built-in display functionality, or you want to use your own styles, you can safely remove the wp_head hook from the evencalendar3.php file. This is a much more sophisticated procedure, so you’d better know what you’re doing. Also, this procedure is different for all plugins, so be careful!

(As a note, you really should be using Firebug to do your initial page designs & debugging, and then test in other browsers. IE 8 beta 2 and Google Chrome provide similar tools, but they aren’t as fully featured as Firebug. Yet.)

Trimming CSS fat

Dust-me Selectors can help you identify CSS selectors that are defined but are not in use. Each unused selector can take up anywhere from a few bytes to several kilobytes of file size and memory, and their existence only complicates the CSS file. Backup you style.css file first!

Xdebug (for VPS or colocated hosts)

If you can, install Xdebug. This PHP extension gives you many powerful debugging tools, the three most
important being:

• Backtraces for all PHP errors & extensions, helping you quickly pinpoint where your code failed and how you got there
• Improved var_dump() output for even better variable analysis
• Code profiling support to help you find bottlenecks in your code

Proper use of Xdebug for profiling your WordPress theme is well beyond the scope of this introductory document.

The ComicPress Support Forum

If you haven’t already taken advantage of the ComicPress Support Forum, then be sure to stop by and create an account. If you have a problem or are able to help out with another user’s problem, we’d love to hear from you!

Show Debug Info

For simple problems related to theme issues, image folder permissions, and basic PHP configuration, Show Debug Info will provide enough information to help debug your problems.  Debug Info should always be Private Messaged to johncoswell (my username, duh), as it can contain information that could expose your server to attacks or foul play.

Error Messages

If your server is configured to display PHP error messages on screen, and there is a fatal error in the script, copying and pasting the error into a Private Message to johncoswell will help him debug the problem. For your protection, do NOT post error messages straight on the forum.

Server Error Logs

If your server is not configured to display PHP errors, or if the error is more complex than a single PHP error or Debug Info run can describe, you may be asked to provide error logs from your server. Ever configuration is different, and your Webhost can assist you with getting access to your error logs. These would be emailed to John for closer inspection, as they can reveal a LOT about your server, including problems unrelated to ComicPress & ComicPress Manager. PRETTY PLEASE DO NOT POST ERROR LOG INFORMATION STRAIGHT ON THE FORUM.

And that’s it! As usual, any comments or questions should be posted in the, um, comments section below. More Webcomics tech goodness in a few weeks!

I’d known about Yahoo!’s best practices for high-performance Web sites for a while, but never look too deeply into it, ’cause I’m lazy. Then I learned about the YSlow plugin for Firebug, which analyzes your Websites according to their major recommendations and rolls up the results into…handy little grades. And, to be honest, a fair number of their recommendations don’t apply to the majority of sites on the Internet. Unless you’re Yahoo!

But that doesn’t mean you can’t take some of their very well-researched advice and speed up your ComicPress-driven Website. Note that this list doesn’t include the one obvious optimization for a graphics-heavy site, which is save out the proper image format for your comics. Either use a reasonable level of JPEG compression or use PNG files and crush the heck out of them with pngcrush or OptiPNG. C’mon, you should know this one by now.

Some of these suggestions apply to any site running WordPress. Some of them require some deeper-level access to your Apache configuration than some hosts give. And some of them require changes to core ComicPress functions, which will make upgrading difficult. If you’re using IIS, you’ll have to find the equip You have been warned.

Also note that I am no expert on HTTP, browser-related network issues, or anything like that. I’m just a little ole’ Web developer who draws funny pictures, distilling down what I’ve read to youall. So if I’m way off-base, please let me know in the comments.

Let’s go through some of Yahoo!’s recommendations and see what measures make sense for our ComicPress sites…

Minify JS

Minification is the process of removing unneeded code from JavaScript and CSS files. This can trim a few KB from your download times. If you can combine all those minified files together, you can also reduce the number of HTTP requests as well. Minification is best done right before you make your Website live, and unless you have some automated tool for doing this, I find that it’s a pretty inconvenient process.

Luckily, Leon Chevalier did all the heavy lifting and has created a WordPress plugin for his PHP Speedy library. It’s quite easy to set up — if you’ve worked with WP Super Cache, the setup for PHP Speedy will be similar. There are a number of others parts of the minification process that you can control, and you can read more about those settings on the relevant Yahoo! pages (far future Expires headers being the biggest win). As long as the process doesn’t screw up your JavaScript code, this is a very easy addition to your site and gets you some pretty big benefits for very little work.

Gzip components

For those of you who have a host that allows you to enable mod_deflate…DO IT. This particular rule is not talking about WordPress’s built-in Gzip compression, or PHP’s automatic Gzip output of HTML content (though they certainly help if that’s all you can do) — rather, they want you to enable site-wide compression of any text-based file, including HTML, XML, CSS, JavaScript, JSON. I don’t know how most normal Webhosts like DreamHost, GoDaddy, or the others handle enabling this (and if you do, please enlighten me), but on my Linode (affiliate link), which is running Apache 2, I use a directive like the following to automatically compress almost any text-based content, provided the browser on the other end can handle it:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/json text/javascript
</IfModule>

(a lot of the initial code for these changes came from the AskApache site. I tweaked their original settings ever so slightly.)

If you can enable deflate support, it’s another small change that will bring about huge bandwidth savings. Note that YSlow is very brutal when it comes to this recommendation — if, for example, a remote site is delivering JavaScript, like, say, Project Wonderful, and they aren’t Gzipping or minifying the JavaScript on their end, YSlow will lower your grade very quickly (but rememeber, these grades are misleading anyway, so don’t fret! ). [and a request for Project Wonderful: Gzip/minify your ad serving script! Webmasters will thank you! ]

Add an Expires Header

I’m still on the fence about this one. In short: Delivering a piece of content with an Expires header means that your browser won’t ping the server with an HTTP request until the date of the Expires header has passed (in theory). Yahoo! recommends that you have an Expires header that is at least two days in the future from the first access of the content. But that long period gives me a not-so-warm and fuzzy feeling. For instance, just this Monday I had an issue on Dawn’s Dictionary Drama that required me to rework a bunch of posts and files, and if that Expires header was longer than an hour or so, my site would have been quite messed up for a lot of viewers for, potentially, days (OK, it would have only affected the five regular readers of that comic. Don’t rub it in.)

I keep my Expires (Cache-Control: max-age, really) time pretty low, no more so than an hour. YSlow complains, but oh well. If your host supports it, here’s how to set it up so that you can reduce some of the HTTP traffic to your site:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 hour"
</IfModule>

Configure ETags

ETags are a different way of handling cache control. The skinny: each unique file on your filesystem has all sorts of metadata attached to it (filename, last modification date, physical location on the drive). An ETag is constructed from those bits. When a browser downloads a file with an ETag, the ETag is stored wtih the file. Modify any of those bits (say, by editing the file) and the ETag changes. When you revisit the site, the ETag your browser has is checked against the ETag on the site. If they’re different, the file is re-downloaded.

YSlow’s ETag complaint comes down to how default Apache ETags are constructed. The default tag has the file system location (inode) in the ETag. If you set up a huge cluster of Apache machines, and put the same file on all those machines, the ETags will be different, since each individual machine will put that file on different inodes. If you’re running a massive cluster of machines to deliver search results, stock quotes, and “answers,” this is a problem. If you’re on a single machine, serving up your funny little Webcomic, it’s not a big deal. Don’t worry about this one and worry about implementing Expires headers instead.

Use A CDN/Reduce DNS lookups

Here’s two suggestions that seem to run counter to each other. I can tell you right now that if you’re running PW ads, have a Frumph.net (promotional link) rank image, and also pull in social networkings icon from, say, Delicious or StumbleUpon, you’ve already broken YSlow’s 4 DNS lookup rule. In a nutshell: a Domain Name Service lookup happens when you have a domain name (say, claritycomic.com) and you need to turn that into a number (64.22.103.36) that your TCP/IP networking stack understands. This initial lookup can take a few milliseconds, but once it’s done, that looked-up number is cached in your browser or TCP/IP stack. Reducing DNS Lookups is akin to making sure your tires are properly inflated in order to get good gas mileage — it helps, but don’t expect to make your site’s performance hit Ludicrous Speed.

Now, why is this counter to Use a CDN? Because Use a CDN (content delivery network) really means Split Your Static Content Up Into Different Subdomains To Trick A Your Browser Into Downloading More Content At Once (and for a site of your size, it does not mean Sign Up For Akamai Or Mirror Image). You’ll be adding more domains to your page that need to be looked up, which could push you over the 4 domain limit imposed by Reduce DNS Lookups.

Most browsers, by default, only open two parallel connections to a server to download content (it’s in the HTTP 1.1 spec). Hacks like FasterFox can make a browser open up more connections, but other browsers don’t have that advantage, so you might as well try this change — by putting some of your content on a second domain name (even if it’s just a subdomain), the browser will open up twice as many parallel connections (4 instead of 2) to your server to download content. Note that this change not only requires modifying your Apache configuration, but also modifying your ComicPress functions.php file.

If you can set up subdomains for your site, and point that generated subdomain at any folder that your account owns, set up a “static.mysite.com” domain and point it to the root of your current site so that:

http://www.mysite.com/

and

http://static.mysite.com/

deliver the same content (WordPress, images, etc.). If you’re super-paranoid, this is the point where you lock down Apache so that you’re only delivering “static” files on the static address.

Now, in functions.php, let’s kill two birds with one stone. Above the first function in the file, let’s define a new constant:

define("CP_SOURCE_URL", 'http://static.mysite.com'); // note the lack of trailing slash

and then find every instance of:

get_settings('siteurl')

and replace it with:

CP_SOURCE_URL

Save your changes and make sure your comic still shows up on your site. If you’ve got Firebug, or if you want to peek at the source, make sure the <img /> tag for the comic is pulling the image from static.mysite.com. Congratulations, you just tricked Web browsers into downloading more content than they normally do! Now, if you’re including any stylesheets, JavaScript files, or image files in your theme, you can point them at the static URL, too. This will be a bit more complex to do, so experiment carefully.

Dawn’s Dictionary Drama is already set up this way. A Moment of Clarity will have this setup soon, too.

Make Fewer HTTP Requests

Here’s one that I have yet to do, simply because it is a bit more involved, and it’s a part of the process I wish I could automate more. Make Fewer HTTP Requests means Download Less Objects, and, if you’re using PHP Speedy, you’ve already done some of that. The other primary way to reduce the number of HTTP requests is with CSS sprites. CSS background images can easily balloon up the number of HTTP requests that need to be made to the server, and each one brings about additional overhead. By combining all of those images into a single background image, and using background-position on elements to only use a small part of the combined background image, you can severly reduce the number of HTTP requests made to the server, at the cost of additional complexity in your CSS file.

I’ll admit this is an area I don’t have a lot of experience with, so if anyone wants to recommend the best way to handle this process, especially in an automated fashion through WordPress, I’m all ears. I do know there’s this CSS Sprite Generator tool which looks pretty cool, but I haven’t tried it yet.

So there you have it. A hodge-podge of techniques for making your comic site even more responsive, and with very little work on your end. Your visitors, and the Internet, will thank you.