25 Ways and Tips to Increase Web Page Loading Speed

YSlow

YSlow (see Resources) analyzes a web page and tells you why it's loading slowly, based on the high-performance web rules drafted by Yahoo! (see Resources). YSlow is a Firefox plugin that integrates with Firebug, so you need to install Firebug first before you can install and use YSlow.

Install Firebug

The installation process for both Firefox extensions is very simple. To install Firebug, perform the following steps:

1. Open Firefox and go to the Firebug homepage.
2. Install the latest version of Firebug.
3. If Firefox is configured to block pop-up windows, click Allow to allow the installation window to open. Otherwise, click Install Now.
4. Restart Firefox.

You can now access Firebug from the Tools menu. You can open Firebug in a new window or in an existing window (see Figure 1).




Install YSlow

After installing Firebug, next install YSlow. To do this, perform the following steps:

1. Open Firefox and go to the YSlow homepage.
2. Install the plugin and restart Firefox. NOTE: Unlike many other Firefox extensions, YSlow does not start automatically. It must be activated first.
3. To activate YSlow, right-click its icon in the status bar and click Autorun.
Figure 2 shows the results of the YSlow performance analysis.

Figure 2. YSlow performance analysis of the Firefox start page

Common sense: keep the design rules in mind

It’s amazing how often simple design rules are ignored, resulting in unoptimized, slow-downloading web pages. Keep the following rules in mind and your pages will load faster.

Use good structure
Extensible HTML (XHTML) has many advantages, but its disadvantages are also significant. XHTML may make your pages more standards-compliant, but its heavy use of tags (mandatory <start> and <end> tags) means more code for the browser to download. So, there are two sides of the coin, try to use less XHTML code in your web pages to reduce the page size.

If you really have to use XHTML, try to optimize it as much as possible. For example, removing whitespace and using strict XHTML coding practices can increase download and parsing speeds. To strictly enforce XHTML Strict rules, add the following doctype statement to your document:

XHTML 1.0 Strict is equivalent to Strict HTML 4.01, and includes attributes and elements that are not present in the deprecated HTML 4.01 specification. Remember, there are two tags that can be used in XHTML Transitional but not in XHTML Strict, for example:

<center>
<font>
<iframe>
<strike>
<u>

Don't overload your layout

Before blogs (and new sites) became popular, it was considered bad practice to make pages scroll horizontally or even vertically. The smaller the page, the harder (but not impossible) it is to fit neatly on the screen. Nowadays, for blogs and content-driven websites, it is not uncommon to see long pages that are several hundred kilobytes in size. Yes, you need to fill more space, but that doesn’t mean you have to fill it with big background images, lots of tables, or a lot of content. Adhere to the principle of simplicity: less is more. The page is filled with various types of images, videos, advertisements, etc., which greatly violates the principle of practicality. Therefore, please think twice before adding content to the page.

Don't use images to represent text

Unlike fonts, which we rarely control how they display in different browsers, images always display exactly the way they were designed. But this is no excuse for using images to represent text.

The most common example of using images to represent text is in navigation bars. Beautiful buttons are more attractive, but they load slowly. Furthermore, images are still not directly indexable by search engines, so using images for navigation is not good for search engine optimization (SEO). Never use images to represent text when you can create beautiful buttons without them through a lot of CSS tricks.

One specific type of navigation that lends itself to CSS styling is tabbed navigation, as shown in Figure 3.

Figure 3. Tabbed navigation



Besides being smaller, this way of implementing navigation is more in line with web standards.

The code in Listing 1 and Listing 2 implements the tab-based navigation functionality in pure CSS/XHTML.

Listing 1. CSS document for tab-based navigation

Check cookie usage
Cookies may be very small files, but the browser still needs to download them. Larger cookies take longer to download, which increases the time it takes your browser to load a web page. Because of this, it is important to keep cookies as small as possible to minimize the impact on browser response time.

Additionally, setting an earlier expiration date, or no expiration date at all, can improve response time. To set the expiration date of a cookie in PHP, use the following code:

