Web site performance, page loading and rendering is one of the first impressions a user observes when visiting a web site. Fast web pages appear much more professional. Web pages that load slowly, especially if the pages take 5 or more seconds to load, cause users to abandon a site pretty quickly. Think about it. How many web sites would you continue to visit if each page takes 5, 10 or more seconds or more for each page to load. There are steps that you can take to assure that your web site performs well and helps to retain users.
Depending upon whose survey numbers you wish to follow, about 85% of USA home users are now using broadband connections. Fast broadband connections cover up a lot of performance problems with web sites. But what about the 15% of home users that do not use broadband connections and are stuck with slow, dial-up connections? If your business primarily focuses on a home user market, this is important information, because the speed and efficiency of your Web pages is a major determining factor for retaining visitors to a Web site. Faster web pages help to retain users, slow web pages tend to cause users to hit the back button and look for one of your competitor’s sites.
When contemplating whether or not your Web pages are downloading and displaying (rendering) quickly enough to retain visitors, consider this:
- Page rendering time is the first impression a user gets when visiting a site.
- Page design is the second impression.
- Content is the third impression.
When someone immediately abandons a Web site because it is slow, they never get a chance to form a second or third impression. The most useful content or the most artfully crafted design is meaningless if a user is frustrated and departs before they have the opportunity to see either. Numerous studies have shown that the majority of Internet users begin to get frustrated with slow Web pages in about ten seconds or less. Once a user becomes accustomed to high speed broadband Internet access, the threshold drops to about 5 seconds. The bottom line is that you only have about 5 seconds to impress your visitors. Fast web pages do help to build a business.
Designing Faster Web Pages and Web Sites
There are many factors that affect how fast a Web page loads and renders in a browser. Designing faster Web pages is usually easier to accomplish in the actual design stages, but most problem areas are actually fairly easy to identify and correct on an existing site.
#1 – Make sure your Web server is not part of the problem
Make sure that you have a reasonable amount of trust in your Web server environment. Web servers are very efficient at delivering Web pages and images to users, but every server has a finite resource limit. Factors such as CPU speed, memory and the number of Web sites on a server can dramatically affect the server’s speed and efficiency.
Some hosting companies literally place hundreds or thousands of Web sites on a single personal computer configured as a Web server. When this happens, a site might seem to run reasonably fast during slow usage times of the day, but will slow down considerably at peak times because the PC can only handle a limited number of Web page requests at any given moment. Too many sites competing simultaneously for a limited number of server resources is a recipe for poor performance. If you are using a free or a $9.95 or less per month hosting service, the chances increase dramatically that your site is one of way too many on the server. If you suspect that the server is part of the problem, you may want to consider switching to another hosting company or upgrading to a plan where performance is monitored and guaranteed.
Many e-commerce sites and other sites with high volumes of user traffic opt to run on a dedicated server. This means that there is only one Web site running on the server, so it does not compete with other sites for resources. Dedicated hosting tends to be expensive and beyond the budget of most small Web sites, so for most sites other options need to be considered. Anther option is a VPS server (virtual private server). Good, reliable VPS hosting can be found for about $50 per month. With a VPS server, you share the server with a few other webmasters, but you are guaranteed a certain amount of CPU processing time and bandwidth.
#2 – Page design factors for faster Web pages
The single most important factor that you can control is page weight. Page weight is the total size in bytes for all code, content, images and objects that must be downloaded from a Web server to a user’s browser. The larger the page weight, the longer it will take to download and display the Web page. Contrary to a popular misconception, you are not actually connected to a Web server while you are viewing a Web page. You only connect to a Web server for the few seconds it takes to download a Web page’s code, content, images and objects. From that point on, the Web page runs in your browser.
There are two elements at play:
- Delivery Time – the amount of time it takes to deliver the code and images from the server to the user’s PC across the Internet
- Display Time – the amount of time it takes to render the Web page in the user’s browser
Delivery time is directly related to the efficiency of the server, the connection speed of the user and the size of the files that need to be transferred. For obvious reasons, high-speed Internet connections are much faster than dial-up connections, but almost half of the residential Internet users in the USA are still using slow dial-up connections. The reality is that you have no control over a user’s connection speed, but it is nonetheless an important factor. If your Web site is focused on the large home user market, you need to remember that the smaller the combined size of the code, content, images and objects that needs to be transferred, the faster the page can be delivered. In other words, the lighter the page weight, the faster the delivery time.
The display, or rendering of the page, is related to the speed of the user’s PC, the amount of code, content, images and object to be rendered (page weight) and the efficiency of the code. As a Web designer or developer, you only have control over the page weight and the efficiency of the code.
Controlling page weight
In order for a Web page to be delivered and rendered in ten seconds or less over a good dial-up connection the page weight must be kept below 60,000 bytes (60 kilobytes or 60k). 30,000 bytes is an even better target. The fact is that a fast page cannot be delivered to a dial-up user on a first-time visit if there are 100k in images and another 30k in HTML and JavaScript code. Once the code and images are downloaded the first time, they tend to be cached by the user’s browser and therefore a second viewing should be faster, but it’s the first impression that counts the most.
The first thing to look at is the size and number of images. The number one problem with most slow Web sites is excessive images and/or bloated image file sizes due to lack of optimization. Limit the number of images on each page to the absolute minimum required. Don’t use an image
if you can use a background color using HTML or CSS (Cascading Style Sheets). Make sure your images are optimized (files sizes reduced as much as is possible without degrading the quality) using one of the many popular image editors. Recognize that images containing primarily solids and lines can probably be made smaller and more efficient as .GIF images,
while photographs can be more efficiently reduced in size as .JPG images. Also try converting the images to the newer .PNG format. Use the image format that produces the smallest file size.
A great online tool for determining page weight and the sizes for each individual file and page element is the Web Site Optimization web page analyzer. Just plug in the full URL for the page you wish to analyze. Make sure that you read the tips at the end of the report.
You will need to learn HTML, JavaScript and CSS to fully optimize Web page code. You can partially optimize HTML code if you use WYSIWYG (What You See Is What You Get) development tools such as Microsoft FrontPage, Adobe GoLive or Macromedia Dreamweaver if you understand the important factors as you design a page, but in order to fully optimize a page, you will have to learn the languages. Fortunately, these languages are relatively easy to learn, but are beyond the scope of this article. If you do understand HTML, JavaScript and CSS, and you use one of the many WYSIWYG tools to design your Web pages, make sure you do a thorough code review for each page and eliminate all of the garbage most of these
tools leave in the code. If you do not have the time or skills to do this yourself, use a qualified Web developer to review and optimize the code.
Recognize that text is smaller and loads faster than images. Never use text in an image to convey a message unless it is the only way to do so. Slow Web pages are commonly loaded with images containing text. In addition to adding weight to Web page, they put your site at a disadvantage with search engines because spiders do not read text in images.
Improving rendering time
Don’t nest tables (tables within tables) unless you have to. Excessive table nesting slows rendering because it take longer for a browser to construct nested and very complex tables. The more tables you nest or the more complex your table designs, the more time it will take to render. If you use tables for layout, try to keep the design as simple as is possible. When you see a Web page flash or jump or re-arrange elements as it begins to render a page, this is usually an indication that the browser is re-evaluating and re-rendering the page.
Don’t build a page using a single table. At a minimum, use separate tables for the header, the body and the footer. This doesn’t necessarily lessen your page weight, but it will give a user the impression that things are loading faster as the page begins to render from the top down.
When a page is rendered using a single table, the entire table must be constructed within the browser before it displays. When a page is broken up into separate tables, each table renders separately, giving a user the perception that the page is loading faster.
Declare all image dimensions in your code. Adding "width=" and "height=" attributes to your image tags may add a small amount of code, but can improve page rendering because these attributes act as a placeholder for images. Images are usually downloaded last because images need to be requested through the HTML script. If image dimensions are declared in the HTML code, the images slip right into their placeholders without forcing the browser to resize and re-render tables.
Reducing the amount of code on a page
This is the part that requires knowledge of HTML and the use of an HTML editor. You need to adopt a philosophy that says every byte matters. This means that every byte of code that can be eliminated from a Web page script will slightly lessen the time it
takes to download and render a page. Granted, the time required to download and render a byte of code may seem extremely small, but cumulatively it has a noticeable effect.
Here are some simple coding issues to focus on:
- Do not create ladders or stairway spacing in your code. Every tab and space is a byte. When you stagger your script code to make it more readable, you are wasting a large number of bytes. The more code you have in your script, the more bytes you will waste. Even though six spaces in a row only displays as a single space on a Web page, you still have to download
six spaces. One method that works is to avoid indenting your table tags in your HTML editor or use only one or two spaces to indent the table cell contents in your scripts. You do not need to add 2,000 spaces to your code to make it more readable. - Don’t get excessive with HTML comment statements. If you can eliminate the use of comments in your code, you are much better off. Even though comment statements do not display, they must be downloaded with other code and parsed by the browser.
- For a standard grid-type table layout, only declare cell widths in the top row. A browser starts to render a table from the top row down. Once it knows widths for each of the top cells, the remaining cells follow the pattern.
- Move your CSS (Cascading Style Sheets) to a common external file that defines all the pages in your site. External style sheets tend to be cached by most browsers and will lessen download and delivery times. CSS can also dramatically reduce the amount of page weight. The only downside to using CSS is that some CSS rules are not recognized by Netscape
4 and other older browsers. You do need to be aware of which browsers your visitors use and make sure you test the site using those browsers. - Move common JavaScript code to an external file. This will also be cached by most browsers. JavaScript code used for rollers and other interactions can easily be made universal and applicable for all pages within a site.
#3 – Database issues
An improperly matched database can dramatically slow down a dynamic web site. Also, too many database lookups or poorly written SQL code has a negative impact on performance.
Do not use a Microsoft Access database for a dynamic web site if you expect to get more than a few dozen visitors at one time. Although many Microsoft hosting companies offer Access, it is not designed to handle the load of many visitors and it has very little security to protect sensitive information. it typically bogs down at about 30 visitors. Opt for using SQL Server if you are on a Microsoft server. If you are on a Linux or Unix server, the best choices are MySQL or PostgreSQL. Probably 95% of Linux-hosted sites use MySQL. There are thousands of sites that support MySQL issues and almost every PHP programmer works with MySQL.
Very large e-commerce sites typically use Oracle, DB2 or other enterprise-level databases.
If your site uses a free shopping cart, such as osCommerce, Zen Cart or others, make sure that you disable all of the features that you do not need to use. The default installation of these shopping carts tends to leave everything turned on, and you may find that the site is doing 30, 40 or more database lookups just to load the home page. This is more than excessive, so if you want a faster web site when using free shopping carts, disable all of the features that you do not need.
#4 – Other tips to consider for faster web pages, particularly if your server is slow or overloaded with Web sites
Don’t use HTML Server Side Includes if your site is small. If you use Server Side Includes (SSI), you know what this is. It is a technique available on most servers that allows you to merge segments of code into a single HTML page. SSI can save a great deal of time if a site is large, but this technique slow down the delivery of a page because multiple scripts must be combined before the server sends the Web page to the user. Too many includes on a page will have a noticeably negative impact on Web page delivery.
Don’t use a dynamic Web page design if a static HTML design will work. Dynamic sites are a necessity when user interaction with a database or the server is required. But if the resources available on your Web server are already strained, the use of dynamic pages just compounds the problem. Even if a page has no dynamic elements, it will still be processed by the server before sending it to the user’s browser. A static page is sent directly without a processing delay.
There are numerous other issues that can negatively impact the speed of a Web page. This article covers most of the common issues that affect most Web sites. The easiest way to combat the problem is to adopt the "every byte matters" philosophy and apply it to every Web page you design or maintain.