• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building high performance web apps.
 

Building high performance web apps.

on

  • 556 views

Essential rules and common practice that can enhance your web application performance, if we consider them in advance.

Essential rules and common practice that can enhance your web application performance, if we consider them in advance.

Statistics

Views

Total Views
556
Views on SlideShare
545
Embed Views
11

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 11

http://www.linkedin.com 11

Accessibility

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

    Building high performance web apps. Building high performance web apps. Presentation Transcript

    • Building High Performance Web Apps. Essential rules and common practice Author: Arshak Movsisyan Email: arshak.movsissian@gmail.com
    • 5 Rules For High Performance 1. Use a Content Delivery Network (CDN) 2. Add an Expires or a Cache-Control Header 3. Work with Scripts (Make External, Position, Group, Minify, Compress) 4. Reduce the Number of DOM Elements 5. Develop Smart Event Handlers
    • 1. Use a CDN What is CDN? CDN is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. E.g. CloudFlare, Coral Content Distribution Network, Incapsula, etc. How CDN works? The server with the fewest network hops or the server with the quickest response time is chosen. Results Researches showed that it improves end-user response times by 20% or more, meanwhile 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, etc.
    • 2. Add an Expires or a Cache-Control Header For static components: implement "Never expire" policy by setting far future Expires header. Example: Expires: Thu, 15 Apr 2020 20:00:00 GMT But keep in mind, if you use a far future Expires header you have to change the component's filename whenever the component changes. For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests <FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=290304000, public" </FilesMatch> This goes in your root .htaccess file but if you have access to httpd.conf that is better.
    • 3. Work with Scripts - Make JavaScript and CSS External Why making scripts external is faster? Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. Results External files are cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.
    • 3. Work with Scripts – Positioning JavaScript and CSS How do we generally position scripts? <html> <head> <title>Positioning Scripts</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src=“//cdnjs.cloudflare.com/js/script_1.js"></script> <script type="text/javascript" src=“//cdnjs.cloudflare.com/js/script_2.js"></script> <script type="text/javascript" src=“//cdnjs.cloudflare.com/js/script_3.js"></script> </head> <body> <p>Not a good practice!</p> </body> </html>
    • 3. Work with Scripts – Positioning JavaScript and CSS Code Execution Flow Each file must wait until the previous one has been downloaded and executed before the next download can begin. In the meantime, the user is met with a blank screen as the files are being downloaded one at a time. This is the behavior of most major browsers today. How it works.
    • 3. Work with Scripts – Positioning JavaScript and CSS What is the recommended solution! it’s recommended to place all <script> tags as close to the bottom of the <body> tag as possible so as not to affect the download of the entire page. For example: <html> <head> <title>Positioning Scripts</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Good practice!</p> <script type="text/javascript" src=“//cdnjs.cloudflare.com/js/script_1.js"></script> <script type="text/javascript" src=“//cdnjs.cloudflare.com/js/script_2.js"></script> <script type="text/javascript" src=“//cdnjs.cloudflare.com/js/script_3.js"></script> </body> </html>
    • 3. Work with Scripts – Group JavaScript and CSS Downloading one single 100 KB file will be faster than downloading four 25 KB files. Instead of three separate requests you could do the following and utilize a single request using CDNJS Combo Loader or heeep.it*. <script type="text/javascript“ src=“//cdnjs.cloudflare.com ?js/script_1.js &js/script_2.js &js/script_3.js"></script> * See more about CDNJS Combo Loader and heeep.it <script type="text/javascript“ src=“//go.heeep.it?, js/script_1.js, js/script_2.js, js/script_3.js"></script> CDNJS Combo Loader heeep.it Loader
    • 3. Work with Scripts – Minify JavaScript and CSS Minifying is the process of removing unnecessary characters (comments, space, newline and tab) from code. As a result it reduce file size thereby improving load times. There are two popular tools for minifying JavaScript code are JSMin and YUI Compressor. Before: // is.js // (c) 2001 Douglas Crockford // 2001 June 3 // is // The -is- object is used to identify the browser. Every browser edition // identifies itself, but there is no standard way of doing it, and some of // the identification is deceptive. This is because the authors of web // browsers are liars. For example, Microsoft's IE browsers claim to be // Mozilla 4. Netscape 6 claims to be version 5. var is = { ie: navigator.appName == 'Microsoft Internet Explorer', java: navigator.javaEnabled(), ns: navigator.appName == 'Netscape', ua: navigator.userAgent.toLowerCase(), version: parseFloat(navigator.appVersion.substr(21)) || parseFloat(navigator.appVersion), win: navigator.platform == 'Win32' } is.mac = is.ua.indexOf('mac') >= 0; if (is.ua.indexOf('opera') >= 0) { is.ie = is.ns = false; is.opera = true; } if (is.ua.indexOf('gecko') >= 0) { is.ie = is.ns = false; is.gecko = true; } After: var is={ie:navigator.appName=='Microsoft Internet xplorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'} is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;} if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
    • 3. Work with Scripts – Compress Content How we do now (Server without gzip) Compression is a simple, effective way to save bandwidth and speed up your site. What is compression? 1. Browser: GET /index.html 2. Server: Ok, let me see if index.html is lying around... 3. Server: Found it! Here's your response code (200 OK) and I'm sending the file. 4. Browser: 100KB? Vay qu ara... waiting, waiting... ok, it's loaded.
    • 3. Work with Scripts – Compress Content How we should do (Server with gzip) Compression is a simple, effective way to save bandwidth and speed up your site. What is compression? 1. Browser: Hey, can I GET index.html? I'll take a compressed version if you've got it. 2. Server: Let me find the file... yep, it's here. And you'll take a compressed version? Awesome. 3. Server: Ok, I've found index.html (200 OK), am zipping it and sending it over. 4. Browser: Great! It's only 10KB. I'll unzip it and show the user. The formula is simple: Smaller file = faster download = happy user.
    • 3. Work with Scripts – Compress Content 1. Browser: change your .htaccess file 2. Server: For IIS enable compression in the settings So when a file's too big, just zip it, but how? Results This can reduce the size of pages and style sheets by up to 70%! http://www.whatsmyip.org/http-compression-test/
    • 4. Reduce the Number of DOM Elements A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example. Overview What should we do? A great help with layouts are the YUI CSS utilities: grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser's defaults formatting. This is a chance to start fresh and think about your markup, for example use <div>s only when it makes sense semantically, and not because it renders a new line. Just type in Firebug's console: document.getElementsByTagName('*').length How to check you Dom elements number How many DOM elements should we have on the sigle page It is tested by Yslow and goes green when count of DOM Element is up to 1800. But there is no set standard as to how many DOM elements are too many. Check other similar pages that have good markup. Eg. Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).
    • 5. Develop Smart Event Handlers Generally we attach event handler to different elements of the DOM tree. Which makes page dummy because of handlers execution. Instead, the event handler can be added to one parent. This approach is called Event Delegation. Overview How it works? In DOM tree Events bubble up so you'll be able to catch the event and figure out which element has fired an event. <ul id="parent-"> <li id="child-1">Item 1</li> <li id="child-2">Item 2</li> <li id="child-3">Item 3</li> <li id="child-4">Item 4</li> <li id="child-5">Item 5</li> <li id="child-6">Item 6</li> </ul> Example <script> document.getElementById("parent-list").addEventListener("click“, function(e) { if(e.target && e.target.nodeName == "LI") { console.log("List item ", e.target.id.replace(“child-")," was clicked!"); } }); </script>
    • Summary 1. CDN deliver content by choosing server with the quickest response time from different geographical locations. It will improve end-user response time up to 20%. 2. By using the Expires header you avoid unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts. 3. Make JavaScript and CSS external, minify them and set up GZIP compress settings. Keep JavaScript on the bottom, CSS on the top. These will improve your application performance up to 70%. 4. Use tags only when it makes sense semantically, and not because it renders a new line. Reducing DOM Elements means downloading less bytes and also higher DOM access in JavaScript. 5. Using Event Delegation is a good approach. You will take advantage of Event Bubbling and will minimize the use of separate handlers for different elements. This will reduce execution time and speed up page responsiveness.
    • References 1. “High Performance JavaScript, by Nicholas C. Zakas. Copyright 2010 Yahoo!, Inc., 978-0-596-80279-0.” 2. http://developer.yahoo.com/performance/rules.html 3. http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip- compression/ 4. http://gtmetrix.com/enable-gzip-compression.html 5. http://www.whatsmyip.org/http-compression-test/ 6. https://developers.google.com/speed/articles/gzip 7. http://betterexplained.com/articles/speed-up-your-javascript-load-time/ Author: Arshak Movsisyan Email: arshak.movsissian@gmail.com