Tech Notes

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why o         Before browser can begin to check for a character set, they must first find the content type of the document being processed.   If it is not specified, browser tries to identify using various algorithms, which adds an overhead of extra processing time o         To avoid any security vulnerability How o         Configure web server to specify the content type in the HTTP headers o         If configuring of web server is not possible, then set the content type in the meta tag and specify the markup in the section of the HTML document Exceptions None Recommendations None

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing browser rendering Prologue HTML documents are sent over the Internet as a sequence of bytes accompanied by character encoding information.   Character encoding information is specified in the HTTP response headers or in the HTML markup of the document itself.   The browser uses the character encoding information to convert the stream of bytes into characters that it renders on screen. Why o         Specifying a character set differently in HTTP header and HTML markup, confuses the browser and incurs additional delays in redrawing. How Always set the same character set for both HTTP header and in the HTML markup Exceptions None Recommendations None

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing browser rendering Prologue HTML documents are sent over the Internet as a sequence of bytes accompanied by character encoding information.  Character encoding information is specified in the HTTP response headers or in the HTML markup of the document itself.  The browser uses the character encoding information to convert the stream of bytes into characters that it renders on screen.  Most browsers buffer a certain number of bytes before executing any JS or drawing.  If they don’t find the character encoding information in the buffer they assume one by default and start rendering.  Later if it doesn’t match, a browser reparses the input and redraws the page. Why o         Specifying a character set early in the HTML document, allow browser to begin executing scripts immediately How o         Configure web server to specify the character set in the HTTP headers o         If configur

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why Specifying width and height of images in the web page eliminate the need to unnecessary reflows and repaints How Set the dimensions on the ‘img’ element itself or a block level parent.   If the parent is not block-level, the dimensions will be ignored Exceptions None Recommendations None

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why o         By ensuring that style sheets are downloaded and parsed first, allows browser to progressively render the page o         Browser block rendering a web page until all external style sheets have been downloaded o         Inline style blocks can cause reflows and shifting of content, which adds an overhead of redrawing How o         Put 'style' blocks in the 'head' section o         Always put external style sheets in the 'head' section using the 'link' tag Exceptions None Recommendations None

For viewing all tips see  here Applicable To IE version 5 – 7, which supports CSS expressions How Improves Page Load Time By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why CSS expressions allow dynamically changing document properties in response to various events.   It consists of Java Script expressions embedded as the value of CSS properties in CSS declarations.   Because of it, the browser reevaluates each CSS expression on trigger of every event.   The performance degrades significantly if events are like ‘onMouseMove’, ‘window resize’ etc. How o         Don’t use CSS expressions if possible o         Use JavaScript instead for dynamic styling Exceptions None Recommendations None

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why o         To speed up page rendering by minimizing the number of look ups o         To evaluate fewer rules by CSS rule engine How o         Define rule which are specific as possible as the less specific the key, the greater the number of nodes that needs to be evaluated. o         Avoid rules with descended selectors   as key as for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root tree o         Avoid rules with child or adjacent selectors as for each matching element, the browser has to evaluate another node o         Prefer class and ID selectors over tag selectors o         Use a class to apply a style to multiple elements o         Avoid redundant qualifiers like ID