Method One: Speed up WordPress by adding compression via .htaccess

This is my preferred and recommended method as it is a more comprehensive solutions and works either domain or server wide depending on your configuration.  This is also a more advance and difficult to implement method so if you do not understand what I am talking about you should probably skip this method.  The easiest place to add these directive are in the .htaccess fill though you can also add the directives to your vhosts.conf of your apache configuration.  Method one does not apply to Apache 1.x please do not try it unless you are using Apache2.

First you will need to enable both mod_deflate and mod_headers with Apache. This can be done in one of the following two methods.  Apache 2 uses mod_deflate which has some built in detection to determine whether and how to compress data for browsers.

You can enter the following commands on some systems including Debian and Ubuntu.

sudo a2enmod deflate
sudo a2enmod headers
sudo /etc/init.d/apache2 force-reload

This will enable mod_deflate and mod_headers in the apache config and the the last command will reload the configuration.

You can also manually enable the mods by looking in your apache configuration files and locating where mod are configured (hint: look for lines similar to those below).  You can either ad the following two lines or uncomment them if they already exist.

LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so

Again you will need to reload the apache configuration as above.

There are two option that for compressing outgoing content with apache2, compress specific content or compress all content except specified.  Choose one option only.

Option 1: Compress specific content

You can add type such as text/html, text/css, text/plain or even x-application/javascript.  See Webmaster Toolkit Mime Types for a simple but exhaustive list.

      #-- compress content with type html, text, css and javascript
      AddOutputFilterByType DEFLATE text/html text/plain text/css x-application/javascript

        # correctly handle http requests that come from behind a proxy
        Header append Vary User-Agent

Option 2: Compress all content

Manually excluding specified file types such as images, zip files, pdfs, or other files that already have some sort of compression on them.  In this case you exclude file by their extension using regular expressions.

    # set filter mod_deflate (chooses gzip or deflate compression based on browser support) on all outgoing content
    SetOutputFilter DEFLATE
    # exclude content that is already compressed or does not compress well via file type
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|rar|zip)$ no-gzip

      # correctly handle http requests that come from behind a proxy
      Header append Vary User-Agent

Additional Apache2 Directives

This directive should probably be added to properly handle old browsers that do not support compression.

    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Additionally you can add the following directives for additional logging

    DeflateFilterNote Input instream
    DeflateFilterNote Output outstream
    DeflateFilterNote Ratio ratio
    LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
    CustomLog logs/deflate.log deflate

Note: that the client browser has to request compression via headers sent on request and IE 6/7 will only request compression on .html, but not on .txt nor .css. Mozilla/Firefox/Chrome/Safari can handle all three types.  I am not sure about Opera or IE 8.

You should now test your site using various browsers and you can also check to make sure your are sending compressed content using the GIDZipTest page.

Method Two: Speed up WordPress by adding compression via PHP

If you don’t have the ability to modify you apache configuration files or .htaccess you can still try to get some compression by adding a small snippet of PHP code to your template.  This may work with Apache 1.x bu tI have not tested it.

This method is very simple to implement.  Open your header.php in the theme you are using and add the following line to top of the file or just above the <DOCTYPE! line.

That’s all.

Again you should test with various browser to make sure your site is working and you can use the GIDZipTest page to see if you page is being compressed.

Method Three: Speed up WordPress using a plugin

There are many plugins for WordPress that will combine, minify and compress your WordPress output.  I haven’t had much luck with any of them due to some quirks with this site but they may be the simplest way to save bandwidth and speed up WordPress.  I am not going to go into detail on how to use these plugins but I will merely list the most promising – those which other WordPress developers I know have used successfully to achieve that same results.

PHP Speedy - PHP Speedy can consolidate javascript and CSS and combining them all into two files, one for the javascript code and the other for CSS. It also minifies and compresses the combined files and caches them then removes all the javascript and CSS links in the <head> tag and serves the combined file from the cache to the readers.

