a speedy site in 6 steps

1. reduce page size

Every single thing you put on a web page text, images, scripts adds up. If you're serious about speed, you'll have to tighten your belt.

Reduce the number of images. Images are the most common offender on slow web sites, and the easiest to fix.

  • Eliminate unnecessary images. By paring down your images, you create a more focused user experience and a faster loading site.

  • Replace images of words with words. Avoid using pictures of words: They're slower than regular text and can't be searched.

  • Repeat images through the site. If you re-use images throughout your site, the browser will store them so they don't have to be downloaded a second time.

Reduce the size of images. Techniques may vary, but every image on your site without exception should be compressed. See preparing images for the web, p. 208.

Remove unnecessary multimedia. Audio, video, and animation force the user to stop, look, and listen. If the message isn't crucial, it's a distraction.

Remove unnecessary scripts. JavaScript programs and other scripts can slow down your site. At least take the time to improve the code.

Lose the link farm. The text on your site is usually the least of your speed troubles, but long lists of links will slow the browser down.

Evaluate banner ads. If your site accepts ads, you'll need a strict evaluation process. Ads that are too big or that use "rich media" technologies can slow your site to a crawl and cost you more in customers than you gain in revenue.

See designing for speed, p. 92

understanding memory, p. 205

preparing images and multimedia for the web, p. 202


2. increase bandwidth & server capacity

Sometimes your speed issues are caused not by your pages or your scripts or your ads, but the system that serves them. As a site grows in size and popularity, its backend also needs to scale upward. You need sufficient server capacity, and sufficient bandwidth, to handle all the requests pouring in, particularly at peak hours. You should be able to get reports that tell you what capacity you're running at.

  • Number and capacity of servers. Only a limited number of people can access your site from a single server at any given time. So if your site's traffic is taking off, you should consider adding more (or more powerful) servers.

  • Bandwidth. Internet hosts only allot a certain amount of bandwidth for each client. And if you're traffic is on the rise, you may have outgrown your allotment. You should consider options for increasing bandwidth possibly through sharing at least during peak hours.

See building the backend, p. 188

building for reliability, p. 179


3. overhaul the html

When it comes to speed, size isn't the only thing that matters. Even small pages with minimal graphics and no scripts can be painfully slow. The main culprit here is poorly constructed HTML.

HTML tells the browser what a page should look like. (See picturing how html works, p. 194.) But sometimes it leaves out important details, such as the size of an image. When this happens, the browser has to wait for the big, fat image to load before it can draw anything at all. Worse, it may begin drawing the page, then "realize" it's made a mistake (e.g., the image is too large for the space it allotted). The browser will then clear the screen and re-draw the page, to the dismay of the user.

To avoid HTML speed traps:

  • Specify height and width of images. Every image on your site should be described by dimensions. This saves the browser a lot of thinking and your users a lot of waiting.

  • Specify height and width of tables and table cells. Like images, tables and the cells within them should be described by their height and width. This helps the browser draw them accurately...on the first try. See understanding tables, p. 160.

  • Avoid nested tables. To achieve complex designs, designers often nest smaller tables within larger tables. But too many nested tables can bog a browser down: It has to calculate too many things before it can even begin drawing an image.

  • Switch to stylesheets. Many sites still use font tags to control typography. But font tags which have to be repeated again and again throughout the site waste a lot of bytes and a lot of your time. A switch to stylesheets means faster-loading, faster drawing of pages, and bonus a lot of saved production time.

See designing for speed, p. 92

building your site to last, p. 184

understanding stylesheets, p. 162


4. overhaul backend code

If your site is application-based (like a search engine or a commerce site), the code itself could be holding you back. Engineers are constantly working on ways to optimize code, making it run faster and putting less strain on the servers.

There are a lot of ways code can contribute to site speed: sometimes the code is inefficient and steps can be combined or skipped altogether. Sometimes a procedure is more processor-intensive than it needs to be. Sometimes the ordering of events can impact the load on the server. Sometimes code can be pre-compiled rather than generated on the fly. And sometimes server-intensive (read: slow) features just need to be taken off the site.

See adding applications to your site, p. 226


5. test cross-platform

The concept of cross-platform and cross-browser testing is old hat for most web production gurus. There are so many different browsers, and each has different versions for the Mac and the PC, not to mention Unix.

The focus is usually on visual display: How do the pages look in each browser? But cross-platform speed tests are also important particularly when your design uses a lot of HTML hacks, nested tables, or add-on technologies.

See designing for different systems, p. 90

building for compatibility, p. 176


6. show important things first

As a final note, let's talk about the power of perception. Sometimes what we perceive is more important than what is. For example, most CEOs believe their company has very efficient tech support because the tech support team always responds quickly to the CEO's concerns. (They're no dummies, the tech support guys). Support for the rest of the company may in fact be abysmal; but the CEO would never know it, and his perception is what matters most.

How does this relate to you and your web site? Well, you, too, can be manipulative. You can manipulate the user's perception of your site's speed by manipulating which items on the page load first.

Users don't really care how long it takes to load an entire page. They only care about the things they came for. Visitors to a news site want to see the headlines; visitors to a search engine want the search box. So, if you manipulate your page to ensure the key elements appear first, you can vastly improve the perceived speed of your site without doing another thing.

Pages generally load top to bottom, left to right. But this order can be manipulated using stylesheet positioning (Jeffrey Veen explains how in his book, The Art & Science of Web Design). And if you manipulate the order so users immediately see what they came for, well, that's a big savings in speed without making a single tough decision.

action section: how will you improve site speed?

You could build the world's most brilliant and user-friendly web site one that elegantly fills an unmet need for the entire online population and still fail miserably if your site is too slow. So what are you going to do about it?

send the page faster

strategy

done

not doing it

Decrease overall page size

Remove unnecessary images

Repeat images throughout the site

Replace pictures of words with words

Replace image maps with text navigation

Crop images more tightly

Compress images more completely

Remove unnecessary Flash files

Remove unnecessary multimedia files

Remove that JavaScript ticker!

Remove unnecessary scripts

Reduce the number of banner ads

Set stricter policy on the size of banner ads

Eliminate rich-media ads, or at least test them

Eliminate unnecessary scripts

Increase bandwidth, at least at peak hours

Remove multimedia files; serve them on a separate page

generate the page faster

strategy

done

not doing it

Overhaul code to lessen strain on servers

Check for code inefficiencies

Add more servers

Add servers with greater processing power

draw the page faster

strategy

done

not doing it

Overhaul HTML; replace troublesome code

Specify height and width of images

Specify height and width of tables

Make sure height and width are correct

Avoid nested tables

Check JavaScript for errors

Check all scripts for "grammar" errors

Test site cross-platform and cross-browser

Create illusion of speed with priority loading




The Unusually Useful Web Book
The Unusually Useful Web Book
ISBN: 0735712069
EAN: 2147483647
Year: 2006
Pages: 195
Authors: June Cohen

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net