This document discusses various techniques for improving front-end web performance. It states that 80% of end-user response time is spent downloading page components like images, CSS, JavaScript, and that speed is important for user experience and functionality. Various methods are presented for minimizing file sizes like JavaScript minification and combining files. It also recommends techniques like using CSS sprites and lazy loading images. Browser tools for analyzing performance are listed, and references for further information are provided.
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
Web performance tuning
1. 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
2. CIGNEX Datamatics Confidential www.cignex.com
• 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
3. CIGNEX Datamatics Confidential www.cignex.com
Why is speed important?
• Offers a good user experience
• No broken functionality
• Doesn't make one feel like they are living in the 90s
5. CIGNEX Datamatics Confidential www.cignex.com
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%
6. CIGNEX Datamatics Confidential www.cignex.com
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%
7. CIGNEX Datamatics Confidential www.cignex.com
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
8. CIGNEX Datamatics Confidential www.cignex.com
<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)
9. CIGNEX Datamatics Confidential www.cignex.com
• 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
10. CIGNEX Datamatics Confidential www.cignex.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...)
12. CIGNEX Datamatics Confidential www.cignex.com
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.
13. CIGNEX Datamatics Confidential www.cignex.com
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
14. CIGNEX Datamatics Confidential www.cignex.com
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
