Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High performance website


Published on

  • It's nice. I just finish reading. Thank alot dude.
    Are you sure you want to  Yes  No
    Your message goes here

High performance website

  1. 1. High Performance Website Chhorn Chamnap 30 April 2011 1
  2. 2. About Me• Chhorn Chamnap• Senior Developer at Yoolk Inc.• Blog: =>• Twitter: @chamnap• Email: 2
  3. 3. The 80/20 Performance Rule• A theory from Vilfredo Pareto, an economist in the early 1900s.• 80% of the consequences come from 20% of the causes.• 80% of the time is spent in only 20% of the code.• Focus on the 20% that affects 80% of the end- user response time.• Start from the front end. 3
  4. 4. 1. Minimize HTTP Requests• 80% of the end-user response time is spent on the front-endLoading Time spent loading popular web sites 4
  5. 5. 1. Minimize HTTP Requests• Solutions – Combined scripts and stylesheets – CSS Sprites – Image maps – Browser Cache Usage - 40-60% of daily visitors to your site come in with an empty cache. 5
  6. 6. Combined Scripts and Stylesheets• Combining six scripts into one eliminates five HTTP requests• 6
  7. 7. Image maps• Combine multiple images into a single image.• client-side – preferred <img usemap%="#map1" border=0 src="/images/imagemap.gif"> <map name="map1"> <area shape="rect" coords="0,0,31,31" href="home.html" title="Home"> … </map>• drawbacks: – must be contiguous – defining area coordinates – tedious, errors•• 7
  8. 8. CSS Sprites• The preferred method for reducing the number of image requests• Combine into a single image and use background- image and background-position properties to display. <span style=" background-image: url(sprites.gif); background-position: -260px -90px;"> </span>• 8
  9. 9. Content Delivery Network How does CDN work? 9
  10. 10. 2. Use a Content Delivery Network• The users proximity has an impact on response times.• Solutions – Use a CDN: Akamai Technologies, EdgeCast, Amazon CloudFront, or level3. – Distribute your static content before distributing your dynamic content.• At Yahoo!, using a CDN improved response times >= 20%.• 10
  11. 11. 3. Add an Expires or a Cache-Control Header• Implement "Never expire" policy for all static components.• Avoids unnecessary HTTP requests on subsequent page views after the first visit. HTTP/1.1 200 OK Expires: Thu, 31 Dec 2037 23:55:55 GMT Cache-Control: max-age=315360000 Content-Length: 12195• How to expire the cache? yahoo_2.0.6.js css_based.css?30042011• 11
  12. 12. Empty vs. Full Cache Loading 12
  13. 13. 13
  14. 14. Expires Header Configuration• Apache ExpiresDefault "access plus 10 years"• Nginx if ($request_filename ~* ^.+.(jpg|jpeg|gif|png|ico|css|js|swf)$) { expires max; break; } 14
  15. 15. 4. Gzip Components GET /i/yahoo.gif HTTP/1.1 HTTP/1.1 200 OK Host: Content-Length: 12195 Accept-Encoding: gzip Content-Encoding: gzip• Reduces response times.• The response size ~ 70% reduction.• 90%+ of browsers support gzip.• Compress any text responses• Image and PDF files SHOULD NOT be gzipped.• 15
  16. 16. Gzip Configuration• Apache 1.3 uses mod_gzip, Apache 2.x uses mod_deflate• Apache 2.x: mod_deflate AddOutputFilterByType DEFLATE text/html text/css application/x-javascript• Nginx gzip on; gzip_comp_level 6; gzip_types text/plain text/css text/javascript application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss; 16
  17. 17. 5. Put Stylesheets at the Top• Research at Yahoo! shows that moving stylesheets to the HEAD makes pages appear to be loading faster. – It allows the page to render progressively.• The user is stuck viewing a blank white page if put at the bottom. – The browser block rendering to avoid redrawing elements.• The HTML specification said the same thing.• top.php 17
  18. 18. 6. Put Scripts at the Bottom• Download no > two in parallel per hostname.• Block parallel downloads across all hostnames.• Block rendering of everything below them in the page.• Never uses document.write.• Script DEFER attribute is not asolution.• bottom.php 18
  19. 19. 7. Avoid CSS Expressions• Powerful but dangerous way to set CSS properties dynamically.• Supported since IE5 but deprecated from IE8. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );• Execute so many times (> 10,000) – mouse move, key press, resize, scroll, etc.• expr.php 19
  20. 20. 8. Make JavaScript and CSS External• Using external files produces faster pages. Why? – Js and css files are cached. – Inlined increases the document’s size. – Many documents could re-use them.• To reduce HTTP requests in the front page: – inline JavaScript and CSS, but dynamically download the external files after finished loading.• inline.php 20
  21. 21. DNS Lookup 21
  22. 22. 9. Reduce DNS Lookups• 20-120 ms to lookup.• Blocks the parrallel download.• IE caches – DnsCacheTimeout: 30 minutes – KeepAliveTimeout: 1 minute – ServerInfoTimeout: 2 minutes• Firefox – network.dnsCacheExpiration: 1 minute – network.dnsCacheEntries: 20 – network.http.keep-alive.timeout: 5 minutes• Reducing hostnames reduces the DNS lookups. – But it reduces parallel downloads as well.• The rule of thumbs is two per hostname.• 22
  23. 23. ConfigurationActionController::Base.asset_host = { |source| "http://assets#{source.hash % 2 + 1}"}server_name;location / { alias /var/www/placexpert/public/; if ($request_filename ~* ^.+.(jpg|jpeg|gif|png|ico|css|js|swf)$) { expires max; break; }} 23
  24. 24. Parallel Downloads 24
  25. 25. 10. Minify JavaScript and CSS• Minification reduces response time and the size.• Two popular tools are: – JSMin – YUI Compressor – Google Closure Compiler• Obfuscation is an alternative optimization.• Both methods achieves fairly the same size reduction.• Should minified inline js and css as well (5% reduction)• 25
  26. 26. 11. Avoid Redirects• Redirects are accomplished using the 301 and 302 status codes. HTTP/1.1 301 Moved Permanently Location: Content-Type: text/html• Redirects slow down the user experience. – Nothing can be rendered – Round-trip request• Add Expires headers to cache redirects• Make sure use the standard 3xx HTTP status codes.• 26
  27. 27. Wasteful redirects =>• This is fixed in Apache by using Alias or mod_rewrite, or the DirectorySlash directive if youre using Apache handlers.• Nginx – rewrite ^(.*[^/])$ $1/ permanent; 27
  28. 28. 12. Remove Duplicate Scripts• A typical problem – 2 of 10 top sites contain duplicate• Hurts performance – extra HTTP requests (IE only) – extra executions (even cached)• dupes.php 28
  29. 29. 13. Configure ETags• ETags stands for Entity Tags.• A unique identifier that is more flexible than the Last- Modified date. HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195 GET /i/yahoo.gif HTTP/1.1 Host: If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified• Doesn’t works well for cluster of servers.• To turn off in Apache, FileETag none• 29
  30. 30. 14. Make Ajax Cacheable• Expires or Cache-Control header• Adding a timestamp to the URL – &t=1190241612• When it has been modified, send with a new timestamp.• ajax.php 30
  31. 31. 15. Flush the Buffer Early• Don’t let the browser idle.• In PHP, use flush() to send data partially.• Good for busy backends or light frontends.• Flushing after the HEAD ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->• Yahoo! search 31
  32. 32. 16. Use GET for AJAX Requests• POST in the browsers as a two-step process: – sending the headers first, – then sending data.• Best to use GET.• POST without posting any data behaves like GET.• GET is meant for retrieving information• POST is for sending data to be stored server- side. 32
  33. 33. 17. Post-load Components• Whats absolutely required in order to render the page initially?• The others can wait.• Post-loading should include – drag and drop – animations – hidden content – images below the fold.• Load them in the onLoad event.• Tools – YUI Image Loader – YUI Get utility• Yahoo! Home Page 33
  34. 34. Post-Onload Script• inline in front page window.onload = downloadComponents; function downloadComponents() { var elem = document.createElement("script"); elem.src = "http://.../file1.js"; document.body.appendChild(elem); ... }• speeds up secondary pages 34
  35. 35. 18. Preload Components• Preload what you’ll need in the future.• Unconditional preload• Conditional preload - make an educated guess• Anticipated preload - preload in advance before redesign 35
  36. 36. 19. Reduce the Number of DOM Elements• The number of DOM elements: document.getElementsByTagName(*).length• More bytes to download and slower DOM access.• Using nested tables for layout purposes?• Are you throwing in more <div>s only to fix layout issues?• Try YUI CSS utilities: grids.css, fonts.css and reset.css• And how many DOM elements are too many?• The Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags). 36
  37. 37. 20. Split Components Across Domains• Maximize parallel downloads.• 2-4 sub-domains only because of the DNS lookup penalty –, –• Maximizing Parallel Downloads in the Carpool Lane 37
  38. 38. 21. Minimize the Number of iframes• Pros – Helps with slow third-party content like badges and ads – Security sandbox – Download scripts in parallel• Cons – Costly even if blank – Blocks page onload – Non-semantic 38
  39. 39. 22. No 404s• A useless request. 39
  40. 40. 23. Reduce Cookie Size• Authentication and personalization only GET /index.html HTTP/1.1 HTTP/1.1 200 OK Host: Content-type: text/html Set-Cookie: name=value Set-Cookie: name2=value2; Expires=Wed, GET /spec.html HTTP/1.1 09 Jun 2021 10:18:14 GMT Host: Cookie: name=value; name2=value2 Accept: */*• Small impact on the response time.• When the Cookie Crumbles – Eliminate unnecessary cookies – Keep cookie sizes small – Setting cookies at the appropriate domain level – Set an Expires date appropriately 40
  41. 41. Impact of cookies on response time 41
  42. 42. 24. Use Cookie-free Domains for Components• Create www site and subdomain – that subdomain is cookie-free• Buy a whole new domain if already set on domain without www. – Yahoo! uses, – YouTube uses, – Amazon uses and so on.• Some proxies might refuse to cache the components that are requested with cookies. 42
  43. 43. 25. Minimize DOM Access• Accessing DOM elements is slow – Cache references – Update nodes "offline" and add them later – Avoid fixing layout with JavaScript• High Performance Ajax Applications 43
  44. 44. 26. Develop Smart Event Handlers• Using event delegation is a good approach.• Use DOMContentLoaded event instead.• High Performance Ajax Applications 44
  45. 45. 27. Choose <link> over @import• One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.• In IE @import behaves the same as using <link> at the bottom of the page, so its best not to use it. 45
  46. 46. 28. Avoid Filters• It blocks rendering and freezes the browser while the image is being downloaded.• It also increases memory consumption and is applied per element, not per image.• Avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. 46
  47. 47. 29. Optimize CSS Sprites• Arranging the images horizontally (makes the smaller file size).• Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.• Dont leave big gaps between the images in a sprite. – It makes the user agent requires less memory. 47
  48. 48. 30. Dont Scale Images in HTML• Dont use a bigger image than you need.• If you need <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> then mycat.jpg should be 100x100px. 48
  49. 49. 31. Make favicon.ico Small and Cacheable• Browser will always request it, better not to respond 404. – Cookies are sent every time its requested. – Also interferes with the download sequence in IE.• Solutions – Make it small, preferably under 1K. – Set Expires header when you feel comfortable.• Imagemagick can help you create small favicons 49
  50. 50. 32. Keep Components under 25K• iPhone wont cache components > 25K (uncompressed size).• Minification is important because gzip alone may not be sufficient.• Performance Research, Part 5: iPhone Cacheability - Making it Stick 50
  51. 51. 33. Avoid Empty Image src• Image with empty string src attribute occurs more than one will expect. It appears in two form: – Straight HTML <img src=""> – JavaScript var img = new Image(); img.src = "";• Browser makes another request to your server.• Cripple your servers by sending a large amount of unexpected traffic.• Waste server computing cycles.• Possibly corrupt user data.• HTML5 instruct browsers not to make an additional request.• Empty image src can destroy your site 51
  52. 52. Developer Tools• Firebug• YSlow• 52
  53. 53. References• research-part-1/• research-part-2/• research-part-3/• research-part-4/••• websites-by-souders-steve-presentation 53