I’ve been reading High Performance Web Sites and started thinking about how to apply the guidelines to my own sites (not to mention stuff for work). A lot of them are things I already do: minimize external resources, use compression & cache control, etc. Others are a bit out of reach for a personal site [edit: not anymore], like using a content delivery network. It got me looking at the way I use scripts, and reminded me of a change I made about a year and a half ago.

Way back when, I put a simple app on my Flash site: a team-name generator for teams of speedsters. It randomly generated a name from two lists, and provided a button to generate another one. I originally wrote it in PHP.

The funny thing was that it was the most-hit page on the site, because people would sit there and hit the button to generate a new name half a dozen times before moving on. And because it was a sever-side script, that meant not just another HTTP hit, but re-downloading the entire web page with only 2 words being different.

Eventually I realized it was much better suited to a client-side app. I rewrote the whole thing in JavaScript, using DOM functions to replace the name on the current page instead of reloading. I left the hooks to the PHP in place, so that it would still work for clients with JavaScript disabled.

  • It was much faster — practically instantaneous, in fact.
  • It used a lot less bandwidth — 40 KB (5 KB × 8 ) vs. 6 KB (5 KB + 1 KB) for a typical 8-name* scenario.
  • Traffic stats more accurately reflected the page’s popularity, as it dropped from #1 to around #30–50.

* Based on a drop from 32,000 hits/month in July 2006 to 4,000 hits/month in September, with the rest of the site staying about the same, it seems people were hitting reload 7 times.

Posting an Opera button on your website or blog is a great way to encourage people to try out the browser — but what if the visitor already uses Opera? It shows solidarity, but what if you could show them something else, something that is new to them?

You might want to replace your regular Opera banner with an ad for Opera Mini. Or show them another graphic of your own design. Or maybe not even a graphic, maybe post some sort of message, like “Opera spoken here!” or “Welcome, Opera visitors!”

It’s relatively simple to do this in PHP, or ASP, or some other server-side script…but sometimes you have to stick with static HTML. Well, client-side JavaScript can replace chunks of your page, and here’s how to do it.

1. Put the following script in a file called operalinks.js:

function replaceOperaLink(linkID) {

if(linkNode=document.getElementById(linkID)) {

if ( 0 <= navigator.userAgent.indexOf('Opera') ) {

var newButton=document.createElement('span');

newButton.innerHTML = '<a href="http://www.opera.com/">Glad to see you're using Opera!</a>';

var parentNode=linkNode.parentNode;

parentNode.replaceChild(newButton,linkNode);

}

}

}

For the innerHTML section, you can plug in a new link and banner, or a special message, or anything you want. (Just make sure that you put a backslash () in front of any apostrophes you use.)

2. Put a unique ID in the tag for your regular Opera button. Use the outermost tag that you want to replace. For example, let’s start it off with this:

<a id="OpLink" href="http://www.opera.com">Download Opera!</a>

3. Load the script in your document’s <head> section:

<script type="text/javascript" src="operalinks.js">

4. Call the function in the body onload event using the ID you chose in step 2:

<body onload="replaceOperaLink('OpLink')">

When the page loads, the script will check the visitor’s browser. If it’s Opera, it’ll replace the banner with whatever message you chose in step 1. It’s compatible with both HTML and XHTML, and you don’t need to worry about using <noscript> tags to make sure the banner still shows up for people with JavaScript disabled.

*This post originally appeared on Confessions of a Web Developer, my blog at the My Opera community.