1. reduce page sizeEvery 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.
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 capacitySometimes 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.
See building the backend, p. 188 building for reliability, p. 179 3. overhaul the htmlWhen 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:
See designing for speed, p. 92 building your site to last, p. 184 understanding stylesheets, p. 162 4. overhaul backend codeIf 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-platformThe 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 firstAs 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.
|