Archive for May, 2008

Best Practices: Working with Images

Thursday, May 22nd, 2008 By Nikhil

Optimize Images

Optimization simply means keeping the size of the image small keeping the quality of image to the required level. There are loads of procedures that once can carry out to optimize images before they are loaded on to the server for delivery. The tools that we use for creation of these images (Photoshop, Fireworks etc) usually have tools that allow users to optimize the image for web use.
• Check the GIF’s to see if they are using a palette size corresponding to the number of colors in the image. When an image is using 4 colors and a 256 color palette, then the image could be further optimized

• Convert GIF’s to PNG’s where possible and see if there is a saving. More often than not, there is. Do not hesitate to use of PNG’s, as they are fully supported by most of the commonly used browsers. Expect of the animation capabilities a PNG can do what a GIF does, including transparency.

• For the images used in CSS sprites, arrange the images in the sprite horizontally as opposed to vertically usually results in a smaller file size. Also, combine images with similar colors in a sprite. This helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.

• If you are using a favicon.ico, keep it small, preferably under 1K.

Use properly scaled/resized image.

Always try and use resized images, i.e. don’t use a bigger image than you need just because you can set the width and height in HTML. If you need to display a 100px X 100px image on the page, then do not use a scaled down 200x200px image.

Use Progressive Images

A web browser already renders Images progressively. To do even better, simply save your GIF or PNG images with the “interlaced” option, or your JPEG images with the “progressive” option.

There is ongoing debate among web users as to whether use of progressive image is a blessing or a hindrance. Also a progressive image weighs approximately 20% more than its non progressive counterpart. So , If you think you layout uses images that will not hamper the user –experience by it being progressive, feel free to do so.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Best Practices: Working with JavaScript’s

Thursday, May 15th, 2008 By Nikhil

Include JavaScript’s at the Bottom of the HTML Document

If you do not have document.write ( or any dynamic generation of page contents using javascripts) to insert part of the page’s content in your scripts, move the script include statement to the bottom of the page, before the end of the BODY tag.
The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
There are also ways to dynamically create SCRIPT nodes and load remote scripts after the page is loaded using AJAX .

Externalise you JavaScript’s

Using external JavaScript files will result in faster loading of pages because the JavaScript files are cached by the browser. Inline JavaScript’s’ in HTML documents get downloaded every time the HTML document is requested. This might actually reduce the number of HTTP requests made but it subsequently increases the size of the HTML document. External JavaScript’s are cached by the browser; the size of the HTML document is reduced without increasing the number of HTTP requests.
Please note that, if users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Pack Your Javascript Files

In case of JavaScripts , unlike CSS, the files could crunched using some standard algorithms that would give a reduced file size than simply removing spaces or tabs. An example of javascript packer can be found here

Get rid of any Duplicate Scripts

It is very unusual that entire scripts might be duplicated, but a review of the ten top U.S. web sites shows that two of them contain a duplicated script. Duplicate scripts but obviously reduces the performance by creating unnecessary HTTP requests and wasted JavaScript execution.
Also, in many instances, though the scripts names are different, there is a likelihood of duplicate scripts within the same page due to team size and number of scripts.

Minimize accessing DOM elements where possible

Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:
• Cache references to accessed elements
• Update nodes “offline” and then add them to the tree
• Avoid fixing layout with JavaScript

Separate Behavior from Content and Presentation

Just as we separate Presentation (CSS/XSLT) from Content (XHTML/XML), we should also separate Behavior (Javascript). This is called unobtrusive Javascript. Just as we link to external CSS files, we should link to external javascript files.

Instead of hard coding behavior into the content (e.g. onmouseover, onclick, etc.), behavior should be dynamically added to elements, classes, and unique elements (IDs) using the DOM. The foundational document, the content, should contain only valid XHTML/XML and no javascript.
Javascript should augment content by adding behavior. The content should remain useful and usable without javascript (or without full javascript support).

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Best Practices : Be aware of the page weight

