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

Web performance essentials - Goodies

on

  • 3,221 views

A collection from cuil resources.

A collection from cuil resources.

Statistics

Views

Total Views
3,221
Slideshare-icon Views on SlideShare
3,151
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 Web performance essentials - Goodies Presentation Transcript

    • 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
    • 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
    • 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
    • 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
    • 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, ….]
    • 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.
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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(“”);
    • 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;);
    • 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
    • Firebug Features – Yslow - Stats
    • Firebug Features – Yslow - Components
    • FireBug – Add on of Fire Fox
      • Wealth of web development tools
      • Edit, debug, and monitor CSS, HTML, and JavaScript live.
    • 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
    • Firebug - Features Inspect and edit(live) HTML View source live Changes highlighted Instant HTML Editing Find Elements with Mouse Search Copy HTML
    • 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
    • Firebug - Features CSS Layout - Measure Layout LIVE! Change dimensions in the box model
    • Firebug - Features Network Monitoring - Track http requests
    • Firebug - Features Network Monitoring Watch the time unfold Break it down by type Cached or not cached Examine HTTP Headers XmlHttpRequest Monitoring
    • Firebug - Features JavaScript Debugging - A powerful JavaScript debugger - Measure performance - Identify bottle Necks
    • 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
    • Firebug - Features JavaScript Debugging Watch expressions Variable tooltips Profile JavaScript performance Logging function calls Js line jump
    • Firebug - Features Finding Errors Informative JS errors Jump to debugger Filtering errors
    • Firebug - Features DOM Exploration Informative summaries Edit/Auto complete Dom  Script Window
    • Firebug - Features Java Script Command Line - Execute JavaScript on the fly.
    • 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.