This code sets the cookie userid and sets the expiration date to 30 days from the current date.

Do not include unnecessary JavaScript code, externalize it as much as possible. Similar to cookies, JavaScript files take time to download, which will inevitably slow down the loading speed of the entire page. So, use JavaScript wisely (only when really necessary) and optimize your scripts for size and speed.

Another way to shorten JavaScript download time is to use external files instead of including the scripts inline. This approach also works for CSS, because browsers cache externalized text, whereas CSS or JavaScript coded inline (in the HTML page itself) is loaded along with the HTML every time. To externalize CSS and JavaScript code by referencing them in HTML, you can use code of the following form:

Avoid using tables whenever possible
Tables were used as the primary building blocks of web pages, but as page layout elements, using tables is now considered poor practice. Sometimes, you have to use tables (and they are considered excellent practice for displaying tabular data). If so, explicitly specify the width and height of your table cells, rows, and columns; otherwise, the browser has to do a lot of work to calculate how to display them, which can slow down page loading:

Remove any unnecessary elements

This is probably the most obvious tip of all, but it's also the easiest to forget. I mentioned before that “less is more”: not only does this mean that it really appeals to a wider audience, it also means there is less stuff to download and process. If you really need to fit a lot of content on a web page, consider breaking the page into 2, 3, or more separate pages.

Some tips for optimizing web pages

There are many ways to optimize your web pages, including compressing JavaScript files, using Hypertext Transfer Protocol (HTTP) compression, and setting image sizes.

Compress and minify JavaScript files

JavaScript files can be very large, which means that in some cases they can take longer to download than all other components combined. One way to solve this problem is to compress your JavaScript files. You can use GNU zip (gzip) to accomplish this task because many browsers support this compression algorithm.

Another alternative is to minify the file. This method removes all unnecessary characters from the code, such as tabs, new lines, and spaces. It removes comments and whitespace in your code, further reducing file size. Both external and internal stylesheets can be minified. The two most popular minification tools are JSMin and YUI Compressor (see Resources).

Use HTTP compression, and always use lowercase div and class names You can use HTTP compression to reduce the amount of communication between the server and the browser. HTTP compression can be configured in Apache (.htaccess file), or it can be included in the page (for PHP, there is an HTTP_ACCEPT_ENCODING option). But please note: not all browsers support compression. Even for browsers that support compression, compression and decompression will increase the load on the processor. To enable blanket compression (that is, compress all text and HTML) in Apache, use the following command:

Also, think about what you want to compress. Images, music, and videos are already compressed when they are created, so you can limit compression to HTML, CSS, and JavaScript files.

Another trick to reduce compression effort is to use lowercase <div> elements and class names. Due to case sensitivity and the use of lossless compression, <header> is different from <Header> and they are compressed into two different tags. In the following example, the Important class is different from the important class for the compressor, which means that they represent different objects for the compressor and are therefore compressed into two different texts.

Paying attention to details doesn’t seem to matter. But when you optimize your files, all the subtle details should be taken into account.

Set image size
As with table cells, rows, and columns, when you don't explicitly set the image size, the browser needs to perform calculations to display the image, which slows down processing. Additionally, in some cases the image size may not be calculated correctly and the image may appear distorted.

Using CSS image maps for decorative purposes

Using image maps instead of multiple images is another way to improve load times, because downloading individual parts of an image simultaneously speeds up the download of the entire page. Alternatively, you can use something called CSS sprites (see Related topics). CSS sprites can help reduce the number of HTTP requests. An image can contain all the graphic elements needed to decorate or layout a page. You use CSS to select (by calling certain positions and dimensions) the mapping to use for a particular element.

Delay script loading as much as possible

I mentioned earlier that removing completely unnecessary JavaScript code can speed up loading and processing times. But what if your code is already very minimal and you must include JavaScript code in your page?