W3 Total Cache – Increases you site’s performance  by using a variety of techniques including file caching, database query caching, minifying/combining/compressing files, content delivery network (CDN) integration and more.

Webo Site SpeedUp – This is a commercial plugin but it also have a free version that does quite a bit to speed up your site.  It is without a doubt the most configurable and the free version allows you to do file caching, minifying/combining/compressing files and more.  The commercial version gives you total control over optimizations ranging from the .htaccess tweaks listed here to various file and database caching methods.

Lightbox Plus Demo and Example

I’ve updated Lightbox Plus to version 1.5.5.  It has numerous fixes including:

• Optimized and updated additional code to use less memory and run faster
• Separated the admin panel output to a separate file
• Added some custom admin panel styles
• Fixed bug where titles were being broken when DO NOT USE TITLE is checked.
• Fixed issue with limited character sets – should allow any characters in the title
• Updated ColorBox to version 1.2.9
• Some cosmetic changes to admin panel

You can get it from WordPress.org or 23systems download Lightbox Plus 2.4.6 directly.

• Minor interface updates
  • Quick links in plugins list
  • Added additiona support and FAQ links to admin panel
• Readme and faq update

0.8.9

• Moved JavaScript calls to the footer to improve load times.
  • You must have the wp_footer() call in your template for FLIR to work – see /wp-content/theme/default/footer.php for example.
• Updated Facelift to version 2.0b3.
  • Various improvments to rendering and speed
  • Using minified version of FLIR for improved load times
  • Additional features (not all are implement with FLIR for WordPress)
  • Bug fixes from previous versions
• Added one additional setting – Single Cache Directory option
• Updated admin panel to hide help text and provide icon to toggle

0.8.8

• Updated Facelift to version 1.2.2.
  • Corrects security vulnerability with Facelift

0.8.7.1

• Minor adjustments to work with WordPress 2.8.
• Minor changes to jQuery method to ensure compatibility with jQuery 1.3.2.

0.8.7

• Fixed typ0 in JavaScript which create issue with IE7.

0.8.6

• Fixed bug in disable for IE 6 that was also disabling for IE 7 (Thanks Zack for pointing out my stupid error)
• Change some text in the admin panel to clarify a few items.

0.8.5

• Set the tags used by the Automatic method to follow the element types as defined in the configuration
• Add checkbox to allow the use of external JavaScript libraries – jQuery, Scriptaculous and Prototype support only
• Hide Elements to Replace section when using Automatic method as Elements to Replace is not used in that case.
• Add checkbox to disable FLIR for IE6 or lower users to avoid rendering issues that sometimes occur.
• Fix the global Use FancyFonts not showing it’s activated.
• Other minor interface fixes for WordPress 2.7
• Changed internal selection methods to increase speed and reduce memory usage.

0.8.0

• Updated Facelift to 1.2 release
  • Font Collections
  • Basic Callback Functions
  • Better error handling
  • Bug in generateURL causing HTML not to be sanitized
  • Added functionality/bug fixes for “wrap” mode. Better line-height support.
  • Rewrote element replacement algorithm. You no longer need to encapsulate plain text in span elements to have it replaced. The new algo is recursive so it can replace any number of child elements. You could even run it on document.body if you wanted to!
  • Added flir-image and flir-span classnames to the elements flir creates
  • Javascript Plugin support!
  • Moved DetectImageState code from facelift.js into a Javascript plugin
  • querySelectorAll support for the browsers that support it (Safari, FF3.1 alpha)
  • Font size modifier for cSize in FLIRStyle. You can now specify a font size calculation to be applied against the CSS font size. For example, if you want the generated image to have a font size that is 140% the one you specified in your CSS you could do cSize:’*1.4′. All font sizes will then be multipled by 1.4.
  • FLIRStyle.buildURL no longer requires an HTML object to be passed
  • Hover caching problems fixed. Better hover style support.
  • JPG and GIF support! Set the “output” option in FLIRStyle. The default output option is auto. Auto will cause the generated image to be a transparent png if the element doesn’t have a background color set. Otherwise it will use GIF.
  • Hover now only works with <A> elements.
