Cox Crow

Asking the Stupid Questions Since 1971

Optimizing Performance: Image Loading

Two minor optimations can be made to Radio Userland, that should improve the end-user's experience of a Radio site's performance: 1) stop using an image for the permalink, and 2) stop loading images from another host. The first item is not as straightforward as you would think, since the code that specifies this image is stored in Radio, rather than in the #itemTemplate.

Why are these optimizations? If you use an image for the permalink, then the browser has to fetch the image. If you're fetching over HTTP 1.0, then this will require establishing a TCP session with the server, then making the HTTP request, then closing the session. HTTP 1.1 avoids the overhead of establishing a new TCP session for each request, but this is still an additional request to be made. The HTML file size is also larger because of the tag for the image.

If you load the images from the same host as the HTML, then your browser does not have to make a DNS request for the IP address for the other hostname. If the image host is under some load, e.g. scripting.com, then you'll notice a greater return on this change. However, it's not always the case that serving images from the same host as HTML improves performance; you need to balance the cost of the DNS request against the load on the host. And, in some circumstances you may wish to optimize something else: disk space.

Are the images on your site?

So, what to do. First, identify the images we want to load from a different place. The easiest way to do this is to install Mozilla, then select Page Info from the View menu of your page. Click on the Media tab to display a list of the non-text items embedded in your page. We're interested in these

Download each of these images and place them in the ./www/images/ directory below your Radio installation. Radio will upstream them to your site.

Changing the path in Radio

weblogData.prefs table contains two items, archiveLinkImgTag and itemPermaLinkImgTag, which over-ride the globabl preferences set in the system.verbs.builtins.radio.data.strings table. Change the URLs there to point to your site:

itemPermaLinkImgTag: <img src="http://www.coxesroost.net/peanuts/sharpPermaLink3.gif" 
 height="9" width="6" border="0" alt="permalink">

When you next publish your site, the new URLs will be used.

For users whose files are on the Radio Community Server, the images should be distinct from the member sites, but on the same host — or on static.userland.com, depending on the relative loads of the systems. (In this case, they're the same box.) Using distinct URLs would permit the movement of image files to a dedicated host, if that becomes necessary. The files shoud not be local to the member sites in order to optimize disk usage as well as image load times, but would complicate matters in the event a member wants to move to another host. A global preference change to Radio.root by Userland would be handy here.

That pesky pound sign: #

The # sign is a reserved character in Radio, so we can't just type # and get away with it: we have to escape it with a backslash (\). In weblogData.prefs.itemPermaLinkImgTag delete the <img /> tag, and replace it with

\#