Why so slow? 21 tips to deliver content to your website visitors at lightning speed.

by Michael Craig on 13/11/09 at 4:59 pm

1. Reduce the number of HTTP Requests

Each asset (images, flash, javascript file, css file) requires it’s own HTTP Request when your website is viewed.

Some common mistakes are:

• using multiple JavaScript files
• using multiple CSS files
• using multiple images when CSS sprites can be used instead

To reduce HTTP requests, try aggregating multiple files into a single piece of content.

2. Use a content delivery network (CDN) to serve assets

Ideally, a web server should just serve the application or website pages. The database and assets should exists on separate servers.

Allowing the assets to be stored in a geographic location close to the website visitor will help all users achieve faster page loads.

3. Add Expires Headers

Adding Expire headers reduces the amount of future HTTP Requests by returning visitors. The Expire headers cache the website’s assets.

4. Use gzip compression for HTTP Response

Enabling gzip compression on the server can reduce the server’s response size by about 70%. Gzip is supported by 90% of today’s internet traffic.

5. Put CSS at the top

When a web page is loaded, the browser interprets it from the top-down. Having the CSS anywhere besides the top would have the browser format the page after the content has already been served.

6. Put JavaScript at the bottom

To help a page load faster, put scripts at the end of the web page. While a script is downloading, the browser waits to complete the javascript file before downloading any additional assets from the server.

7. Make JavaScript and CSS external files

Though it’s best to reduce the number of HTTP requests, not referencing external CSS and JavaScript files by using the styles and scripts inline will greatly increase the size of the webpage. Because external CSS and JavaScript files can be cached, it’s best to reference these files externally: Even though it produces 2 extra HTTP Requests, when the files are cached by the browser they will not be requested again until the cache is cleared.

8. Reduce DNS lookups

On average, it takes between 20 to 120 milliseconds for your visitors computer to resolve a single domain name. During this process, the browser can not retrieve any content from the host until the DNS has been fully resolved. When referencing content from external locations, it’s best to reduce the number of unique hosts (A records). This can be achieved by placing all content on a CDN or on a single webserver.

9. “Minify” CSS and JavaScript

The size of CSS and JavaScript files can be greatly reduced by removing all white space, comments, and unneccessary semi-colons before uploading to the server. Whitespace includes newlines and carriage returns. Ideally, a minimized file will contain all script or code on a single line. The minimized file is not legible and an original file should be stored on the development machine to make changes easily. Any changes chould then again be minimized.

10. Avoid URL Redirects

URL Redirects (status code 301 and 302) tell the browser to go to a different location. A URL redirect will create extra HTTP Requests, and the redirects can not be cached unless the HTTP Headers are explicitly modified. Many webdevelopers are not aware that specifying a root directory while excluding the trailing slash will cause the webserver to implement an HTTP redirect to the proper location.

The Apache webserver has corrected this and redirects can be greater configured using the Alias, mod_rewrite, or DirectorySlash directive.

11. Configure entity tags (ETags)

When downloading content from a web page, if an ETag is implemented, the assets (images, flash, javascript, css files) have a generated, unique hash code.

      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

If the browser’s ETag code matches the server, the web browser will know the content in it’s cache matches the content on the server.

Because the ETag is server specific, websites spanning across multiple server will not always validate ETag data properly.

12. Cache your AJAX

Caching AJAX requests is easy! Doing so will only make your web 2.0 apps faster. To to so, simple add an Expires or Cache-Control Header in the HTTP Response.

Other considerations for AJAX to decrease response time include:

• Gzip Components
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Configure ETags

The same rules applied for your website design applies to AJAX and web 2.0 threads.

14. GET AJAX. Don’t POST it.

When using the XMLHttpRequest command a POST is created, but split into two HTTP Requests.

1. For the Header
2. For the Data

Using GET will cut all AJAX HTTP Requests in half.

15. Increasing the number of DOM elements decreases the speed of JavaScript

The more DOM elements your web page has the more work JavaScript has to do. Consider a JavaScript event handler that loops through all elements on a page. One way to greatly reduce the number of DOM elements is to use semantic code; for example, using xhtml + css to create an optimized page.

16. Eliminate 404 Errors

A 404 Error is the result of a page not being found. If a 404 response is received when rendering assets on a page, additional HTTP Requests have been made to no benefit of the user.

When a link to a JavaScript receives a 404, the web browser may attempt to parse the error response. Additionally, all parrallel downloads are blocked until the JavaScript requests have been completed and parsed.

17. Cookie Considerations

Don’t use uncessary cookies, this increases the size of the HTTP Response. Similarly, using cookies to store large amounts of data will bloat the the response.

Assign cookies to the appropriate domain access level to eliminate passing cookies to sub domains if not required. This can also be a big security caution.

The cookie Expires date should be set appropriately.

18. Assets don’t need cookies

When requesting assets (images, stylesheets, javascript - anything static) the cookie information is useless. One easy way to do this without a CDN is to use a subdomain for all assets. However, if the cookie has been defined on the top-level domain (ie: bytelaunch.com, not www.bytelaunch.com), it will be necessary to purchase a new domain name for the assets, otherwise the cookies will automatically be sent to the subdomains defeating the purpose.

19. Avoid IE-proprietary Filters

IE versions less than 7 can not display PNGs properly. Microsoft solved this with AlphaImageLoader - using it will definitely cause a noticeable difference on your website as the whole page will stop rendering until the filter has looped through each dom element (not just images, everything).

If possible, to use AlphaImageLoader. PNG8 should degrade gracefully, and newer versions of IE do have support for PNGs.

20. Resize your images!

Each image should be optimized for the width and height is being displayed in. That means creating thumbnail images when required. Otherwise, you are passing much more data from the server to the browser. This increases server load, bandwidth consumption, and response time.

Another way to reduce the number of HTTP Requests is to combine the images and icons in a sprite ( a horizontal array of images)  which will allow for a single image to be downloaded. It’s then up the CSS to display the sprite properly.

21. Make a FavIcon

The web browser will request a FavIcon everytime it visits a webpage. the FavIcon is the small 16×16 icon next to the website’s URL. If a FavIcon doesn’t exist, a 404 response is received for every page.

When creating a FavIcon, it’s important to:

• Keep the filesize small (< 1kb)
• Allow it cache (Set an Expires header)
• Keep it outside of the webserver so unneccessary cookies aren’t sent.