SERVICE NOTES

Ten performance-boosters you should use

1. Compression. By adding these lines to the .htaccess file in your web directory, you can save 50% to 80% of the time and bandwidth needed to deliver your pages:
   

   AddHandler application/x-httpd-php .html
   php_flag zlib.output_compression On

   This causes the server to compress HTML content as it is sent. Check your results using this compression tester.

2. Optimize Images. Use a good graphics program like Adobe Photoshop or ImageReady. Size your images appropriately, then use the Save For Web feature. Depending on the image, certain image formats will yield better size vs. quality ratios, so try them all, reducing colors or quality levels as needed.
3. Use Text for Text. Avoid graphics for text information. Aside from slowing down your site, depicting text in images can have several negative effects: visually impaired users cannot scale type size or have graphics read aloud, search engines can’t index the text, copy and paste won’t work, and it can look poor when printed.
4. Style with Style Sheets. A cascading style sheet (CSS) can eliminate tons of old-school FONT tags and other unnecessary markup elements. The ability to precisely position items through CSS virtually eliminates inefficient and tedious TABLE tags.
5. Embrace XHTML. Once you’ve separated content from presentation using CSS, you might as well code your pages in standards-compliant XHTML. Sites that use the XHTML and CSS combo are about one third the size of ordinary HTML sites and enjoy many other benefits.
6. Link to Reusable Items. Style sheets and JavaScript code used throughout your site are best stored in separate files loaded from each page. This not only eliminates redundancy but greatly simplifies site management.
7. Trash Meta Tags. Long lists of keywords and descriptions are wasted as their META tags are no longer used by search engines. Include a rich mix of important keywords in the content of your pages and you’re far better off.
8. Don’t Be Wordy. Pages with loads of text are ignored in our short-attention-span world. Choose words sparingly so your pages will load faster and might even be read.
9. Optimize Links. Use relative references in hyperlinks (don’t include the “http://www.yoursite.com” part). When linking to index pages, link to the target file (e.g., “dir/index.html”) or to the directory (e.g., “dir/” and don’t omit the trailing slash). This eliminates extra transactions between the browser and server.
10. Simplify Effects and Navigation. Sites composed solely of Flash or large Flash objects can take a long time to load. Many Flash effects can be done more efficiently with JavaScript. Old-school navigation rollovers relied on heaps of JavaScript and multiple images. They can be done more easily with CSS sprites.

It’s easy to juice up your site with these powerful techniques. Before and after applying these tips to your site, check your pages using this speed analysis tool. Visitors with slow connections such as modems and mobile devices will notice significant gains. Users with faster connections will appreciate the increased responsiveness. Plus, if your site is heavily trafficked, you can avoid or reduce extra bandwidth fees. It’s all good!

This entry was posted on Wednesday, March 1st, 2006 at 12:10 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.