How to Triple Your Website Load Time

So your website is running a little slow, egh? It can happen, especially when they’re overloaded with Content Management Systems (CMS), forums, blogs, contact scripts, and pages that automatically generate dynamic content. When JavaScript libraries, heavy CSS, and HTML fill up your web page, the efficiency dramatically drops causing a longer load time.

Luckily, there is a way out. Here are a few tips and tricks to make your website perform better and your pages load faster:

• Combine files to reduce number of HTTP requests. Move all JavaScript and CSS into single files.
• Use CSS Sprites to reduce the number of image requests
• Add an Expires header and turn cache control ON
• GZIP JavaScript, CSS, and HTML components to optimize HTTP response
• Put Style Sheets at the top of the HEAD area
• Put all scripts at the bottom of the page, if possible
• Use the DEFER attribute in the SCRIPT tag
• Avoid using CSS expressions to dynamically set CSS properties in JavaScript
• Make JavaScript and CSS files external
• Minify all JavaScript and CSS files on production. This removes whitespace, unnecessary characters, and reduces up to 80% in file size. (YUI Compressor or JSMin can accomplish this).
• Avoid using server-side redirects
• Remove duplicate scripts (this can happen when scripts are accidently inserted twice when scripts are maintained dynamically).
• In AJAX, use GET requests rather than POST requests.
• Flush after the HEAD tag because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.
• POST load only what’s absolutely required in order to render the page initially
• PRE load components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you’ll need in the future
• Reduce the number of DOM elements
• Minimize the number of IFRAMES
• Eliminate 404 Errors and do not create custom 404 pages.
• Eliminate unnecessary cookies, keep them as small as possible, and set them to expire appropriately
• Minimize DOM access by caching references to accessed elements, updating nodes “offline” and then add them to the tree, and avoiding the practice of fixing layout with JavaScript
• Develop smart event handlers by using event delegation. If you have 10 buttons inside a div, attach only one event handler to the div wrapper, instead of one handler for each button. Events bubble up so you’ll be able to catch the event and figure out which button it originated from.
• In CSS, avoid using @import. In Internet Explorer the @import tag is equivalent to loading the tag at the bottom of the page.
• Avoid filters such as AlphaImageLoader.
• Optimize images for smaller file size by saving files as JPG, GIF, or PNG
• Don’t scale images in HTML, use original image size only
• Make favicon.ico under 1K and set an expires header
• Keep all components (javascript/css) under 25K each