• Rewrote code for better readability and adherence to code conventions (hopefully)
• Redesigned admin interface to be more logically organized (again, hopefully)
  • Added more helpful information to the configuration text.
• Added ability to specify all elements to replace rather than just the few I had.
  • For example you can specify something like h1,h2,div#sidebar a to have your h1, h2 headers and all of the sidebar links replaced.
• Fixed deactivation routine to preserve config-flir.php during auto upgrade.
• If manually upgrading please deactivate plugin before upgrading to ensure config-flir.php is configured correctly.

0.7.7

• Updated Facelift to 1.2b3-3

0.7.6

• Updated Facelift to 1.2b3-2

0.7.5

• Added Facelift FancyFonts plugin option. FancyFonts uses ImageMagick to render fonts instaed of GD and can be useful
• Fixed the errant semi-colon issue that everybody keeps telling me about but I kept not seeing for some reason
• Added (hopefully) better text prompts to the admin panel

0.7.0

• Initialize plugin and set basic settings on install – note: the new version will overwrite your current config-flir.php
• Set all config-flir.php settings (except allowed domain and font discovery which is done by the plugin)
• Ability to flush cache on demand
• Ability to reset the entire plugin and reinitialize
• Ability to choose to have fonts automatically replaced for h1 to h5 headers or select a specific JavaScript library to use (jQuery, Prototype, Scriptaculous)
• Latest version of Facelift 1.2b2 which fixes numerous rendering issues.
• Admin panel page reloads after saving changes to reflect updates
• Reduced number of fonts that come with plugin – all fonts are freeware/open source and redistributable
• Easy addition of your own fonts – just drop in fonts folder and configure from admin panel
• Selection of what fonts to include during element font selection
• Moved additional admin includes into subdirectory
• Minor cosmetic and coding fixes

0.5.9

