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:
- Make fewer HTTP requests – using image maps, CSS sprites, inline images using data: URLs, and combining scripts and stylesheets.
- Use a Content Delivery Network – globally distributed web servers to deliver static content.
- Compression & gzipping – Every bit counts and gzipping reduces the file sizes.
- Moving Stylesheets to top – helps in progressive rendering & better user experience.
- Avoid CSS expressions – bad for performance as well as not all browsers supports CSS expressions.
- Avoid duplicating scripts – may lead to anomalous results as well as increases requests size.
- Make AJAX cacheable – by manipulating HTTP headers
- Add Expires Header – way to tell browsers to use cached component till specified date and thus minimizing HTTP requests.
- Configure ETags – mechanism that web servers and browsers use to validate cached components.