TimThumb and WordPress Blog Performance

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:

  1. Optimize Timthumb queries with a combination of .htaccess rewrite and CDN integration – Advanced topic
  2. Do basic optimization of timthumb script and usage within your blog theme
  3. 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.

  1. 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
  2. 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)
  3. 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
  4. 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.

Sample code
Using my timthumb.php, the typical theme call to timthumb such as:

http://mydomain.com/wp/themes/mymagazinetheme/timthumb.php?src=http://mydomain.com/wp/media/sampleimage.jpg&h=400&w=580&zc=1

Will now change to:

http://mydomain.com/wp/media/sampleimage-400-580-1.jpg

Though you will still generate the above image, using a timthumb call mentioned in the first line (will change based on your directory structure).

Further Simplification

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.

Conclusion

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!

Comments

  1. Anil :

    I saw that you mentioned W3 Total Cache in this article. Please avoid this plugin, as it keeps many sql connections open and screws your blog. There was a lot of downtime in one of my blogs when traffic spiked unusually.

  2. Do you have any tips for completely removing timthumb from a wordpress theme. Seems the code is everywhere, I would rather do the optimization and size of images myself and not worry about tim thumb making my images larger in file size.

    • Ryan, that’s exactly what I have tried to explain as step 3. I too bought one of my themes from themeforest and it was full of timthumb calls. Had to edit and remove all timthumb calls and instead refer to my manually resized images for performance. I still uses timthumb for resizing offline so that it gets cached on the server folder where I want it

  3. Ajith, I got to be honest I am a noob when it comes to editing themes on this level, I really look forward to your plugin. I see the timthumb calls, I have tried to change the code and when I have I get errors. I am not sure what I am doing wrong, but maybe your plugin will be of help. Looking forward to it. I will read your step 3 a few more times and see if i can understand exactly what I need to do. Thanks for the post.

  4. kimi :

    first of all, thx for the great work on the guides :D

    ‘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)’

    well is there any example for it?

    • There’s a sample code given :) Well, basically it’s about removing timthumb calls with direct reference to your resized images.

      • kimi :

        ya, done it, real thx for your post.
        anyway i am using arras theme, if you are wondering what to edit, find the following line and edit.

        thumbnail.php
        return ”;

  5. Amit K :

    Nice article Ajith. I am using a theme which calls timthumb/wordthumb.php for image resizing. The theme has option to disable it. But even if i disable it I found that the images are not at highest quality or if I use q=100 option with the script it still shows lower quality images. Can you help me in this?

  6. @ Ajith : Thats very ture, not knowing this I have been using timthumb for all my themes .. What about WP Default Thumbnails ?? are they better or you suggest a image script for better features.

    As I mentioned I’ve been using timthumb, I have a lot of timthumb urls indexed in Google, any idea on how to get rid of these urls using htaccess or anything else or Is Google URL Removal is the only way.

  7. Baluino :

    What about external image? Thx

  8. Rein :

    Hi Ajith,
    Thanks for this post, have bene looking for this. I can’t however find the line
    “FILE_CACHE_TIME_BETWEEN_CLEANS and FILE_CACHE_MAX_FILE_AGE” in timthump.php

    I am using Genesis (like you) + Magazine theme
    Any idea what I should do?

    This is my code btw, hope this doesn’t look spammy:

    < CODE REMOVED >

  9. Luca :

    Nice article! Is there a way to check if the thumbnail file exists in cache than call it directly or if missed call the timthumb script to generate a new thumbnail file and call this file?

  10. Johhy :

    QUOTE:
    “USE thimthumb logic or (other scripts) to generate them upfront and serve the needs of all your pages using those images”

    Where can I get one of these scripts?
    Thanks!

    • Johny,
      You can modify Timthumb script itself as many times during posting. I have written a little plugin which does that but it works only for my site. I hope to modify it and release some time so that it can work with any blog.

  11. Rein :

    Hi Ajith,

    I posted a comment here about a year ago, about “FILE_CACHE_TIME_BETWEEN_CLEANS and FILE_CACHE_MAX_FILE_AGE” missing in timthump.php

    You responed that they must have tweaked the theme already.
    I do however see when I run my site (datingsite-ervaringen.nl) through http://tools.pingdom.com/fpt/ that I should do this:

    Leverage browser caching: The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:
    (and then a long list of timthumb files.

    So the expiration is still very short. I have no idea how to change this. Perhaps you know a solution? Thanks!

Speak Your Mind

*