Rationale
The size of a file on the web impacts the time it takes to download that file and is an issue that affects everyone using the web. Users with slower Internet connections and users of the latest mobile technologies are particularly impacted by the issues of file size and download time.
Keep in mind when making decisions about file size that not all users are going to be able to afford high-speed connections.
Meaning
To optimize performance on the web, files need to transmit fewer packets of information and minimize server requests. Web developers should use the following practices, whenever possible, to improve download time:
- Create files of the smallest size possible while taking into consideration their intended purpose. Top level files, such as home pages, which target all users of a website, should always download quickly. A general guideline for reasonable download time of a top level page is 5 to 10 seconds on a 56 K modem, which translates to a file size range of 30 to 60 KB including HTML, images, and other embedded objects.
- Break large files into smaller sections for quicker download whenever reasonable and supported by the structure of the document. For example, a report in chapters might easily be broken up by chapter while a policy document may be better posted as a single file.
- Indicate file size for files larger than 1 MB so users will have some indication of how long the download will take.
- Optimize the color depth (the number of colors stored in the file) and resolution of images. Most monitors only display a resolution of 72 pixels per inch, with some high-end exceptions that display at 96 pixels per inch. The color depth for GIF files should be reduced, and the compression of JPEG files should be increased to the extent feasible while maintaining required image quality. Reducing the color depth and resolution can greatly reduce the size of the file without affecting the display quality of the image.
- Create image files with the dimensions that will be used when displayed. Do not define the size of the image using the height and width attributes of img or table tags. Instead, use height and width attributes to describe the actual size of the images on a web page. This will allow the user's web browser to display the layout and text of the web page while images continue to download from the server
- Know your audience and refer to web charts with the download times for different Internet connections. When appropriate, particularly when targeting an audience with slower connections and newer mobile technologies, provide multiple download options for larger files.
Testing
Perform a manual check of all large files and determine if you have optimized their size as much as possible, following the best practices listed in the previous section.