In this case, one potential way to increase page download speed is to place the script at the bottom of the page to make it load faster. Normally, browsers can download no more than two objects in parallel (from the same domain), and if one object is a JavaScript code, the download of other page components will be paused until the script is downloaded. If you place your JavaScript code at the bottom of your page, it will (in most cases) be downloaded last, after all other components have downloaded.

Use the Firebug extension to track slow loading files, I bet your JavaScript files are the slowest files to download. Minifying your JavaScript files will help, but it may not be enough. You can defer the loading of JavaScript using the following code snippet:

Verify Function Loading It is also possible to verify if a function is loaded, and if not, load the JavaScript file. To do this, use the code in Listing 4.

Listing 4. Verifying that the function is loaded

Note: You can use the defer attribute, but not all browsers (including Firefox) support it.

Optimizing CSS files
CSS files don’t have to be huge if they are properly optimized and maintained. For example, a CSS file with many separate classes can affect download speed. As with your JavaScript files, you need to optimize your CSS files so that they include everything you need while remaining a reasonable size. Additionally, use external files instead of inline definitions to accommodate browser caching mechanisms.

Using a Content Distribution Network
A content-distribution network (CDN) is another great way to reduce download times. When you place static images on many servers on the Internet, users can download the images from the server closest to them. Additionally, most CDNs run on fast servers, so no matter how fast the server is loading, it will respond faster than a small, overloaded server.

Use multiple domains for assets to increase connectivity
Another advantage of CDNs is that they are separate domains. Because your browser limits the number of concurrent connections to a single domain, it's easy to hog all the threads whenever a page is loaded. Therefore, connections to other assets are delayed. However, your browser is able to open new threads or connections to other domains so that any assets loaded from another domain can be loaded simultaneously with all other assets.

Use Google Gears when it makes sense

Using Google Gears (see Related topics) is another good way to prevent users from having to download the same content over and over again. Gears allows users to access Web applications offline, but also allows page elements to be persisted on the user's computer. Therefore, content that is frequently loaded but not updated can be stored in the Gears database, which is a SQLite3 relational database management system. All next requests for the same content can be loaded directly from the database (rather than the server).

After installing Gears, get the gears_init.js file so that you can easily access the Gears factory and application programming interface (API), save it as gears_init.js , and reference it in your code as follows:

To determine whether Gears is installed, use the code in Listing 5.

Listing 5. Determining whether Gears is installed

If Gears is not installed, the code will provide you with a URL to download Gears.

Once all elements have been validated and Gears has been installed, you can test Gears' extremely useful database functionality using the JavaScript code in Listing 6.

Listing 6. Testing database functionality

This code creates a local database db on your computer or server. If the table Test does not exist, create one and insert the test data (Monkey! and time). The code fetches data from the database and displays it in the browser as an alert.

Imagine the possible outcomes!

Use PNG format images
The Graphic Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) image formats are both obsolete: Portable Network Graphic (PNG) is the format of the future. Of course, you can say that GIF and JPEG are dead, or that PNG has no flaws, but everything has its pros and cons, and PNG offers excellent quality at an optimal file size. Therefore, if given a choice, you should use PNG images whenever possible.

Keep Ajax calls short and precise
When the technologies collectively known as Asynchronous JavaScript + XML (Ajax) emerged two years ago, they provided a revolutionary approach to handling page requests and responses. However, dial-up users may never get the chance to experience its true benefits because, in many cases, Ajax requires a lot of communication between the browser and the server. Therefore, if you can keep your Ajax calls short and precise, you can prevent users from spending endless time waiting for elements to refresh or respond.

Make a large Ajax call and process the client data locally

If making short Ajax calls is not an option, or if those calls don't provide the expected results, consider an alternative approach: making one large Ajax call to get everything you need, and then having the client process the data locally. This way the client only has to wait once (to get the incoming data), but after that (when there is no need for browser to server communication) processing will be much faster. Of course, there are far more Ajax optimization techniques than this tutorial can cover. If you want to learn more about Ajax, see Resources.

