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

Like this? Share it with your network

Share

Web performance essentials - Goodies

  • 3,324 views
Uploaded on

A collection from cuil resources.

A collection from cuil resources.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,324
On Slideshare
3,254
From Embeds
70
Number of Embeds
5

Actions

Shares
Downloads
1
Comments
0
Likes
8

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

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