There is no doubt that Timthumb is an awesome piece of PHP script to help with on-the-fly resizing of images for websites and blogs. Originally written for a WordPress theme, it’s been already exploited by 1000s of magazine style WordPress themes.
However, many theme designers are using the timthumb script quite negligently that the blog performance suffers big time due to numerous timthumb requests per page access. Moreover, timthumb style query parameters are NOT advisable as such queries never get cached by performance boosting plugins (such as W3 Total Cache) or even your Content Delivery Network (CDN). So how do you optimize your timthumb script for better blog theme performance?
Timthumb Performance Fixes
There are three ways to optimize Timthumb performance. They are:
- Optimize Timthumb queries with a combination of .htaccess rewrite and CDN integration – Advanced topic
- Do basic optimization of timthumb script and usage within your blog theme
- Totally get rid of Timthumb for direct access but use it only for generating images every time you create new content (I use my modified version of timthumb.php to achieve this – read below)
1. Optimizing Timthumb for CDN
There are a number of resources on other blogs that talk about how to integrate Timthumb with CDN so that your resized images are served directly from CDN. I wouldn’t like to talk about this topic here because I never managed to get it really working for any of my blogs.
Hence let us move to simpler topics.
2. Basic optimization of timthumb usage
This involves a little bit of editing of timthumb.php but it is easy.
Cache & File expiry changes: Edit the timthumb.php and increase FILE_CACHE_TIME_BETWEEN_CLEANS and FILE_CACHE_MAX_FILE_AGE from the default value of 86400 (i.e. 1 day) to something like 864000 or 10 days. This will make sure that for any repeated access of the same image is served from the cache. In addition, you may try increasing the BROWSER_CACHE_MAX_AGE as well to help serve your frequent visitors better.
Reduce the usage of timthumb: I have seen themes that use several dozens of timthumb calls from one single page – especially from the homepage. This kind of excessive usage will slow down the site drastically as each HTTP request has to run timthumb.php (or thumb .php) with query parameters that defines the image location, size and quality. As I mentioned a while ago, these GET parameter based URLs are never cached and hence increase the page loading time. With reduced use of timthumb calls, you can avail considerable performance boost in the page loading time.
In addition, you may consider avoiding widgets that randomly display post or news. Random post widgets have random calls to timthumb on every page access and hence they never perform.
Reduce the number of image sizes: Poorly written themes make use of six or seven image sizes based on the timthumb dynamic resizing logic. I have seen themes that use varying image sizes for similar pages (archives, category, search results etc) and even worse – as high as 5 different image sizes for home page. i.e a slider, recent posts, random posts, most read etc. This is not a good thing to do and if you happen to buy such a theme, try to normalize the image sizes to three or four. For example, one slider size, one for single post, one for category/search/related posts together. The performance gain here is achieved via reduced number of files in the cache, thanks to reduced number of file sizes.
The above basic steps will already help with some performance boost.
3. Get rid of RUNTIME use of Timthumb
As I mentioned in the opening remarks, timthumb has been really exploited and probably overused by theme developers. It is not like one of those scripts that generate images dynamically out of data (e.g. stock quote graphs). All that it does is to resize images and of course it does a good job at that. If resizing images is all that it does and serves, why don’t we just resize the images upfront and keep? I mean, if you need 4 or 5 different sized thumbnails of a particular image, all that you have to do is to USE thimthumb logic or (other scripts) to generate them upfront and serve the needs of all your pages using those images.
How do we get rid of timthumb at runtime?
The following are the steps involved in the same. As I mentioned in the above paragraph, we still use timthumb to generate resized images offline and use those images in your theme directly.
- Identify the image sizes that are generated by your theme’s timthumb calls. Typically, the homepage, single post, archives, search results, category page etc of your magazine theme will have timthumb.php calls that you can view using the ‘View Source’ feature of your browser
- Replace all your timthumb.php calls (typically in img tags) using direct image linking whereby the image format will be something like image-file-h-w-zc.jpg instead of the timthumb.php call with parameters such as &h=200&w=200&zc=1. You have to actually edit your theme files such as index.php, single.php etc of your theme to achieve this (scroll down for an example)
- Use my version of timthumb.php (right click and save linked source file as timthumb.php) to generate as many resized images as your theme demands. What my modified version does is to save your image files as it original file format unlike the encrypted image file generated by timthumb. I generate each image file in the imagename-height-width-quality.imageextension e.g. myimage-300-200-1.jpg
- Now, copy the generated images from timthumb cache folder (in my case the cache folder is ‘cach’) to a dedicated media folder and make sure that your theme files refer to that folder (And accordingly change the FILE_CACHE_DIRECTORY value in my timthumb.php)
Using this method, the resized image files are directly served than resizing and generating them on the fly. And these can be served by your CDN as well. You need to just make sure that your CDN settings or W3 Total Cache plugin settings have your media folder set for serving from CDN.
Using my timthumb.php, the typical theme call to timthumb such as:
Will now change to:
Though you will still generate the above image, using a timthumb call mentioned in the first line (will change based on your directory structure).
In my case, I have further simplified by writing a WordPress plugin for myself to automate the above process. Basically, this plugin automatically generates as many thumbnail sizes as I have mentioned in my settings (based on what my theme demands) and then generate those images and copy them into my media folder. This plugin is still a work under progress and hence I wouldn’t be sharing with anyone till it’s in a decent shape.
Nevertheless, I have gotten rid of timthumb for its direct usage from all my themes.
The moral of the story is that don’t ever use image generators in your theme code, if you want your WordPress or Joomla site to perform. Just generate the image upfront and keep!