Testing your code in a sandbox
There is another common trick that is often forgotten. Although sane web developers usually test their applications before launching them, sometimes testing causes them to take maintenance tasks less seriously, or new features are added too quickly and without adequate consideration or testing. As a result, the remaining scripts slow down the application.

If you add a new feature, you can first test it in a sandbox (completely isolated from the rest of the application) to see how it behaves as a single function. This way, you can iterate and analyze performance and response times without having to worry about the rest of your Web application. Then, when the new feature behaves as expected, it can be introduced into the rest of the application and additional tests can be run to ensure that the feature itself behaves as expected.

Analyze site code

Self-reflection is a good idea in many scenarios. Fortunately, during the development process, we can use tools to help us reflect and practice as objectively as possible. The value of a tool like JSLint (see Resources) is immeasurable, even though its site states that it "can be frustrating" because it exposes all potential code flaws to you, which not only makes debugging more difficult but can also result in longer response times.

Use JSLint to check your JavaScript code for errors or poor coding practices

You don't need to be a perfectionist to write flawless JavaScript code. However, many developers do not take code analysis seriously and often skip this step in the development process. Unfortunately, mistakes and poor coding practices are not only unprofessional, but can also slow down your application. When the browser is busy dealing with bugs and poor coding practices, not only does it take more time to load, it can also lead to hard-to-debug errors.

Therefore, if you want to get good code, consider using a code analysis tool. There are many different tools available, but the one that works best for the JavaScript language is JavaScript Lint, also known as JSLint (see Resources). You can also use Firebug, but JSLint is more formal and is included with YSlow.

Check for orphaned files and missing images
It is a wise move to check for orphaned files and lost images. Most web developers check for bad file references, but it's worth mentioning here. Missing files can easily cause all sorts of problems as they can result in error messages like “The image/page cannot be displayed”. But they have a bigger flaw when it comes to web page speed optimization: When the browser looks for missing or orphaned files, it consumes resources, which inevitably leads to slower page processing. Therefore, check for orphaned or missing files, including misspelled file names.

YSlow extension
The YSlow Firebug extension makes subjective web page analysis increasingly obsolete. Using definitive rules for high-performance websites drafted by Yahoo!, YSlow analyzes web pages and tells you why they're slow.

Analyze web pages with YSlow
YSlow is a relatively small but very useful Firefox extension. When you launch YSlow, the extension opens in the lower portion of the browser, as shown in Figure 4.

Figure 4. The YSlow extension in Firefox





Figure 4 shows the Performance view, where you can see how YSlow rates your page's performance, and also see problems that the extension detects. Clicking a link in the list opens a page that explains the error. If there are page components that can be improved, YSlow will suggest improvements.

In the Inspect view, shown in Figure 5, you can dissect the page by analyzing the elements one by one. One of the most useful features of the Inspect view is that it automatically refreshes as you move the mouse pointer over the page, so you don't have to scroll through the code to find the line you need to inspect.

Figure 5. YSlow Inspect view in Firefox




As you can guess from its name, the Stats view (shown in Figure 6) displays statistical data related to the current page. This data includes empty and primary caches and cookies.

Figure 6. YSlow Stats view in Firefox




The Components view (shown in Figure 7) lists the components on the current page. Data displayed about each component includes file type and path, page expiration time, and HTTP response headers. Click a component to open it for viewing. Click a column heading to sort the table in ascending or descending order.

Figure 7. YSlow Components view




YSlow is a small, useful extension that can do a lot for you when it comes to making your pages load faster. If you haven’t used it before, you should now.

Conclusion
Optimizing the loading speed of your web pages doesn't have to be complicated. In fact, you can often achieve speed optimizations fairly easily. If you follow the tips in this article, along with Web development best practices, you can make your pages load faster without taking any additional steps.

It’s easy to collect a lot of on-page optimization tips in one place, and I hope this resource has been valuable. But if you thought that these were the only speed optimization tips listed here, you'd be surprised to find that there are far more. But even if you just follow these 20-plus tips, your pages will load faster and your users will be happier -- whether they're surfing the Internet via dial-up or dedicated broadband.

Article from: developerworks