Website Performance: Separate Static from Dynamic

A dynamic page is one which can potentially change with each request to the server. But in most cases, there is also some content within these pages which does not change. This content remains static even when the dynamic elements change.

Such static content within a dynamic page varies from application to application but mostly it's stuff like the header, footer, drop-down values (like city, state and country) etc.

Analyse the dynamic page from this angle and come up with a list of static elements on it. If the static elements are considerable (like 30% of the content on a page) then consider separation. There are various techniques which can be used to cache the static elements on the browser.

This approach is useful only when rendering similar layout repeatedly. So, if the same static content (header footer etc.) will be shown for multiple page requests, then separation of static from dynamic is feasible. Whereas, if the static portion changes for each request, there is not much to gain by separation, rather you will end up slowing the existing pages.

Some of the techniques which can be used once the static and dynamic elements are separated:
1) Ajax: A popular and commonly used technique for search result pages. The ajax request is made and only the results are updated whereas the layout remains constant.
2) XSLT (XML+XSL): While requesting for a page, the static elements are embedded in the xsl file and the dynamic elements are fetched using a xml. The xsl can have cache headers defined so that the browser caches it. This is beneficial to the Ajax approach in cases where a new page request is to be made and the user leaves the current page to get content of a new dynamic page. Google for "Browser side XSLT" to get more details on this.
3) HTML in JavaScript as string: This is a simple approach to add html snippets within JavaScript as string so that they can be rendered (inner html) wherever necessary. Not a particularly good design as you will need to add html (view) within the code (javascript).