• Save
Web performance essentials - Goodies
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web performance essentials - Goodies

on

  • 3,302 views

A collection from cuil resources.

A collection from cuil resources.

Statistics

Views

Total Views
3,302
Views on SlideShare
3,232
Embed Views
70

Actions

Likes
8
Downloads
1
Comments
0

5 Embeds 70

http://www.ilovejs.net 65
http://www.linkedin.com 2
http://www.slideshare.net 1
http://www.techgig.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web performance essentials - Goodies Presentation Transcript

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