- EVula Network Banner -

Articles > The "Client-Side Include"

The "Client-Side Include"

by Mike Lee
e-mail: mikelee@cyml.cjb.net

As the wonders of broadband Internet access spread to households all over the world, it may seem pointless for a web developer to try to minimize loading time on a simple website. But there really are many reasons for doing so -- many users, if not most users, are still bound to the painful slowness of dialup. And hosting services, especially those that you can get cheap, often put a limit to the transfers you can have per month. Those extra kilobytes add up.

I've been bound by dialup connections for quite a while, so I've learned a few tricks of the trade of web page optimization over the years. One of these is similar to the concept of server-side includes, or SSI's. All it takes is a little knowledge of JavaScript and the willingness to use it.

To begin with, let me explain the use for SSI's that I'm focusing on. Many websites have components -- navigation bars, for example -- that repeat themselves on every page. Some web developers find it efficacious to encode these as server-side includes so that when they have to update the site, they don't have to go through every page and edit the navigation bar.

This is all nice and efficient, but there are a couple of problems. First off, the server this is done on must support SSI's. Many free web providers don't offer SSI support. Second, all of this is handled on the server side when the user loads the page. So when the user loads each page, the navigation bar is inserted by the server into the web page, and the user downloads the entire page -- navigation bar included. In other words, the only benefit of making your navigation bar in an SSI is to make it easy to edit.

Going back to my client-side include idea, I can now explain the benefits. If the user loads the navigation bar as a separate file, it should be cached into the user's Temporary Internet Files. So each time that user loads another page, the navigation bar can be loaded right from cache -- reducing load time and transfer between client and server.

So, how is a client-side include done? It's simple. If you're not familiar with JavaScript, to display "Hello World!" as text, you use the command document.write("Hello World!"); . So to create a CSI, simply use document.write() statements as needed to code whatever you want displayed, typing these into a text file. Be careful with quotes -- for instance, like those for URLs in an A HREF tag; these require a backslash before them when typing them into a JavaScript command. When you're done, save your text file with the extension .js.

All you have to do then is include this file into your web page. If you named your CSI file "me.js," then you just need the code <SCRIPT src="me.js" language="JavaScript"></SCRIPT>. And the beauty of this is...no SSI. There's no need to find a web host that supports this; as long as your host supports HTML (which I really hope it does), CSI's should work.

That's all there is to it.

If you need examples, you can check some out on this website. The navigation bar at top uses some actual JavaScript code to do some things; if you're familiar with JavaScript, it should be easy to understand. The copyright and last update text at the bottom of each page are also handled through my CSI technique. For instance, the copyright statement can be found here, and is included into every page with the code <script language="javascript" src="../copyright.js"></script>.

If you have any questions on this web technique, feel free to e-mail me at mikelee@cyml.cjb.net. If you feel you need to explain to me how useless this technique is, you can do that too.

Back to Articles
Back to Home