Wednesday, May 7th, 2008 By Nikhil

I have saved this article ages back, so Sorry! I dont remember the source … but it seemed useful , for us who have to be aware about the audience for whom we develop the site for … so here i is

Page weight can be used to determine the download time for a given page on a variety of Internet connection speeds. By way of example, the following table shows the download times for three different pages at a number of popular connection speeds.

Page Weight Download Times

Connection Speed

20 Kb Page

40 Kb Page

100 Kb Page

14.4 Kbps

12 sec

25 sec

62 sec

28.8 Kbps

6 sec

12 sec

31 sec

33.3 Kbps

5 sec

10 sec

26 sec

56 Kbps (V.90)

2 sec

5 sec

13 sec

64 Kbps (ISDN)

2 sec

4 sec

12 sec

128 Kbps (DSL/Cable)

1 sec

2 sec

6 sec

256 Kbps (DSL/Cable)

<1 sec

1 sec

3 sec

Benefits of reducing page weight?

The positive impact of reducing page weight benefits both website owners and consumers. Potential benefits include:

  1. Pages load faster. The most obvious impact of reducing page weight is that your website’s pages will load faster for visitors, regardless of their connection speed.
  2. Lower page load times create more comfortable visitors. Visitors are less likely to become frustrated and go elsewhere if your pages load quickly. On the other hand, slow-loading pages are one of the surest ways to lose visitors and potential customers.
  3. Faster load-times will contribute to increased conversion. More visitors will stay on your site longer. More of them will end up making purchases, signing up for your newsletter, or book-marking your site.
  4. Your brand perception will be enhanced. Returning customers and first-time visitors alike will be more inclined to describe your site (and business) as “professional” if your pages load quickly.
  5. Pages with clean, solid code will often be indexed more effectively by natural search engines.
  6. Pages optimized for weight can actually save bandwidth charges on high-traffic sites. 100,000 pages each weighing 150 Kb will require twice as much bandwidth from your ISP than 100,000 pages each weight 75 Kb. For ISPs that charge for bandwidth used or for overages, this reduction can create significant savings on bandwidth charges.

Consider the following data, published in a report

Visitor Abandonment

Page Load Time

Percent of Users
Continuing to Wait

10 seconds


15 seconds


20 seconds


30 seconds


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Include XSL inside XSL

Sunday, May 4th, 2008 By Nikhil

If XML/XSL Transforms is your domian, then there are times when we want a peice of Dynamic code to be used library item(to be made re-usable). What I mean , probably could be made more clear with this example scenario.

Imagine you are creating a website (and using XML, XSL transfroms ofcourse) and most of the pages would have a Comments Module . Well! then either you copy or paste this code into every page template (which I dont have say, but make maintenance and rework a nightmare) or even better, you create an INCLUDE file which could be pulled in where ever you want it in your page(s)…
So HOW DO WE CREATE a XSL INCLUDE file and include it inside another XSL file? Here is how…

Just to make things clear … here is quick list of files that you would create … here , we will be including info about fruits and vegetables into a parent page called food.

1. food.xml – xml data file on which the transformation will be applied
2. food.xsl  -  main XSL file, which will transform our food.xml
3. inc_fruits.xsl – XSL include file that will render fruits data
4. inc_vegtables.xsl – XSL include file that will render vetetables data

I dont think I have explain much , the codes for above elements , will be self explanatory…


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="">Mango is the king of fruits</item>
<item name="banana" moreinfo="">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="">Papaya - Hot when raw, cold when ripe</item>

<item name="spinach" moreinfo="">Spinach is full of iron</item>
<item name="asparagus" moreinfo="">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="">Fenugreek is rich in vitamin C</item>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>




<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/> 
attribute value : <xsl:value-of select="."/> <br />


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/> 
attribute value : <xsl:value-of select="."/> <br/>

Download all the above files here (480 downloads)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter