StyleSheet @ top

We discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

JS @ the bottom

The problem caused by scripts is that they block parallel downloads. 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


In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.


An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

Best Practices for New Websites

I have listed some best coding practices for modern web development

• Make Fewer HTTP Requests
• Use a Content Delivery Network
• Add a Expires Header
• Gzip Components
• Avoid Redirects
• Put Style sheets @ top
• Put Script @ bottom
• Avoid CSS Expression
• Make JS and CSS external
• Reduce DNS Lookups
• Minimize JS
• Remove Duplicate Scripts
• Configure Entity Tags
• Make AJAX cachealbe 

How to merge blogs

Hi Guys,

I have two blogs within the same account. So it is so hard time to manage both :)

So plan to merge together. If you guys having same pain

Here we go

Go to Settings----->Basic---->Blog Tools in one blog and click Export and save xml file to your media.
Then Go to Settings----->Basic---->Blog Tools in OTHER blog and click Import and choose same

GTileOverlay on Google Map

Tile overlays are custom image/data that sit on top of an existing Google base map. The data/Image is cut into a pyramid of static tiles that correspond to each zoom level. Typically you would use some type of tool to cut the data into static tile images. In the figure below you see an example of a custom tile overlay showing AutoCAD map of university on top of a Google base map.

GTileOverlay is used when you want your data to overlay an existing Google Maps base map. In most cases you will want to use one of several tools available for creating the map tiles that will need to be displayed at each zoom level. GTileOverlay requires three abstract methods including getTileUrl(), isPng(), and getOpacity()

If you guys want more practical experience please play around this url http://npmap.np.edu.sg/