Tech Notes

For viewing all tips see  here Applicable To All modern browsers How Improves Page Load Time o         By optimizing parallelization of external resource downloads o         By optimizing browser rendering Prologue Modern browsers use speculative parsers to efficiently discover external resources referenced in HTML document, which reduces significantly the page load time.   Speculative parsers are light and fast and don’t execute Java Script Why o         Avoiding it helps speculative parsers to take intelligent decisions on external resources downloading and consequently progressive rendering o         It avoids serialization of downloads of external resources and hence significantly reduce the page load time. How o         Declare external resources directly in HTML markup as it might allow speculative parsers to locate these resources without parsing the JavaScript code. Exceptions None Recommendations In case document.write cannot be avoided then use asynchronous tech

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time o         By optimizing parallelization of external resource downloads o         By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why o         Java Script can alter the content and layout of web page and hence browser delays rendering any content that follows script tag until the script has been downloaded, parsed and executed. o         Many browsers block the downloading of resources referenced in the document after the script until those scripts are downloaded, parsed and executed. o         If other files are in the process of downloading and JS file is being referenced, then JS file is downloaded in parallel. How o         Put external java scripts after external style sheets when JS code doesn’t have any dependency on the CSS files o         Put inline scripts after other resources as it prevents blocking of other downloa

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing number of network round trips Prologue Similar to CSS and JS, downloading multiple images incurs additional round trips. Why o         To minimize the number of roundtrips o         To reduce request overhead How o         Combine images that are loaded on the same page and are loaded always together.   For example, set of icons on a web page.   Images that are dynamic in nature like profile pictures, shouldn’t be sprited. o         Sprite GIF and PNG images because they use lossless compression and can thus be sprited without reducing the quality of resulting sprited image. o         Sprite small images as there are requests overhead associated with small images, which can be reduced by combining all small images o         Minimize amount of empty space in the sprited image as a sprite with invisible pixels increases the memory usage of page, which in turn can make the browser

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing number of network round trips Prologue It is very common in development to build application with modular, reusable components but that might leads to multiple JS / CSS Files, which need to be downloaded separately.   It introduces delays and increases the page load time.   Combining external JS / CSS into few files cut down extra roundtrips and hence improves the page load time. Why o         To minimize the number of roundtrips o         To avoid blocking of further download of other resources due to JS / CSS processing How o         Use different JS / CSS files during the development cycle and then merge during the deployment process. Exceptions o         There are some cases where JS / CSS code need different versioning and combining those files with other can’t be a possibility o         JS files are being served from external third party domains Recommendations o    

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing number of network round trips Prologue During application life time, code churning is a norm and in the process, when resources change their location or got deleted, URL(s) referencing to it might not have been updated.   For these kind of requests, server respond by issuing 404 “Not Found” or 410 “Gone” responses. Why o         To minimize unnecessary network roundtrips o         To develop a professional website and avoid bad user experiences o         If moved / deleted resources are JS / CSS then it might block subsequent processing and can “Crash” the system How o         Scanning the web site for the broken links using ‘link checking tool’ o         Application should have way (automatically) of updating URL references whenever resources change their locations Exceptions None Recommendations None

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing number of network roundtrips Prologue Redirect triggers an additional HTTP request and introduces an extra round trip. In case of redirect, server sends back the response with status code 301 or 302 i.e. ‘Moved Permanently’ or ‘Moved Temporarily’.   Sometimes it is necessary for application to issue redirects, like to indicate a new location of resource, to track clicks and impressions of referring pages etc. Why o         To minimize roundtrips o         Many browsers don’t honor the spec and won’t cache either 301 or 302 responses. How o         Don’t redirect from multiple domains in order to reserve name space and catch incorrect user inputs either due to misspelled or incorrect URL. o         Application should have a way to update reference of the resources whenever they change their location. o         Handle incorrect URL on the server end itself by configuring mapping f

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing network latency (network related) Prologue It enables static resources to be cached on public web proxy servers (most notably those used by ISPs), which might be nearby than origin remote server. Why o         Significant reduction in network latency o         Even first time user might get benefit of caching because once the static resource is cached on proxy server by one user, the resource is available for all other users requesting subsequently. o         Benefits of free web hosting as once resources are cached on public web server, subsequent requests are served from the public web server, which doesn’t consume any bandwidth on origin web server. How o         Use Cache-Control: public header to indicate that a resource can be cached by public web proxy servers o         Don’t include query string in the URL for static resources as most proxies don’t cache resources when