Posts

Showing posts from February, 2011

Always Specify a Content Type

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

Specify Unique Character Encoding

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

Specify a Character Set Early

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

Specify Width and Height of All Images

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

Put CSS in the Document Head

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

Avoid CSS Expressions

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

Use Efficient CSS Selectors

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

Serve Resources from a Consistent URL

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time o         By optimizing number of network roundtrips Prologue [Detail of the technology / concept being used in the tip if required] Why o         Sometimes it is necessary to reference same resource at multiple places in the web page.   If the URL for these resources in not unique, multiple requests will be send by browser for the same resources.   For this reason, resources should be served from consistent URL only. o         It eliminates duplicate downloads o         To remove additional DNS lookup time, if the resource is served from different hosts How Serve shared resources from a consistent URL across all pages in a site Exceptions None Recommendations None

Serve Only Properly Sized Images

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing network latency (HTTP Payload Size) Prologue [Detail of the technology / concept being used in the tip if required] Why Serving an image that is larger than the dimensions used in the markup instances, add unnecessary bytes to get downloaded How Use image editor for scaling the images as required and serve only those images when requested Exceptions If two different dimensions are being used in the markup for the same image then it makes sense to send only one image which is larger in size. Recommendations None

Optimize Images

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing network latency (HTTP Payload Size) Prologue [Detail of the technology / concept being used in the tip if required] Why Images saved from some programs contain unnecessary comments and use too many colors and hence improperly optimized images take more space than they need to. How o         By cropping unnecessary spaces o         By reducing color depth to the lowest acceptable level o         By removing comments in images o         By saving image to an appropriate format. o         By using GIF for very small or simple graphics and for images containing animations other use PNG o         By not using BMP or TIFFs o         By using image compressors Exceptions None Recommendations None

Defer Loading of JavaScript

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time o         By optimizing parallelization of external resources o         By optimizing network latency (HTTP Payload Size) o         By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why o         Before browser can start rendering a web page, Java script code must be downloaded, parsed and executed first, which if it is not needed can be deferred o         Even when JS file is cached, browser blocks processing of all elements after the JS code, until browser load the code from disk and processed it o         For some browsers, while java scripts are being processed they block downloading all other external resources, which add considerable latency for script intensive application How o         By allowing deferred bytes to be loaded asynchronously in the background o         By deferring all JS codes that are required for user – tr

Minify CSS / JavaScript / HTML

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time o         By optimizing network latency (HTTP Payload Size) o         By optimizing browser rendering Prologue [Detail of the technology / concept being used in the tip if required] Why Compacting Java code / CSS / HTML file can save many bytes and speed up downloading, parsing and execution time How o         Eliminating unnecessary bytes such as extra spaces, line breaks and indentation o         Tools like JSMin, CSSMin.js or YUI Compressor can be used to compact JS files Exceptions None Recommendations Minify JS files that are 4096 bytes or larger in size, less than it will not show any visible performance gain.

Remove or Defer Unused CSS

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time o         By optimizing network latency (HTTP Payload Size) o         By optimizing browser rendering Prologue Before a browser can begin rendering a web page, it must first download and parse any style sheets that are required to lay out the page. Why o         Even if an external style sheet is in the cache, rendering is blocked until Browser extracts style sheets from the disk o         CSS engine unnecessary process unused / unwanted rules contained the CSS file How o         Remove any inline style blocks containing CSS not being used in current page o         Minifying CSS o         If external style sheets being shared by multiple web pages and all CSS rules are not being used in all the pages then break down the style sheet files in many smaller files specific to web page need o         Defer the style sheet if not required during startup by putting after the onLoad event is fired E

Enable Compression Using GZip

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing network latency (HTTP Payload Size) Prologue [Detail of the technology / concept being used in the tip if required] Why o         Compression can reduce the number of bytes sent over the network o         Dramatic reduction in download time How o         Web server can compress files in gzip format before sending them for download either by calling a third party module or using built-in routines o         Configure web server to set the Content-Encoding header to gzip format for all compressible resources o         Ensure consistency in HTML and CSS code to make the compression most effective Exceptions o         Compression is beneficial only for large resources due to the overhead and latency of compression and decompression. o         Compressing files below 150 bytes can actually make them larger o         Don’t use compression for image or other binary files as they are a

Serve Static Content from Cookie less Domain

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing network latency (HTTP Request Size) Prologue [Detail of the technology / concept being used in the tip if required] Why As static content like images, CSS, JS don’t need to be accompanied by cookies, as there is no user interaction with these resources. How Serve static content from a domain that doesn’t serve cookies Exceptions o         Using this technique for pages serving fewer than 5 resources, setting up an extra domain for this purpose would be an overhead o         Serving early loaded external JS files from cookie less domain can introduce overhead as most browser stop downloading other external resources until external JS file is downloaded, extracted, parsed and executed. Recommendations Use this technique for any page that serves more than 5 static resources

Minimize Request Size

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing network latency (HTTP Request Size) Prologue [Detail of the technology / concept being used in the tip if required] Why To ensure that an HTTP request can fit into a single packet by constraining each request to fewer than 1500 bytes, as most widely used networks limit packets to approximately 1500 bytes How o         For resources that must be sent with cookies, keep the cookie sizes to a bare minimum.   Store only a unique identifier as key in the cookie and other details related to key should be stored at server side o         Remove unused / duplicate cookie fields o         By serving static content from cookie-less domain o         Limiting URL lengths to few hundred bytes at max Exceptions None Recommendations Average size of cookies served off any domain should be less than 400 bytes

Leverage Parallelize Downloads Across Hostnames

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing parallelization of external resource downloads Prologue [Detail of the technology / concept being used in the tip if required] Why As per HTTP 1.1 specification, browsers should allow at most two concurrent connections per host name.   Few of the modern browsers allow more than two connections also.   If an HTML contains references to more (than two) resources then browser requests for 2 resources (or concurrent connections limit) and queues the rest of requests for other resources.   By serving resources from different hostnames allows download in parallel How o         Split static resources like images across multiple host names using DNS aliases o         Serve static files using a CDN as the CDN might be applying this technique by default Exceptions o         Using multiple concurrent connections might cause CPU overhead on the Client side. o         Add DNS lookup overhe

Prefer Fetching Resources Asynchronously

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         When a browser comes across a ‘script’ tag, it waits for the script to download, parse and execute before rendering any HTML that comes after it.   With asynchronous script, it is not an issue altogether. o         When a script is loaded asynchronously, it is fetched as soon as possible, but execution is deferred until Browser’s UI thread is not busy (e.g. rendering) How o         Java Script code that is not required for initial view of the page (like tracking, analytics, hidden content) should be loaded asynchronously. o         Using a script DOM element with an ‘async’ attributes allows for asynchronous loading for most of the browsers whereas an HTML   ‘script’ tag with an async attribute will only load asynchronously in FireFox and Chrome. Exceptions None Rec

Avoid CSS @import from an External StyleSheet

For viewing all tips see  here Applicable To All Browsers How Improves Page Load Time By optimizing parallelization of external resource downloads Prologue [Detail of the technology / concept being used in the tip if required] Why o         Because the browser is unable to download the stylesheets in parallel and add an additional round-trip time to the overall page load. o         Because the browser must download, parse and execute the external stylesheet and then only will be able to discover that it needs to download CSS file specified using  @import. How Instead of using @import, use a 'link' tag for each stylesheet Exceptions None Recommendations None