• Fixed issue with not running correctly when WordPress is installed in a sub-directory (i.e. http://yousite.com/personal/blog/)

0.5.5

• Removed prototype implementation in favor of jQuery, noticeable improvement in speed.
• Bug with IE in rendering header in some cases not jQuery related

0.5.0

• Added per element modes

0.4.1

• Updated Facelift to 1.2b

0.4.0

• Basic admin functionality added
• Implemented prototype in plugin for per element rendering

0.3.0

• Initial Release
• Auto redering of <h1> to <h5> only
• Using Facelift 1.1

There are number of reason the plugin might not work. Check the following:

• Please ensure that you have a cache directory at wp-content/plugins/facelift-image-replacement/facelift/cache and that it is writable. (chmod a+w /cache)
• Please ensure that your config-flir.php file exists at wp-content/plugins/facelift-image-replacement/facelift/config-flir.php and that it is writable. (chmod a+w config-flir.php)
• Make sure the wp-content/plugins/facelift-image-replacement/facelift/ is readable
• Check your theme’s footer.php file and make sure it has the wp_footer(); function in it. It should be located just above the </body> element close tag.
• Check your theme’s header.php file and make sure it has the wp_head(); function in it. It should be located just above the </head> element close tag.
• Check the FLIR admin panel under the design menu and make certain all the options are set in the FLIR Configuration section. Read the help text on the right of each option for information.
• Check the FLIR admin panel under the design menu and make certain all the options you want are set in the Elements to Replace section. Heading 1 is generally used for the blog heading, Heading 2 is used for the posts on the main page and on individual post pages, Heading 3 is often used with posts on the catagories and tags pages. Small is often used for the date and author of the post.

When I set FLIR to wrap the text the text overlaps on a single line, how can I fix that?

FLIR 2.0b3 has a minor issue where the text will overlap if line-height isn’t specified in your CSS file for that particular style.  Adding line-height equal to the font size should correct that.  For example

a.pagetitle{
    font-weight:bold;
    font-size:24px;
    display:block;
}

Can be updated like so to add line-height:

a.pagetitle{
    font-weight:bold;
    font-size:24px;
    line-height:24px;
    display:block;
}

Will FLIR be configurable from the admin panel?

FLIR is almost completly configurable from the admin panel. Eventually it is planned to be able to configure FLIR almost completely from the admin panel. At present to configure how and what fonts are used with flir and certain element to be replaced by FLIR.

Will the FLIR plugins be usable?

At present the FancyFonts plugin is implemented. QuickEffects will be implemented next. They require ImageMagick 6.3.7 or higher to function correctly and will be configurable from the admin panel.

What about the fonts that come with FLIR?

All the fonts that come with FLIR are either free or Open Source.

What advantages would you say FLIR provides over sIFR? Besides, of course, from needing flash?

• Facelift creates transparent PNGs which can lie over the top of any background you want. For example, take a look at Example #5.
• It can easily create multi colored/font headers. (Example #3)
• It can replace links and maintain their clickability (though I believe this functionality was added to sIFR).
• It is very easy to implement. No other tools besides a web browser are needed and it is very easy to maintain.
• It plays well with third party libraries such as jQuery and prototype.
• You can take advantage of plugins such as the QuickEffects plugin and add things like drop shadows and pattern/gradient fills if you have ImageMagick installed on your server.

Is there some kind of caching system? If so, how does it work?

Facelift caches all images it generates to disk. It then will send appropriate headers to the browser if the image has not changed. This allows for drastic speed increases in rendering when browsing a website. After a couple of page views you sometimes won’t even notice the text get replaced. By default, the cached images are saved indefinitely, but you can change facelift to run through the cache every so often and remove old images to save disk space. Just change the settings in the admin panel.

It still doesn’t work / I have other questions

The best places to get answers are here on this page or FLIR Integration with WordPress Forum.

PHP and GD. Little testing has been done with different versions of PHP. If you have PHP 5 with GD enabled you shouldn’t have any problems. PHP 4 currently has some issues but should be resolved in the next release of Facelift. A newer version of ImageMagick (6.3.7+) is required for the FancyFonts and QuickEffects plugins.

If GD is not installed on your server you will have to recompile PHP to include GD. If you are comfortable in WHM for cPanel, you can do that under the “Update Apache” tab (check the “GD” box). Check your settings carefully (especially the PHP version – cPanel may try to change it) before you hit build. Plesk and ISPConfig should have GD enabled by default. If you are not comfortable doing it yourself, ask your hosting company to do it for you. (Thanks Steve!)

Delete your existing version before installing this version

1. Extract to your wp-content/plugins directory.
2. Look in wp-content/plugins/facelift-image-replacement/facelift
3. Set the wp-content/plugins/facelift-image-replacement/facelift/config-flir.php to be writable (chmod a+w config-flir.php).
4. Set the wp-content/plugins/facelift-image-replacement/facelift/cache to be writable (chmod a+w /cache).
5. Add fonts of your choice to wp-content/plugins/facelift-image-replacement/facelift/fonts folder.
6. Make sure you have the `wp_footer()` call in the footer of your template See `/wp-content/theme/default/footer.php` for example.
7. Activate plugin in WordPress admin panel
8. Set FLIR configuration in the admin panel – config-flir.php must be writable for changes to take effect.
9. Customize tags for FLIR on FLIR submenu under the Design menu

Notes

• QuickEffect Plugin is not implemented yet
• SuperCache Plugin is not implemented yet
• If using a version older than 0.7 completely delete any old verions before upgrading as this plugin is under rapid development
• You cannot auto-upgrade from versions older 0.7.0
• Text remains intact in source so search engines see your page as text!

Actionable

Actionable has been languishing for a while now and needs some attention.  Among the work that needs done it to the following:

1. Allow editing of action items from the admin pages
2. Create additional views for analyzing the data captured
3. Add widget that displays statistics
4. Convert animations to jQuery UI library

Version 0.8.3 has the following changes:

• Updated animated collapse JavaScript to fix issue with jquery 1.3.2.
  • This was causing Facelift Image Replacement to not work when both were in operation together.
• Tested to work with WordPress 2.8.

Facelift Image Replacement for WordPress

I haven’t had time to do much more than minimal maintenance on Facelift Image Replacement. I’ve seen that there are number of issues with the plugin for WordPress. The roadmap for Facelift looks something like this:

Version 0.8.8 should include the following updates:

1. Add realFontHeight as a checkbox item for Elements to Replace
2. Add option for custom FLIRStyles in Elements to Replace
3. Add correct wrap for FancyFonts
4. Add check for get_browser – disable checkbox for IE 6 option if not available and add notice
5. Fix location of global settings for Automatic (wrap/progressive/etc.) – currently listed with Elements to Replace which only shows when using methods other than Automatic
6. Fix font name issue – probably will only note that fonts cannot contain spaces

I am planning the following for version 0.8.9:

1. Update FLIR to 2.0x whatever version is available when I get there.
   1. No longer planning to branch FLIR for tighter integration of the plugin more closely with WordPress plan the following instead:
      1. On upgrade recreate config-flir.php from stored settings in WordPress DB.
      2. Change the fonts path to wp-content/flir-fonts so user fonts are not removed when the plugin is updated from within WordPress.
      3. Change the cache path to wp-content/flir-cache cache will not cause the upgrade to fail of directory permissions are not the same a web server user.
2. Add ability to upload and manage fonts from within the plugin. Will include automatic renaming of fonts to reduce issues.
3. Fix the activation/deactivation of the plugin to clear the cache and hopefully eliminate the one remaining upgrade issue when upgrading from within WordPress.

And by the time version 0.9.0 is released you should see the following features:

1. Add the long promised QuickEffects to the plugin.
2. Fix all the bugs caused by me in the previous release.
3. Add any last feature requests that seem to fit.
4. Should be considered beta for 1.0

Eventually a full verison (1.0) will be released and at that point the only real changes should be the following:

1. Use Facelift 2.0 once released.
2. Squash any remaining bugs and release.

Version 0.8.7.1 has the following changes:

• Minor adjustments to work with WordPress 2.8.
• Minor changes to jQuery method to ensure compatibility with jQuery 1.3.2.

Lightbox Plus

Finally Lightbox Plus is in need of a serious overhaul.  For this I have a number of plans:

1. Rebuild lightbox to use Colorbox for image overlay with the following advantages
   1. Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
   2. Appearance is completely controlled through CSS so users can restyle the box.
   3. Written in jQuery plugin format and can be chained with other jQuery commands.
   4. Generates W3C valid XHTML and CSS, adds no JS global variables & passes JSLint.
2. Add enhanced features for use with NextGEN Gallery and WordPress built in gallery.
3. Solicit and implement language translations.

Finally version 1.3.4 of Lightbox Plus has been updated to work with WordPress 2.8

I’ve been thinking about some other plugin possibilities and I am looking for feedback regarding them.  I’ll post about them as soon as I can find my notes.

To get the project I need to finish out done by Thursday of next week I’m looking at some frameworks for PHP though I’m not sure they wouldn’t just slow me down.  Ideally they shouldn’t and right now I’m trying to decide between CakePHP and Symfony.  Both are good but it’s pretty much going to be whichever I can pick up on quickest tomorrow or Sunday night.

After I get back from being away I will still have more to do on the project but I should hopefully be able to put some time into the plugins – at the very least I should be able to do some support.  I hope everything doesn’t go to hell in a handbasket while I’m gone.