Web performance tuning

CIGNEX Datamatics Confidential www.cignex.com
Web Performance Tuning in Front-end Perspective
Ver : 1.0
Name: Sendhil Kumar K
Title: 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){
}else if(!aLongerThanNecessaryVariableName){
confirm("Apparently not.");
}
}
function exampleFunction(){
Var a = true;
if(a){
}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_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_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

– 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.

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

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

Web performance tuning

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a Web performance tuning

Semelhante a Web performance tuning (20)

Último

Último (20)

Web performance tuning