Only less than 20% of overall response time is spent downloading actual HTML document; rest over 80% of time is consumed downloading components associated on the page.

Strange? but its true.

And if we further drill down the scenario here, we would find that the HTML generated for most of dynamic website are actually through backend stuff where as the components associated for rendering the HTML (i.e. images, scripts, css) are part of frontend end. Thus, there is more potential for improvement in focusing on the frontend. Moreover, it requires comparatively lesser time & resources & gives more positive results.

The key focus areas that can be targeted as part of of frontend performance optimizations are:

1. Make fewer HTTP requests – using image maps, CSS sprites, inline images using data: URLs, and combining scripts and stylesheets.
2. Use a Content Delivery Network – globally distributed web servers to deliver static content.
3. Compression & gzipping – Every bit counts and gzipping reduces the file sizes.
   
4. Moving Stylesheets to top – helps in progressive rendering & better user experience.
   
5. Moving Javascripts to bottom – With scripts, progressive rendering is blocked for all content below the script.Moving scripts lower in the page means more content is rendered progressively.
6. Avoid CSS expressions – bad for performance as well as not all browsers supports CSS expressions.
   
7. Minify Javascripts & stylesheets – removing unnecessary characters from code to reduce its size, thereby improving load times.
8. Avoid  duplicating scripts – may lead to anomalous results as well as increases requests size.
   
9. Make AJAX cacheable – by manipulating HTTP headers
   
10. Add Expires Header – way to tell browsers to use cached component till specified date and thus minimizing HTTP requests.
    
11. Configure ETags – mechanism that web servers and browsers use to validate cached components.
    

Enjoy!!