Posts

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