Bandwidth saving tips for Movable Type sites (Anders Jacobsen's blog)

February 11, 2004

Bandwidth saving tips for Movable Type sites

Especially applicable for photo-intensive websites like photoblogs; ISP imposed bandwidth limits are easily hit if each of your pages automatically loads and displays lots of images every time they're being displayed:

The excellent photo website Sensitive light is experiencing an expensive fluke in traffic, and I thought I'd dispense some advice on how to limit the bandwidth bill for photobloggers:

The default Movable Type templates are set up for monthly archiving where each monthly archive will display all the full entries from that month. Last time I checked (and I didn't want to excessively browse the site now, increasing an already large tab), the current sensitivelight site used monthly archiving which displayed all the images published in a month, full size, in one page. This takes a lot of bandwidth per showing, especially if the visitors only check out a couple of images. Similar archiving is used by other bloggers, like emese's exellent photolog.

My advice: try using Movable Type's individual archiving as a primary archiving strategy, making monthly archives available header/excerpt only using the following reciepe, which can look like this, or even be tweaked to look like the monthly thumbnail gallery seen here (I'm a bit proud of the latter; I'm using MT's Excerpts for displaying thumbnails).
Displaying loads of full size images on your front page is inevitably going to cost you.

My advice: MT allows setting how many full entries you want to display: reduce the number if the front page loads more than, say, 10 full size images at once on average.
Use thumbnails! I'm not claiming that my photo site is anywhere near perfect, technically nor artistically, but check out my front page for inspiration. The tabular listing of thumbnails has been achieved by storing an <img src="..."> for a thumbnail in the MT Excerpt tag, then inserting the following in my index template:

<tr>

<td align="center" valign="center"><MTEntries lastn="1" offset="1"><a href="<$MTEntryPermalink$>">
<$MTEntryExcerpt$></a></MTEntries></td>

<td align="center" valign="center"><MTEntries lastn="1" offset="2"><a href="<$MTEntryPermalink$>"><$MTEntryExcerpt$>
</a></MTEntries></td>

<td align="center" valign="center"><MTEntries lastn="1" offset="3"><a href="<$MTEntryPermalink$>"><$MTEntryExcerpt$>
</a></MTEntries></td>

<td align="center" valign="center"><MTEntries lastn="1" offset="4"><a href="<$MTEntryPermalink$>"><$MTEntryExcerpt$>
</a></MTEntries></td>

<td align="center" valign="center"><MTEntries lastn="1" offset="5"><a href="<$MTEntryPermalink$>"><$MTEntryExcerpt$>
</a></MTEntries></td>

</tr>

Optimizing the Movable Type archiving strategies can save significant amounts of bandwidth... Let me know how you get on (drop a comment or trackback if you try any of the above? :-)