Both simple and complex web sites have the potential to be fast, although they are often quite slow. In this post, I will list some of the primary ways that you can increase the loading and rendering speed of your web site.
Minimize HTTP Requests
Combine Files
Rather than using multiple StyleSheets and JavaScript files, keep each one together in a single file, giving you your HTML file, a single StyleSheet, and a single JavaScript file.
CSS Sprites
To make css background images load more quickly, combine multiple images into a single file, and use background-position to select which section of the image you want to display. A thorough guide is available on A List Apart.
Image Maps
Though less often used in modern pages due to CSS, Image Maps use a single image file with clickable areas of the image defined in the HTML. See the official W3C documentation for information on how to use these.
Use a Content Delivery Network
Although difficult financially for small web sites, a content delivery network (CDN) will drastically help your web site load faster by providing static content such as images, scripts, and stylesheets at a geographically closer location to your user. Akamai Technologies and EdgeCast are good options.
Compress Code
If your server supports it, enabling GZip output compression will make your pages load much quicker as the content is greatly reduced in size.
Stylesheets at the top
By placing the references to stylesheets in the head of your page, the page layout and formatting can load before the extra page content such as images and plugins.
Scripts at the end
Including scripts at the end of the body will cause the content of the page to load entirely before pausing to load scripts that can’t run until the whole page has been loaded anyway.
External JavaScript and CSS
By placing JavaScript and CSS in separate files from the HTML, the browser is able to cache this content to keep from having to load it again on each page.
Reduce DNS Lookups
Content should be accessed from no more than four separate domains (or subdomains) to reduce DNS lookups, but it should be loaded from more than one domain to allow static and dynamic content to load at the same time, as most browsers only allow two connections to the same host at a time.
Minify JavaScript and CSS
To reduce the file size of CSS and JavaScript files, remove the portions that don’t actually do anything. This is done by removing any indentation, non-critical spaces, comments, new lines, and semicolons that aren’t required for the code to function correctly. The YUI Compressor is a great automated tool that can be used to minify both CSS and JavaScript.
Avoid Redirects
Although this is better than loading a page with a link to another one, use redirects only when necessary as they require sending all of the browser information and cookies simply to take you somewhere else, where you have to send that information all over again. If your redirect will always take you to the same page, use a 301 redirect to prevent the browser from having to load the same redirect page again later.
Remove Duplicate Scripts
This should be obvious, but I very frequently see multiple copies of the same JavaScript files being loaded in a page. If you’ve already loaded the script, don’t load it again. jQuery people, figure this out. (the users, not the developers)
Flush Buffer Early
By sending the head of the page while the rest is still being generated, you allow the browser to begin loading the external content while the server assembles and transmits the rest of the page. The example below demonstrates how to do this in PHP.
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
Use GET for AJAX Requests
Using AJAX to load content is significantly faster than loading an entire new page, but it can be sped up even more if GET is used instead of POST, as POST sends the HTTP headers in multiple packets. This will not greatly affect the speed, but is recommended if you do not need a large amount of cookies sent through AJAX.
Load Page Components when Needed
With the use of simple JavaScript code, you can load page components when they are actually needed, rather than when the page first loads. By delaying images from loading until the user has scrolled down to where they are, the main page can load far more quickly. The YUI Image Loader is a good way to do this.
Minimize Iframe Use
Although using IFRAMEs can increase page loading speeds, and often have great security benefits, only use them when they are necessary, as they can slow down the renderer in most browsers, and can cause issues with JavaScript page load triggers.
Use Cookie-free Domains for Components
Loading all of the static components for a page such as images and stylesheets from a separate domain with no cookies can greatly increase the loading speed if your web site uses a large amount of cookies. This can be done by having your main web site on one domain (or a subdomain), and having your static content load from another domain or subdomain that does not use any cookies.
Optimize Images
In order to shrink image sizes, avoid use of palette-based formats such as GIF unless you save the image optimized for the specific colors that you are using in the image. Never, ever use bitmap format, as it is horribly large in size, as it saves the exact color value of every pixel individually. If you are using photographs, save them as compressed JPG/JPEG images, with a reasonably low quality value in order to optimize the size. Always remember to resize your images to the actual size you need, rather than loading huge photos right from your camera. When using any web graphics, unless animated, using PNG format will almost always result in the smallest file size.
Avoid Empty Image SRC
Although quite ridiculous, having an empty src attribute on img tags will cause most browsers to load the index page of the current directory. Try to avoid it. Really though, why would you ever have this? It’s more common than it should be.