Web performance tuning

CIGNEX Datamatics Confidential www.cignex.com

Web Performance Tuning in Front-end PerspectiveVer : 1.0

Name: Sendhil Kumar KTitle: Web Performance Tuning in Front-end Perspective


• 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.

2

Best Practices for Speeding Up Your Web Site


Why is speed important?

• Offers a good user experience

• No broken functionality

• Doesn't make one feel like they are living in the 90s


Cross-platform


JS Minification

/** * This, friends, is a very important function.*/function examplefunction(){var be = true;if(be){

confirm("You sure about that?");}else if(!be){

Confirm("Apparently not.")}

}

function examplefunction(){var be=true;if(be)

{confirm("You sure about that?");}else if(!be)

{Confirm("Apparently not.")}};

• Reduce the size of the Javascript files.• Reduce the total response sizes.• Reduced bandwidth significantly

Original size: 205 Minified size: 121 41%


JS Obfuscation (harder to understand)

function exampleFunction(){Var aLongerThanNecessaryVariableName = true;if(aLongerThanNecessaryVariableName){

confirm("You sure about that?");}else if(!aLongerThanNecessaryVariableName){

confirm("Apparently not.");}

}

function exampleFunction(){Var a = true;if(a){

confirm("You sure about that?");}else if(!a){

confirm("Apparently not.");}

}

• Reduce the lenght of variables names• Be careful the obfuscation method (e.g., eval cause performance degradation)• Be careful the conflicts.

Original size: 238 Obfuscation size: 145 39%


Combined (css, js)

CSS<link href="./css/custom.css" rel="stylesheet" type="text/css"><link href="./css/custom_responsive.css" rel="stylesheet" type="text/css">

JS<script src="./js/custom.js"></script><script src="./js/custom_responsive.js"></script>

<link href="./css/combination.css" rel="stylesheet" type="text/css">

<script src="./js/combination.js"></script>

• Reduce the HTTP requrest.• Reduce the size and load fast


<head><link href="./css/custom.css" rel="stylesheet" type="text/css"><link href="./css/custom_responsive.css" rel="stylesheet" type="text/css">

</head><body>

..

..

<script src="./js/custom.js" type="text/javascript"></script><script src="./js/custom_responsive.js" type="text/javascript"></script></body>

Source Order

<head><script src="./js/custom.js"></script><script src="./js/custom_responsive.js"></script>

<link href="./css/custom.css" rel="stylesheet" type="text/css"><link href="./css/custom_responsive.css" rel="stylesheet"

type="text/css"></head><body>

..

..</body>

• Keep CSS at Top• Keep JavaScripts at the Bottom• Drop all inline styles if possible and don't use browser specific CSS effects (esp. IE)• Use <link> to include stylesheets - @import MUST preceded all other rules

- @import may cause blank white screen phenomenon (in IE)


• CSS Sprites: Combine N icons into 1 bigger image.– Reduce N requests into 1 requrest.– Be careful of the arrangement of the icons– Tool: http://www.tw.spritegen.website-performance.org/

http://csssprites.com/

• Minimize, cut snip, chop– Minimize DOM elements. Slows donw JS– Iframes are heavy and block onload event– Minimize 3rd party script. See if you load those asynchronously– Reduce the cookie size.– Optimize images, use PNG instead of GIF.– Using appropriate image format and remove redundant chunks in the image files.– PNG8 (256 color) is a good choice.– Reduce JPG quality. Tools like jpgtran, pngcrush, optipng will help– Avoid image scaling

9

Make Fewer Requests

http://www.tw.spritegen.website-performance.org/

http://csssprites.com/


– Use JSON in AJAX requests– Use GET in Ajax requests– Prefer CSS over JSON– Font optimizing– Lazy load for Images– Avoid Flash files– Mobile-specific optimisations

Make Fewer Requests ( Minimize, cut snip, chop...)


Browser-Based Tools


YSlow (Add-on)

http://developer.yahoo.com/yslow/

• YSlow analyzes web page performance by examining all the components on the page, including components dynamically created by using JavaScript. It measures the page's performance and offers suggestions for improvement.

http://developer.yahoo.com/yslow/


Page Speed

• Useful to detect our website performance• Gives two scores: desktop and mobile• LIsts everything we can improve

https://developers.google.com/speed/pagespeed/?csw=1

Firefox Add-on

https://developers.google.com/speed/pagespeed/?csw=1


Other tools

• FireBug (Net tab)• Firecookie (Firecookie is an extension for Firebug that makes possible to view and manage cookies in

your browser)

• Live HTTP Headers (View HTTP headers of a page and while browsing.)

• Chrome, Safari, IE developer tools


List of best practices


Simplifying CSS Selectors

• CSS selector policy: Rightmost-First• Tips:

– Avoid * selector– Don’t qualify ID/CSS selectors– Specific rules– Avoid descendant selectors– Avoid Tag > Child selectors– Rely on Inheritance


http://developer.yahoo.com/performance/rules.html - Yahoo http://developer.mozilla.org/en/docs/Writing_Efficient_CSS - CSS Guidelines http://www.alistapart.com/articles/sprites - CSS Sprites http://www.javascripttoolbox.com/bestpractices/ - Javascript best

practices http://www.getfirebug.com/ - FireBug http://www.julienlecomte.net/ - A nice blog http://stevesouders.com/cuzillion/ - Place scripts & other resources tester http://quirksmode.org/ Other references: Jquery, GWT, YUI, Ajaxian Future - Ajax tied up with desktop web, other gadgets. Douglaus crockford - Yahoo videos about Javascript, DOM, Advanced JS Google I/O videos about web site performance tuning.

Referances

http://developer.yahoo.com/performance/rules.html

http://developer.mozilla.org/en/docs/Writing_Efficient_CSS

http://www.alistapart.com/articles/sprites

http://www.javascripttoolbox.com/bestpractices/

http://www.getfirebug.com/

http://www.julienlecomte.net/

http://stevesouders.com/cuzillion/

http://quirksmode.org/

Internet

Web performance tuning