By David W. Boles and Art Brieva, Technical Director
When you serve up your Web site, don't let the medium mar the message fine-tune your hardware and HTML to make your pages browser-friendly.
The secret to a good-looking, fast-loading Web site is ... Well, just about anyone who's grappled with the challenge of building an eye-appealing site without sacrificing speed will have his own answer. There are no hard and fast rules-aside from the rule that it must be fast.
And that isn't necessarily so hard to accomplish. We'll show you how to get the most function and speed from the least bandwidth. We'll also describe the optimal types of hardware and connections you'll use to reach the Web.
When designing for the Web, it may seem that you have only two choices: form or function. If your key concern is load speed, you could build a fast, text-based page where content is king. Nothing loads faster than raw text-but nothing bores the eye and the mind more quickly than unadorned words on a flickering screen.
Television-trained Web surfers tend to expect a healthy dose of festive images to complement their information. A famous Broadway set designer said, "Entertain the eye and the body will follow." It's not difficult to design a bells-and-whistles-laden wonder of a Web page that will amaze all the surfers who set their browsers in your direction-if only they'll stick around while it takes its sweet time to load.
Remember that old business-school conundrum that tells you to pick two of three choices: price, performance or quality. There's a parallel for Webmasters, but their choices are style, speed or content. You can get measures of all three, optimizing your pages for fast load times, maximum content and a touch of beauty, too.
If you want to make a text-based impact without graphic amenities, use the <font face=> tag. Microsoft Internet Explorer and Netscape Navigator now both support this technology.
Be certain to call more than one font in case your visitors don't have your first choice. <font face="Comic Sans MS, Arial Black, Arial"> is an example of using first, second and third font choices. If your visitors don't have any of the fonts installed, the text will default to their base browser font, without taking extra download time. If a browser is blind to the tag, it just won't load the font-but the page won't look strange or blow up the browser. Also remember that your visitors must have the font already installed on their systems to see it.
The <font face=> tag's benefits are monumental, and there's no downside. Fonts add a fresh aesthetic to your site without sacrificing load speed. You use plain HTML text to call the font without having to load it into memory.
If you have a font that you want all of your visitors to see, you can create a graphic with the font you want and load it as an image. You'll sacrifice load time with this method, but you'll guarantee that everyone who visits your site-with graphics turned on in their browsers-will share the same experience.
There are plenty of ways to build time-saving code into your page. For example, use colors for backgrounds instead of bandwidth-gobbling .GIFs. Liberal use of color can give your Web site visual power. You can lend spice and feeling to your domain without any graphics at all by using different colors to spice up your tables, backgrounds, fonts and hyperlinks.
When coding your pages, write the HTML so that sound and animation files load last. Good browsers load HTML from the top down, and you'll save surfers a lot of foot-tapping if you place these files at the end. Here's an example of this placement-you can see it's the last option in the HTML code load.
<bgsound src="dbw.wav" loop="1">
Always place a link back to your main index page on all other pages. This can either be a hypertext link or a small graphic threaded throughout your site. It'll help visitors get back home to turf they recognize.
Use page percentages instead of pixels to define dimensions of tables. If you use pixels, you run the risk of unseemly results because you can't be sure that every user will choose the same screen resolution that you do. So, instead of using width="400" in a cell, for example, use width="50%". This allows your page to resize appropriately for each visitor's screen resolution and your table to adjust to fit the viewing area.
It's also a good idea to use frames to reduce the number of times the same code must be reloaded. If you make one frame a permanent navigation zone, each subsequent page loaded into the main frame will load faster. You can create the same effect with small graphic navigation bars.
You should also remember to add a hyperlinked text index in addition to graphics hotlinks. Visitors will be able to see your text index first and can blaze ahead without having to wait for your graphics to load.
Another essential concept: "Ask first." Before your pages download that massive Java applet or hefty Shockwave movie to your visitor, find out if the user is indeed interested in taking the time to receive this stuff. If you're paying for the bandwidth your site uses, this can save you money in the end; only the folks who really want those rich multimedia capabilities will spend time and money-both yours and theirs-pulling down your aesthetic extras.
Setting dimension tags for images is one of the secrets to building jackrabbit-quick Web sites. One way to do that is to use the height and width tags to create placeholders for your cyberspace images. You can "squish" the graphic into more manageable dimensions-for example, reduce a 640x480-pixel graphic to 85x64-but still retain the same proportions.
The Alt tag is another useful image parameter-it gives your placeholder a name so visitors will know which graphic they're not yet seeing; they can then bypass the graphic if they choose. What's more, if you're using Internet Explorer 3.0 and hover your cursor over a graphic, the Alt tag text will appear. This gives a Web page author another creative means of pushing information to visitors without wasting bandwidth. Here's an example of a hyperlink that contains the graphics code examples we've discussed:
<a href="http://boles.com/mag"> <img src="bolesmag.gif" alt="boles:the mag!, the logo! Touch here to step inside this Wondrous World!" width="175" height="105" border="0"> </a>
When we're talking Web, we're talking graphics. If you think about your favorite sites, you'll find that the first thing you recall is how they looked. But graphics files are bandwidth hogs that slow down access to your pages. Here's how to get your graphics to load faster.
If you have a large graphic, use a smaller thumbnail image on the page with a hyperlink to the full-sized file. With this method, the user controls how much time is spent downloading images-and your consideration will be appreciated.
Another way to trim site-access times is by using 16-color graphics. This may be easier said than done, but if speed is your need, fewer colors will mean better performance and fewer bandwidth bottlenecks. Even black-and-white line drawings can be extremely effective on a Web page. By all means, keep graphics to 256 or fewer colors.
Use interlaced .GIFs and progressive JPEGs. These files won't load any faster than noninterlaced, nonprogressive graphics, but since they fade in slowly as they load, visitors can get a preview of the images.
As a rule, keep individual graphics smaller than 20KB. That seems to be the most efficient size, although some Webmasters believe that these graphics should be even smaller.
For maximum user-friendliness, avoid image maps. These maps usually consist of a very large single graphic, forcing visitors to wait for the entire thing to load before they can navigate the site. An alternative to putting up image maps is to create a navigation bar made of several smaller images. Your page will still have a distinctive feel, but it won't have the long load time that image maps usually command. But if you're sold on image maps, at least provide a hyperlinked text index under your maps for those who hate to wait.
Test your site with as many browsers as possible. Most people use Navigator or Internet Explorer, but others still use older browsers or online services to access the Web. Sometimes small adjustments can accommodate less-than-state-of-the-art browsers without sacrificing your pages' good looks.
Now that we've addressed some of the HTML and coding issues that can improve your site's performance, let's talk a bit about the hardware that serves it to the masses.
The backbone of your Web site is its connection to the Internet. And line speed is the name of the game when it comes to delivering Web content. There are a number of connection choices but speed costs money. The cost factors and the physical location of your server will determine your communications hookup.
Here are your communications options for connecting your Web site to the Net, in order of affordability.
As you build your Web server today, it's a good idea to keep an eye on the future, too. Keep close tabs on your site's traffic and monitor performance.
To build a Web server the right way and to be able to track its performance, you need a solid understanding of the Internet's infrastructure, including all the parts that get you hooked up and keep you connected. To get onto the Internet, you'll need a physical connection from an ISP, a LAN router to link your local network to the outside world, your Web server and the network hubs that glue all these parts together. Try to consider each of these pieces as parts of the whole, as performance is likely to dip to the level of the weakest link in this chain.
The configuration of your Web server depends on the connection you're using to access the Internet. A dedicated 56Kbps link to the Net is good for about five simultaneous users-and with that few people online, you probably won't need a heavy-duty server. But a full T1 (1.544Mbps) connection capable of supporting 100 users or more demands a server setup that can keep up with a T1's throughput.
Choosing the right combination of server hardware can be complicated by the sheer number of products available. Even if you've settled on Windows NT as your server's OS, you still have to decide what platform to run it on-NT is offered for Intel, DEC Alpha and Mips processors, among others.
At WINDOWS Magazine, we've had great success running NT on Intel-based systems, largely because the Intel platform supports the most NT apps. If you can afford it, NT running on a Pentium Pro system offers blazing speed and is a good host for a Web server. If your budget is more modest, a Pentium 166 or 200 should do the job.
Whatever type of connection you use, a server with a modular, upgradable design can save you big bucks later on. Your present needs may be well served with a single Pentium Pro processor and a 10BaseT network card, but down the road, this configuration may strain under an increased load. If you can add a second-or third-processor without replacing the whole box, it'll be a lot easier to upgrade to meet the higher demands.
A Web server constantly reads from disk or memory, so it should be tuned for fast reads. To get the best performance, start with lots of RAM. If your server's RAM configuration is anemic, it will cause your server to write to swap files instead of keeping data in live memory, and that will slow it down considerably.
For a small- to medium-sized server, based on a connection ranging in speed from 56Kbps to 368Kbps, get at least 64MB of RAM. Another tip: Use SCSI disk drives and take advantage of data throughput rates of up to 40Mbps. You might also consider a RAID 5 array-RAID setups are fast to read and reliable.
You can eke out even more performance by carefully planning the partitions of your SCSI drives. Separating the OS from data and applications can significantly improve both performance and security. WINDOWS Magazine's own server has three partitions. We took two 4.3GB disk drives, mirrored and duplexed them, then placed the OS on these drives. The other four 4.3GB drives are configured in a RAID 5 array with two disk partitions. One partition stores applications used by the server, and the others store Web pages.
Creating a quick, beautiful and content-rich Web site is easy, once you know how to optimize. In an ideal configuration, all the options would be implemented fully: super-slim Web pages from a multiprocessor box would zoom along a dedicated T3 line. For most of us, however, this ideal world doesn't exist.
But even before your site traffic-and budget-reach those heady heights, there's a lot you can do. For starters, condense your content. Every Web designer can use the tips above to minimize the size of graphics, and give the user a choice about downloading large multimedia files. Always include a strong textual foundation in addition to the sights and sounds of multimedia, so that users on both the high and low ends of browser technology can enjoy your site.
Increasing the speed of your connection will go a long way toward making your site more user-friendly.
A faster pipeline to the Internet means you'll be able to load images more quickly and handle more users at once. Sites with a lot of sizable graphics or multimedia files are good candidates for fast connections. Sites with built-in search engines and databases also need a powerhouse server to keep data moving at a reasonable speed.
Get your hardware and your HTML to work hand-in-hand, and you'll sidestep the many bumps in the path to high-performance Web service.
David W. Boles is the author of Windows 95 Communication and Online Secrets (IDG Books Worldwide, 1996). Click Here to find the e-mail IDs for our editors, who can put you in touch with this author.