The first impression that a user gets when visiting a website is the speed at which the page downloads and renders. How many times have you hit the back button and abandoned a web site because it was loading slowly? We offer some methods to prevent this from happening with your web site.

There are five components for faster web site performance:

a. Server performance – The ability of a hosting company to provide the bandwidth and resources a web site needs to perform quickly and efficiently. This can be a critical performance factor with many web sites.

b. Server processing – Applies to a dynamic web site or any web code or database calls processed on a server before sending the page to a user’s browser.

c. Downloading – Refers to the time it takes to download all scripts, images and web objects to a user’s browser. The total amount in bytes of all objects, images and code that is downloaded to a browser is also called “page weight”. The lower the page weight, the faster all of the objects on a page will download.

d. Page rendering – The amount of time it takes for a browser to convert download web site code, objects and images into the web page displayed in a browser.

e. User’s bandwidth – The connection speed available to download web code, images and objects from a web server to a user’s browser. This can vary wildly. Most of the time, the bandwidth that an ISP claims to offer is only rarely achieved due to Internet traffic and bottlenecks.

You can control the first four issues, but have no ability to control the fifth. You can, however, influence issues with a user’s connection by developing web pages that are processed, downloaded and rendered very efficiently.

1. Make sure that hosting is not the problem. Web servers have limited resources and each website hosted on a server is competing for those resources. If you use free or cheap hosting, there may be hundreds or possibly thousands of sites sharing the resources of a single server built on a PC. If you have a large web site or run multiple web sites, consider using a VPS (virtual private server) or dedicated server. If your server is the source of a bottleneck, there my not be much that you can do to speed it up significantly. Do not judge a hosting company simply by its size or brand recognition. Some of the largest hosting companies in the USA produce some of the poorest performance with their shared hosting offerings. Ask a hosting company about how many sites they place on a server before you sign up for their services.
2. Write efficient code. Eliminate every byte of code that is not necessary. Every byte of unnecessary code should be removed from the page scripts as well as JavaScript libraries, AJAX libraries and CSS documents. If you have a dynamic web site that generates web pages using PHP, JSP or another server-side language (code processed on server), eliminate all unnecessary code that needs to be processed by the server. Static code that is simply sent to a browser (client-side code processed in a browser) is more efficient than code that must be processed before being sent to a user’s browser. Any processing that the server has to do can cause processing delays.
3. Combine individual external CSS files, as well as AJAX/JavaScript files to reduce the number of server requests. Every file or object that is requested from a server is a server request. One script and 20 images would be 21 server requests. Each server request causes delays and increases the chances that any one request will be slow or will hang. Any object that has trouble downloading will cause downloading and rendering delays. With a large number of server requests, page loading times become more erratic.
4. Eliminate unnecessary database calls/requests. If something never changes, such as a list of US states, this information should not be pulled from a database and displayed in a drop-down box. Use static HTML/XHTML code that does not get processed by the server. Databases can cause processing delays, especially if they are overworked, have been sitting idle for a while or have to sort through lots of data. Make sure that any SQL code is written efficiently. It is much more efficient to use JOIN statements to combine data from different tables than it is to make separate requests from each table. Never request more data from a database than you need to process or display.
5. Learn how to optimize a database. MySQL uses an OPTIMIZE command that deletes unused index entries and improves the efficiency of database operations. This is especially important for large databases. Learn how to use phpMyAdmin or other database utilities to improve the performance.
6. Make sure that every image is optimized for the smallest file size. Re-use images wherever you can. Images tend to be cached by browsers, which means that they are stored in memory so that they next time they are requested, they already reside in the browser and do not have to be downloaded. Do not re-size images using HTML. Resize image using an image editor and display them at their actual size. Use width and height attributes in your code to display images using their actual size. Resizing images using HTML is inefficient. Even if you re-size a 100k image that is 400 pixels wide by 40 pixels wide to 100 pixels by 100 pixels, you still have to download a 100k file. Proper resizing with an editor will reduce the file size. Declaring the dimensions using width and height attributes helps a browser to reserve the space needed for the image and will not have to re-render the page to make room for an image.
7. Do not use any more images than you need. Unless an image is already cached, each image needs to be downloaded from the server, which causes downloading delays. The bandwidth or connection speed available to a user is limited. You can think of bandwidth as a pipe. Small pipes can only pass small amounts of information at one time. If you try to cram too many large image files through the pipe at one time, there will be downloading delays.
8. Properly designed CSS web pages are more efficient, use less code and render faster than pages using HTML tables to control the layout. Learn how to develop pure CSS web sites.
9. For fastest rendering and best compatibility across a range of browsers, HTML/XHTML code should be validated. The industry standard validator for client-side code is the W3C validator. Fix any errors that are identified. Modern browsers are very good at fixing errors as they render a page, but fixing those issues can slow down the rendering process. Plus, there are two rendering engines in most browsers. If a browser fumbles with the code, it switches from standards mode to the quirks mode rendering engine, which sometimes does strange things.
10. If you have medium to advanced programming skills and have a issue with a site that uses too many server resources, consider using server caching to store static copies of web pages that are much more efficient to deliver to a user’s browser. All dynamic programming languages have caching options that are available. Server caching will not do anything to mitigate problems with bloated images or other large objects, such as Flash.

Do not judge a site that you develop based solely upon the speed you see on your end. Your Internet connection may be much faster than the average user’s connection. A good test is to use a laptop or PC with a modem and a dial-up connection. If a web page takes more than about 15 seconds to load and render using a 56k dial-up connection, the web page is probably bloated or inefficient.

Web page performance has a cumulative effect associated with it. In order to speed up a web site to its peak level of performance, every issue that can affect any aspect of performance needs to be optimized. Total page weight is very important if you want a web site to consistently load and render quickly.

A good tool to use to quickly evaluate page weight is the free Web Page Analyzer found at WebSiteOptimization.com. This tool generates a report that details each of a page’s server requests, the size of each file, and estimates the download times for a page for a range of different connection speeds.

As a general rule, total server requests should be kept under 20. I prefer to keep the total page weight for any page at less than 150k bytes. If you can get the page weight under 100k, that is even better.