Loads of widgets, integration with third party tools using JavaScript APIs, high performance AJAX. All this is causing sites to slow down. Factors which nobody cared about, now need to be looked into to ensure that the site loads faster.

Optimization Techniques

I will present some optimization techniques in several easy to use and understand categories. This will allow you to pick and choose one category and focus on it at any one time.

  1. General Optimization Tips
  2. Optimization Techniques for Images
  3. Optimize HTML on the page
  4. Optimize JavaScript and CSS Files
  5. Optimization tips for Documents on Websites
  6. Tools to help with Optimization

General Optimization Tips

  • HTTP Pipelining is used to allow multiple requests to be answered at the same time. By default Internet Explorer allows two connections per hostname, this means you have multiple objects (images/flash etc.) on the page served from the same domain then only two will be loaded at any one time and rest will have to wait. So, if you spread your objects over more host names (ip can be ame) then you leverage this to load more than 2 objects at one given time.
  • Enabling gzip compression on your server for JavaScript, css, html and xml will reduce the http response size. (HTTP compression for Apache, IIS 6.0 Compression)
  • Add Expires header, this will ensure that the browser does not validate the page on each and every request. Expires headers are most often used with images, but they should be used on all components including scripts, style sheets, and Flash.

Optimization Techniques For Images

Reducing the size of images on your web site will make your site load faster. Images for the web need not be very high quality (until of course you are into some business where quality is a must). Most of the images which I put on sites are in gif format. Here is what you need to do with images on your web site:

  • Due to the overhead associated with any new request, one big image file will load faster than two smaller ones which are half its size. If you are loading lot of small images you might be better off using a technique called “CSS Sprites“.
  • Save any image for the web using Adobe Photoshop (open any image in Photoshop and use the option “Save for Web..”. Gimp users can save the image in GIF format after opening it . The reduction in size is considerable without much loss of quality for most images.
  • I further try another level of compression using the Gif Compressor available online at: http://www.giftools.com/gifcompress.html. This works well in most cases but not always. My advice is to let your image go through this and then check if it works with you.
  • Those insisting on using png, can try png compressors like the one available at http://pmt.sourceforge.net/pngcrush/ or http://www.cs.toronto.edu/~cosmin/pngtech/optipng/to compress png images.
  • For jpeg enthusiasts, the online tool http://www.chami.com/jc/. This tool provides you with options and numbers on how the image will look with 90%, 80%.. 10% quality and how long will it take to load. Very useful information for you to have a visual view and decide on which image to use.
  • A good document on how to prepare images for the web using Adobe Photoshop.
  • SEO TIP: Please make sure that you provide good titles (alt tag) and names for image files so that image search can use effectively. Want to know more read this: Optimizing Images for Search Engines

Besides reducing the size, there are few other things which you can do with images to ensure a faster load experience for end users

Optimize HTML on the page

There is lot of garbage on an html page which is not required. If that fluff is carefully removed, it will give considerable performance gain. Some things to consider for HTML optimization:

  • remove all comment tags (unless a necessity)
  • Use a strict DTD to enable standards mode for maximum rendering speed
  • use divs (if you can) rather than tables
  • simplify complex tables as they are rendered slower
  • remove unnecessary whitespace characters
  • remove unnecessary quotation marks (if you do not care about being xhtml compliant). e.g.,
    <table BORDER=”0? CELLSPACING=”0? CELLPADDING=”0? align=”center”> will be converted to
    <table BORDER=0 CELLSPACING=0 CELLPADDING=0 align=center>;
  • stick to using only the description and keywords meta-tags (unless required)
  • NOTE: there are lot of tools out there on the web which can help you accomplish all this. Since I have personally not used any so I won’t recommend.

Optimize JavaScript and CSS Files

For the new generation of Web 2.0 application which use Ajax and nice designs, Javascript and CSS files can be of appreciable size. They should always be in separate file and not inline (that way browsers can cache them). It is always a good option to compress them before linking to them. This way there is less to load. the tools that I use for compressing them are:

Other tips on CSS and Javascript:

  • Put CSS stylesheets inside the head section of an page. This helps page load faster as it is rendered progressively.
  • Put Javascript files at the bottom of the page (if possible). This will ensure that content above that will render first.
  • Avoid CSS expressions as far as possible. This is because they are evaluated every time the page is rendered, resized, scrolled or even on mouse movements.
  • SEO Tip: separating Javascript and CSS code to separate files enables search engines to crawl more of your on page text as it is believed that only top 4K of the text on any page is crawled by search engines.

Optimization tips for Documents on Websites

With increasing amount of PDF and MS Word documents being placed on Websites, their size optimization is also an important requirement.

  • Using Acrobat Professional, select Advanced>PDF Optimizer to “right-size” a PDF document (SEO Tip: make sure your PDF document is text based and not image based and you fill in title and meta tags for the PDF document. For more tips on how to optimize PDF documents for search engines read Eleven Tips For Optimizing PDFs For Search Engines)
  • Word documents with lot of images can become bulky really fast and will take forever for an user to download the file on the web. You should take some time and optimize the images in the word document using the “Compress Picture” button on the picture toolbar. This results in considerable file size reduction.
  • SEO Tip: always name the documents using proper names (e.g. SEO-tips.pdf and not doc1.pdf)

Tools to help with Optimization