l5

Reusable images at a glance

Site Genre: Pattern Group l

magnify imageFigureL5.1 Optimize server code on your site to make pages load as fast as possible. When they cannot be optimized any further, load data as it comes in and show progress bars so that your customers can start using the initial information and anticipate the delay for the rest.

Background

This pattern focuses on the engineering details, as well as customer feedback issues, in tasks that can generate delays in the customer experience. The pattern applies to all sites that perform resource-intensive tasks at either the browser or the server, including PERSONAL E-COMMERCE (A1) sites, NEWS MOSAICS (A2), WEB APPS THAT WORK (A10), and other sites that use PROCESS FUNNELS (H1). To speed up your Web site, you can use this pattern alone or in conjunction with other patterns, such as LOW NUMBER OF FILES (L1), FAST-LOADING IMAGES (L2), SEPARATE TABLES (L3), HTML POWER (L4), and REUSABLE IMAGES (L5).

Close

PROBLEM

Sites sometimes require a long time to process or load information, but making people wait can cause frustration.

buy the book to find out more

SOLUTION

magnify image FigureL6.8 Optimizing your server code and pages to load quickly and giving customers feedback when there must be a delay will improve the customer experience on your site.

Make your site as fast as possible by optimizing server code, bandwidth, and page designs. For pages that still take time to load, use a progress indicator to demonstrate to customers that the system is working. You can simply inform people with a text message such as Loading, use marching ants to draw the customers eye, create graphical indicators such as barber poles or thermometers, or ideally display parts of the content as they load instead of waiting for the entire page.

Other Patterns to Consider

Keep pages loading fast by speeding up your site. Use a LOW NUMBER OF FILES (L1) to reduce the number of requests that the browser must make to the server. Create FAST-LOADING IMAGES (L2) to improve the speed of existing graphics. Use SEPARATE TABLES (L3) to display a portion of each page while downloading more content or processing information. Redesign graphically intense pages to use HTML POWER (L4) instead. Take advantage of REUSABLE IMAGES (L5) to optimize use of the browser cache. Let people know how much more to expect and that the content is still loading by using a PROGRESS BAR (H13).

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.