Your SlideShare is downloading. ×
0
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Web performance essentials - Goodies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web performance essentials - Goodies

2,329

Published on

A collection from cuil resources.

A collection from cuil resources.

Published in: Business, Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,329
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web Site – Good Practices and Tuning Combination of goodies from great resources <ul><ul><li>CSS Guidelines </li></ul></ul><ul><ul><li>JavaScript, JSON </li></ul></ul><ul><ul><li>Speed Optimization Techniques </li></ul></ul><ul><ul><ul><li>Yslow component of Firebug </li></ul></ul></ul><ul><ul><li>Miscellaneous Tips </li></ul></ul><ul><ul><li>Other Firebug Features </li></ul></ul>- By Jerry Emmanuel Cognizant
  • 2. CSS guidelines <ul><li>What is a key selector? a > img { //props } div > p { //props } </li></ul><ul><li>Four types of CSS </li></ul><ul><ul><ul><li>- Id rules button#backButton {} </li></ul></ul></ul><ul><ul><ul><li>- Class rules button.toolbarButton {} </li></ul></ul></ul><ul><ul><ul><li>- Tag Rules table#detailsTable tr td {} </li></ul></ul></ul><ul><ul><ul><li>- Universal rules table {} </li></ul></ul></ul><ul><li>Style Computation – R to L </li></ul><ul><li>Good Practices </li></ul><ul><ul><ul><li>Avoid Universal Rules!. Only for theme designers </li></ul></ul></ul><ul><ul><ul><li>Don't qualify ID/class-categorized rules with tag/class names </li></ul></ul></ul><ul><ul><ul><li>Tag-categorized rules should never contain a child selector! </li></ul></ul></ul><ul><ul><ul><li>Rely on inheritance! </li></ul></ul></ul><ul><li>http://developer.mozilla.org/en/docs/Writing_Efficient_CSS </li></ul><ul><li>http://developer.mozilla.org/en/docs/Writing_Efficient_CSS </li></ul>
  • 3. JavaScript – Good practices <ul><li>Always use “var” for declaration. </li></ul><ul><li>Feature detect rather that browser detect. </li></ul><ul><li>Use Object literal notation: </li></ul><ul><ul><ul><li>order = { </li></ul></ul></ul><ul><ul><ul><li>mode: ‘default’, </li></ul></ul></ul><ul><ul><ul><li>obj : { id:’1’, val:’10’}, </li></ul></ul></ul><ul><ul><ul><li>array1 : [‘1’, ‘2’, ‘3’], </li></ul></ul></ul><ul><ul><ul><li>show : function(elToshow) { </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>Use square bracket notation </li></ul><ul><ul><li>MyObject[“property”] rather than MyObject.property </li></ul></ul><ul><ul><li>Use dot notation for standard properties of objects </li></ul></ul><ul><ul><li>Square bracket notation to access properties which are defined as objects in the page. </li></ul></ul><ul><ul><ul><li>Good: document.forms[&quot;myformname&quot;].elements[&quot;myinput&quot;].value </li></ul></ul></ul><ul><ul><ul><li>Bad : document.formname.inputname </li></ul></ul></ul>
  • 4. JavaScript – Good practices <ul><li>Avoid eval. Use JSON.parse(jsontext, reviver); </li></ul><ul><li>Use === and !== in place of == and !=. Because of type coercion. </li></ul><ul><li>Cache variables. </li></ul><ul><li>Falsy values in js. </li></ul><ul><ul><li>If (“”), if (0), if (null), if (undefined), if(NaN) are false. </li></ul></ul><ul><li>The Unary + Operator To TypeConvert To Number </li></ul><ul><ul><li>Eg: var input1 = document.getElementById(‘text1’).value; </li></ul></ul><ul><ul><li>var input2 = document.getElementById(‘text2’).value; </li></ul></ul><ul><ul><li>var value1 = (+input )+ (+input2) or var value1 = (input -0) + (input-0); </li></ul></ul><ul><li>Avoid Cluttering The Global Namespace. Use object literals. </li></ul><ul><li>Use Correct <script> Tags </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=”..”>, Language tag is deprecated. </li></ul></ul><ul><li>http://www.javascripttoolbox.com/bestpractices / - Javascript best practices </li></ul><ul><li>http://www.crockford.com/ - Douglas crockford </li></ul>
  • 5. JavaScript – JSON <ul><li>Use JSON </li></ul><ul><ul><li>More compact </li></ul></ul><ul><ul><li>Efficient data format </li></ul></ul><ul><ul><li>More neutral </li></ul></ul><ul><ul><li>Less overhead over XML. </li></ul></ul><ul><li>Has two structures </li></ul><ul><ul><li>A collection of name/value pairs . Eg: Object </li></ul></ul><ul><ul><li>var record = { </li></ul></ul><ul><ul><ul><ul><li>id:1, </li></ul></ul></ul></ul><ul><ul><ul><ul><li>name: “Record 1”, </li></ul></ul></ul></ul><ul><ul><ul><ul><li>findSubRecords: function () { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><li>ordered list of values . Eg:Arrays </li></ul></ul><ul><ul><ul><li>records = [ record1, record2, ….] </li></ul></ul></ul>
  • 6. JavaScript – JSON<> Java <ul><li>Libraries are available in respective languages for generating JSON code. </li></ul><ul><ul><li>JSONObject and JSONArray are available in json library for java. </li></ul></ul><ul><ul><li>JSONObject.put(<key>, value) and JSONArray.put(); </li></ul></ul><ul><ul><li>Typical JSON object: </li></ul></ul><ul><ul><ul><li>electricalParts = { </li></ul></ul></ul><ul><ul><ul><li>divisionName: ‘ESD’, </li></ul></ul></ul><ul><ul><ul><li>parts : [ </li></ul></ul></ul><ul><ul><ul><li>{id:1, name: part1}, </li></ul></ul></ul><ul><ul><ul><li>{id:1, name: part2}, </li></ul></ul></ul><ul><ul><ul><li>{id:1, name: part3} </li></ul></ul></ul><ul><ul><ul><li>] </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>Instead of eval(). Use JSON.parse(jsonText, reviver); </li></ul><ul><li>http://www.json.org/ - Douglas crockford. </li></ul>
  • 7. Web performance Tuning <ul><li>Make fewer Http Requests </li></ul><ul><li>Put style sheets at the top </li></ul><ul><li>Placing scripts. </li></ul><ul><li>Avoid CSS Expressions </li></ul><ul><li>Make CS and JS external </li></ul><ul><li>Minify JS </li></ul><ul><li>Remove duplicate scripts </li></ul><ul><li>Make Ajax cacheable </li></ul><ul><li>http://stevesouders.com/hpws/rule-min-http.php ← Really Cool </li></ul>
  • 8. Tuning - Make fewer Http Requests <ul><li>Combine CSS and JavaScript files </li></ul><ul><li>Css Sprites – Used for snappy image replacement </li></ul><ul><ul><li>Combine static images into a single image file. </li></ul></ul><ul><ul><li>Use Css to cut and place </li></ul></ul><ul><ul><li>CSS properties background-image and background-position are used. </li></ul></ul><ul><ul><ul><li>background:transparent url(&quot;dir_sprite.png&quot;) no-repeat </li></ul></ul></ul><ul><ul><ul><li>background-position: 0px -30px </li></ul></ul></ul><ul><ul><li>CSS Sprite Image Generator </li></ul></ul><ul><ul><ul><li>http://spritegen.website-performance.org/ </li></ul></ul></ul><ul><ul><ul><li>http://www.csssprites.com/ </li></ul></ul></ul><ul><ul><li>http://stevesouders.com/hpws/rule-min-http.php </li></ul></ul>
  • 9. Tuning – Style sheets at the top <ul><li>Use <link> tags to include stylesheets. </li></ul><ul><li>Neglect embedded styles and inline styles too. </li></ul><ul><li>Push style sheet inclusion into the head. </li></ul><ul><li>User perception of the page loading faster is important </li></ul><ul><li>http://stevesouders.com/hpws/rule-css-top.php </li></ul>
  • 10. Tuning – Placing scripts <ul><li>Move script inclusion as low as possible </li></ul><ul><li>Extract Js code which are used for rendering </li></ul><ul><ul><li>Manually – Using Firebug </li></ul></ul><ul><ul><li>Automated : Doloto – A Microsoft tool. </li></ul></ul><ul><li>Load scripts without blocking. </li></ul><ul><li>Don’t scatter inline scripts </li></ul><ul><li>Progressive rendering. </li></ul><ul><li>Scripts don’t download parallely. But in IE, it can be achieved by Dom inlucde. </li></ul><ul><ul><li>window.onload = function () { </li></ul></ul><ul><ul><li>var script = document.createElement(&quot;script&quot;); </li></ul></ul><ul><ul><li>script.src = ...; </li></ul></ul><ul><ul><li>document.body.appendChild(script); </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><li>http://sites.google.com/site/io/even-faster-web-sites - Google IO </li></ul><ul><li>http://stevesouders.com/hpws/rule-js-bottom.php </li></ul>
  • 11. Tuning – Avoid CSS Expressions <ul><li>Option available only in IE. </li></ul><ul><ul><li>width:expression(document.body.clientWidth < 550 ? &quot;450px&quot; : &quot;100%&quot; ); </li></ul></ul><ul><li>Use event handlers instead. </li></ul><ul><ul><li>Eg: element.addEventListener(‘<event>’, <handler to call>, <capturing/bubbling>). </li></ul></ul><ul><ul><li>Eg: window.addEventListener(‘resize’, changeWidth, true). </li></ul></ul><ul><ul><li>element.removeEventListener is used to remove the event. </li></ul></ul><ul><ul><li>In IE, attachEvent must be used instead.. </li></ul></ul><ul><li>http://stevesouders.com/hpws/rule-expr.php </li></ul>
  • 12. Tuning – Make JS &CSS external <ul><li>Inline – Using <@include> or import make the html doc big. </li></ul><ul><li>External using <script> and <link> tags </li></ul><ul><ul><li>Increases Http requests :( </li></ul></ul><ul><ul><li>Helps caching :))‏)‏ </li></ul></ul><ul><li>http://stevesouders.com/hpws/rule-inline.php </li></ul>
  • 13. Tuning – Minification <ul><li>Minify external javascript </li></ul><ul><ul><li>Remove comments and spaces </li></ul></ul><ul><li>Minify inline scripts </li></ul><ul><li>Obfuscation- Not recommended. Not safe </li></ul><ul><li>Let the dev code not be minified. Should have comments/spaces for maintainability. UseTools before moving code to production. </li></ul><ul><ul><li>Js Min </li></ul></ul><ul><ul><li>YUI Compressor. </li></ul></ul>
  • 14. Tuning – Resource/Web server end <ul><li>Use Content delivery network </li></ul><ul><li>Add Expires Header – images, even js, css </li></ul><ul><li>Gzip components – images, js, css, html doc </li></ul><ul><li>Reduce DNS lookups </li></ul><ul><li>Configure Etags </li></ul><ul><li>Avoid redirects </li></ul><ul><li>http://stevesouders.com/hpws/rules.php </li></ul>
  • 15. Tuning – Ajax <ul><li>Make Ajax cacheable. </li></ul><ul><li>No synchronous requests. </li></ul><ul><li>Use GET for AJAX Requests </li></ul><ul><ul><li>Post is a two step process (Sending the headers first and then sending data)‏ </li></ul></ul><ul><li>Favor JSON over XML as your data exchange format. </li></ul><ul><li>AJAX pattern: </li></ul><ul><ul><ul><li>Update the UI when the request gets sent. </li></ul></ul></ul><ul><ul><ul><li>Lock the UI/data structures with the finest possible granularity. </li></ul></ul></ul><ul><ul><ul><li>Let the user know that something is happening. </li></ul></ul></ul><ul><ul><ul><li>Let the user know why a UI object is locked. </li></ul></ul></ul><ul><ul><ul><li>Unlock the UI/data structures when the outcome is successful. </li></ul></ul></ul><ul><ul><ul><li>Handle error cases gracefully. </li></ul></ul></ul><ul><li>Lazy loading - http://ajaxpatterns.org/On-Demand_Javascript </li></ul><ul><ul><li>Dojo's package system, JSAN Import System </li></ul></ul>
  • 16. Miscellaneous Tips – 1/2 <ul><li>http://www.julienlecomte.net/ - A nice blog </li></ul><ul><li>Optimize Table Layout </li></ul><ul><ul><ul><li>Goal: allow the rendering engine to start rendering a table before it has received all the data </li></ul></ul></ul><ul><ul><ul><li>Use table-layout:fixed </li></ul></ul></ul><ul><ul><ul><li>Explicitly define a COL element for each column </li></ul></ul></ul><ul><ul><ul><li>Set the WIDTH attribute on each col </li></ul></ul></ul><ul><li>Close Your HTML Tags to Speed Up Parsing </li></ul><ul><li>Regular expression </li></ul><ul><ul><ul><li>Use regular expression literals. </li></ul></ul></ul><ul><ul><ul><ul><li>Eg: if (/loaded|complete/.test(status)) {...} </li></ul></ul></ul></ul><ul><ul><ul><li>Stick to simple patterns </li></ul></ul></ul><ul><li>In IE, Use Array.join(“”) rather than string concatenation </li></ul><ul><ul><ul><li>var i, s = []; </li></ul></ul></ul><ul><ul><ul><li>for (i = 0; i < 10000; i++) { </li></ul></ul></ul><ul><ul><ul><li>s[i] = “x”; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>s = s.join(“”); </li></ul></ul></ul>
  • 17. Miscellaneous Tips – 2/2 <ul><li>In case of changing lot of styles in js, try swapping styleclasses. </li></ul><ul><ul><li>More maintainable: </li></ul></ul><ul><ul><li>Change the CSS class name of an element. Obj.className=‘<class>’; </li></ul></ul><ul><li>Consider using the onmousedown event instead of the onclick event </li></ul><ul><li>Document Tree Modification.. </li></ul><ul><ul><li>Usual Way InnerHTml Way - Faster </li></ul></ul>var i, j, el, table, tbody, row, cell; el = document.createElement(&quot;div&quot;); document.body.appendChild(el); table = document.createElement(&quot;table&quot;); el.appendChild(table); tbody = document.createElement(&quot;tbody&quot;); table.appendChild(tbody); for (i = 0; i < 1000; i++) { row = document.createElement(&quot;tr&quot;); for (j = 0; j < 5; j++) { cell = document.createElement(&quot;td&quot;); row.appendChild(cell); } tbody.appendChild(row); } var i, j, el, idx, html; idx = 0; html = []; html[idx++] = &quot;<table>&quot;; for (i = 0; i < 1000; i++) { html[idx++] = &quot;<tr>&quot;; for (j = 0; j < 5; j++) { html[idx++] = &quot;<td></td>&quot;; } html[idx++] = &quot;</tr>&quot;; } html[idx++] = &quot;</table>&quot;; el = document.createElement(&quot;div&quot;); document.body.appendChild(el); el.innerHTML = html.join(&quot;&quot;);
  • 18. Firebug Features – Steve’s Yslow component <ul><ul><li>The previously discussed speed optimization techniques can be checked with the help of Ylow component provided by Yahoo to firefox. </li></ul></ul><ul><ul><li>It includes compression tools and other tools which can help on statistics and performance </li></ul></ul>
  • 19. Firebug Features – Yslow - Stats
  • 20. Firebug Features – Yslow - Components
  • 21. FireBug – Add on of Fire Fox <ul><li>Wealth of web development tools </li></ul><ul><li>Edit, debug, and monitor CSS, HTML, and JavaScript live. </li></ul>
  • 22. Firebug - Features <ul><li>Inspect and edit HTML </li></ul><ul><ul><li>Find HTML elements buried deep in the page </li></ul></ul><ul><ul><li>Edit Html live </li></ul></ul><ul><li>Tweak CSS to perfection </li></ul><ul><ul><li>See information on the end applied styles </li></ul></ul><ul><ul><li>Instant editing </li></ul></ul><ul><li>Visualize CSS metrics </li></ul><ul><ul><li>Visual monitor and change the attributes of the HTML box layout </li></ul></ul><ul><li>Monitor network activity </li></ul><ul><ul><li>See the data quantity that is actually loaded at the client end </li></ul></ul><ul><li>Debug and profile JavaScript </li></ul><ul><ul><li>Powerful debugger. Pause and watch on js variables and get a bulls eye shot on the js errors </li></ul></ul><ul><li>Quickly find errors </li></ul><ul><ul><li>Useful information about errors </li></ul></ul><ul><li>Explore the DOM </li></ul><ul><ul><li>Dig through the DOM hierarchy using its UI </li></ul></ul><ul><ul><li>Edit them on the fly </li></ul></ul><ul><li>Execute JavaScript on the fly </li></ul><ul><ul><li>Command line to execute JavaScript and other GUI </li></ul></ul><ul><li>Logging for JavaScript </li></ul><ul><ul><li>See stack trace and powerful logging functions </li></ul></ul>
  • 23. Firebug - Features Inspect and edit(live) HTML View source live Changes highlighted Instant HTML Editing Find Elements with Mouse Search Copy HTML
  • 24. Firebug - Features CSS Development - Inspect/Edit style Sheets LIVE! Inspect the cascade Preview/Copy colors and images Auto complete edit ↑↓ key Numbers ↑↓ key Property Disable Property
  • 25. Firebug - Features CSS Layout - Measure Layout LIVE! Change dimensions in the box model
  • 26. Firebug - Features Network Monitoring - Track http requests
  • 27. Firebug - Features Network Monitoring Watch the time unfold Break it down by type Cached or not cached Examine HTTP Headers XmlHttpRequest Monitoring
  • 28. Firebug - Features JavaScript Debugging - A powerful JavaScript debugger - Measure performance - Identify bottle Necks
  • 29. Firebug - Features JavaScript Debugging Find Scripts easily Pause execution on any line Pause execution based on exp Step – Debug functions Break on errors Stack traces unstacked
  • 30. Firebug - Features JavaScript Debugging Watch expressions Variable tooltips Profile JavaScript performance Logging function calls Js line jump
  • 31. Firebug - Features Finding Errors Informative JS errors Jump to debugger Filtering errors
  • 32. Firebug - Features DOM Exploration Informative summaries Edit/Auto complete Dom  Script Window
  • 33. Firebug - Features Java Script Command Line - Execute JavaScript on the fly.
  • 34. References <ul><li>http://developer.yahoo.com/performance/rules.html - Yahoo </li></ul><ul><li>http://developer.mozilla.org/en/docs/Writing_Efficient_CSS - CSS Guidelines </li></ul><ul><li>http://www.alistapart.com/articles/sprites - CSS sprites </li></ul><ul><li>http://www.javascripttoolbox.com/bestpractices / - Javascript best practices </li></ul><ul><li>http://www.getfirebug.com/ - FireBug </li></ul><ul><li>http://www.julienlecomte.net/ - A nice blog </li></ul><ul><li>http://stevesouders.com/cuzillion/ - Placing scripts & other resources tester </li></ul><ul><li>http://www.quirksmode.org/ </li></ul><ul><li>Other references: Jquery, GWT, YUI, Ajaxian </li></ul><ul><li>Future – Ajax tied up with desktop web, other gadgets. </li></ul><ul><li>Douglaus crockford – Yahoo videos about Javascript, DOM, Advanced Js </li></ul><ul><li>Google I/O videos about web site performance tuning. </li></ul>

×