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.

Web Performance Optimierung (WPO)

4,177 views

Published on

Mein Vortrag auf der WebTech-Konferenz am 12.10.2010 in Mainz und der SEO-Konferenz am 13.10.2010 in Zürich.

Web Performance Optimierung (WPO)

  1. 1. WebTech Mainz. Schneller. Kleiner. WPO. Web Performance Optimierung. Martin Kliehm. Senior Frontend Engineer. @kliehm. @namics. 12. Oktober 2010 http://flic.kr/p/5bgGb9
  2. 2. Namics. Web Performance Optimierung seit 2006 12.10.2010 Performance. WebTech.2
  3. 3. Namics. Performance: schnell & klein. 12.10.2010 3 Performance. WebTech. http://flic.kr/p/5jZ2nP
  4. 4. Namics.Performance. WebTech. Komponenten einer Webseite: Ein großes deutsches Bankhaus 12.10.2010 4 http://webpagetest.org
  5. 5. Namics.Performance. WebTech. Komponenten einer Webseite: Ein großes deutsches Bankhaus 12.10.2010 5 DNS Lookup: 299 ms Backend (HTML): + 514 ms = 13,71% Frontend: 5402 ms = 91,12% ← Backend (HTML): 8,67%
  6. 6. Namics.Performance. Webmontag. Komponenten einer Webseite: Ein großes deutsches Bankhaus 17.05.2010 6 DNS Lookup: 299 ms Backend (HTML): + 514 ms = 13,71% Frontend: 5402 ms = 91,12% JavaScript: 1717 ms Frontend: 91,12% JavaScript lädt sequentiell Bilder: nur 2 – 4 parallel Gesamt: 5928 ms
  7. 7. Namics. 5,9 Sekunden Ladezeit sind doch nicht schlecht, oder? 12.10.2010 7 Performance. WebTech. http://flic.kr/p/27sG2k
  8. 8. Namics. Case Studies: Langsamer 100 ms. Verzögerung  − 1% Umsatz 400 ms. Verzögerung  − 0,59% Suchen pro User 400 ms. Verzögerung  5 – 9% weniger Traffic 2 sec. langsamer  − 4,3% Umsatz pro User 12.10.2010 Performance. WebTech.8
  9. 9. Namics. Case Studies: Schneller 2,2 sec. schnellere Seite  + 15,4% Downloads − 30% Dateivolumen  + 30% Kartenaufrufe Eine einzige Optimierungsmaßnahme, gzip  + 13-25% schneller, 50% Dateivolumen eingespart 5 sec. schnellere Shopseiten  + 7-12% Conversion Rate, + 25% mehr Seitenaufrufe, 50% Server + Energiekosten gespart 12.10.2010 Performance. WebTech.9
  10. 10. Namics.12.10.2010 Performance. WebTech.10 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  11. 11. Namics.12.10.2010 Performance. WebTech.11 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  12. 12. Namics.12.10.2010 Performance. WebTech.12 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  13. 13. Namics.12.10.2010 Performance. WebTech.13 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  14. 14. Namics. Google Search Ranking “Our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings.” Google Blog, April 2010 12.10.2010 Performance. WebTech.14
  15. 15. Namics. Performanz. Schneller. Besser. Grüner. Mehr Umsatz. Alle glücklich. Namics. 12.10.2010 15 Performance. WebTech. http://flic.kr/p/8VHFb
  16. 16. Namics. Die (bekannten) 14 Regeln 12.10.2010 16 Performance. WebTech.
  17. 17. Namics. Die (bekannten) 14 Regeln 1. Gzip Components 2. Add an Expires Header 3. Reduce DNS Lookups 4. Avoid Redirects 5. Make Fewer HTTP Requests 6. Make JavaScript and CSS External 7. Minify JavaScript & CSS 8. Put CSS at the Top 9. Avoid CSS Expressions 10. Put Scripts at the Bottom 11. Remove Duplicate Scripts 12. Use a Content Delivery Network (CDN) 13. Configure ETags 14. Make AJAX Cacheable 12.10.2010 Performance. WebTech.17 http://developer.yahoo.com/performance/rules.html
  18. 18. Namics. Tools zum Testen 12.10.2010 Performance. WebTech.18 • Yslow • Google Page Speed • jsPerf • HttpWatch • WebPagetest • Boomerang
  19. 19. Namics. 1. Gzip Components <IfModule mod_deflate.c> # Don't compress images AddOutputFilterByType DEFLATE text/html text/css text/xml application/xhtml+xml application/x-javascript text/x-js text/javascript text/js application/javascript </IfModule> 12.10.2010 Performance. WebTech.19 http://developer.yahoo.com/performance/rules.html#gzip
  20. 20. Namics. 2. Add an Expires Header <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 month„ ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/ico "access plus 1 month" ExpiresByType image/icon "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" </IfModule> 12.10.2010 Performance. WebTech.20 http://developer.yahoo.com/performance/rules.html#expires
  21. 21. Namics. 3. Reduce DNS Lookups • Ein DNS Lookup dauert ca. 20-120 ms. • DNS Cache: • Internet Explorer: 30 min. • Firefox: 1 min. • Parallele Downloads über verschiedene Domains sind schneller • Kompromiss: 2-4 Domains 12.10.2010 Performance. WebTech.21 http://developer.yahoo.com/performance/rules.html#dns_lookups
  22. 22. Namics. 4. Avoid Redirects • Sie verzögern den Aufbau der Seite • Sie werden nicht gecacht • Best Practice: 301 oder 302 • Vorsicht: fehlender Endslash erzeugt Redirect ! 12.10.2010 Performance. WebTech.22 http://developer.yahoo.com/performance/rules.html#redirects
  23. 23. Namics. 5. Make Fewer HTTP Requests • JavaScript- bzw. CSS-Dateien zusammenfügen • CSS Sprites 12.10.2010 Performance. WebTech.23 http://developer.yahoo.com/performance/rules.html#num_http
  24. 24. Namics.12.10.2010 Performance. WebTech.24 http://goo.gl/Zhs9
  25. 25. Namics. http://goo.gl/Zhs9 12.10.2010 Performance. WebTech.25
  26. 26. Namics. Apache modconcat zum Aggregieren von CSS oder JavaScript <script type="text/javascript" src="http://yourdomain.com/ ??script-1.js,script-2.js"> </script> Verwendet den Cache Header der jüngsten Datei 12.10.2010 Performance. WebTech.26 http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
  27. 27. Namics.12.10.2010 Performance. WebTech.27 http://www.julienlecomte.net/blog/2007/09/16/
  28. 28. Namics.12.10.2010 Performance. WebTech.28 http://www.ejeliot.com/blog/73
  29. 29. Namics.12.10.2010 Performance. WebTech.29 https://jawr.dev.java.net/
  30. 30. Namics. 6. Make JavaScript and CSS External • Damit die Dateien gecacht werden können! • Bonus-Tipp: Frameworks von Google Code laden 12.10.2010 Performance. WebTech.30 http://developer.yahoo.com/performance/rules.html#external
  31. 31. Namics. 7. Minify JavaScript: Apache modjsmin $ apxs -c mod_jsmin.c Loadmodule jsmin_module modules/mod_jsmin.so 12.10.2010 Performance. WebTech.31 http://code.google.com/p/modjsmin/
  32. 32. Namics.12.10.2010 Performance. WebTech.32 http://goo.gl/NTKi
  33. 33. Namics. 8. Put CSS at the Top • Damit kann ein Browser die einzelnen Seitenelemente schon darstellen • Vorsicht: IE6 Conditional Comment blockiert IE8 für 150 ms. 12.10.2010 Performance. WebTech.34 http://developer.yahoo.com/performance/rules.html#css_top http://goo.gl/gjYs
  34. 34. Namics. 9. Avoid CSS Expressions in IE background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Expressions sind teuer, sie werden mehrere 10.000 mal ausgeführt 12.10.2010 Performance. WebTech.35 http://developer.yahoo.com/performance/rules.html#css_expressions
  35. 35. Namics. 10. Put Scripts at the Bottom • denn sie laden nur nacheinander • sie blockieren den restlichen Inhalt 12.10.2010 Performance. WebTech.36 http://developer.yahoo.com/performance/rules.html#js_bottom
  36. 36. Namics. Ausnahme: Non-blocking Scripts var script = document.createElement("script"); script.type = "text/javascript"; script.src = "file.js"; document.body.appendChild(script); <script type="text/javascript" async src="foo.js"></script> 12.10.2010 Performance. WebTech.37 http://goo.gl/o453
  37. 37. Namics. 11. Remove Duplicate Scripts • kommt öfters vor als man denkt • insbesondere Libraries wie jQuery werden oft mehrfach eingebunden • Internet Explorer cacht sie nicht: 2 Requests • verbraucht clientseitige Kapazitäten zum Verarbeiten 12.10.2010 Performance. WebTech.38 http://developer.yahoo.com/performance/rules.html#js_dupes
  38. 38. Namics. 12. Use a Content Delivery Network (CDN) • Für internationale Websites essentiell 12.10.2010 Performance. WebTech.39 http://developer.yahoo.com/performance/rules.html#cdn
  39. 39. Namics. 13. Configure ETags FileETag none 12.10.2010 Performance. WebTech.40 http://developer.yahoo.com/performance/rules.html#etags
  40. 40. Namics. 14. Make AJAX cacheable • mit einem Expires Header 12.10.2010 Performance. WebTech.41 http://developer.yahoo.com/performance/rules.html#cacheajax
  41. 41. Namics.12.10.2010 Performance. WebTech.42 http://youtu.be/nCgQDjiotG0
  42. 42. Namics. Die (bekannten) 14 35 Regeln 15. Flush Buffer Early 16. Use GET for Ajax Requests 17. Postload Components 18. Preload Components 19. Reduce the Number of DOM Elements 20. Split Components Across Domains 21. Minimize Number of iframes 22. Avoid 404s 23. Reduce Cookie Size 24. Use Cookie-Free Domains for Components 25. Minimize DOM Access 26. Develop Smart Event Handlers 27. Choose <link> Over @import 28. Avoid Filters 29. Optimize Images 30. Optimize CSS Sprites 31. Do Not Scale Images in HTML 32. Make favicon.ico Small and Cacheable 33. Keep Components Under 25 KB 34. Pack Components Into a Multipart Document 35. Avoid Empty Image src 12.10.2010 Performance. WebTech.43 http://developer.yahoo.com/performance/rules.html
  43. 43. Namics. Flush the buffer early </head> <?php flush(); ?> <body> 12.10.2010 Performance. WebTech.44 http://developer.yahoo.com/performance/rules.html#flush
  44. 44. Namics. Minimize DOM Access • Gehe von einer ID aus • $('#id elm') statt $('#id .class') • Elemente in Variablen cachen • Mehrere Elemente zusammen dem DOM-Baum hinzufügen (Document reflow minimieren) • Event Delegation (Bubbling) • Vorsicht bei Loops im IE! 12.10.2010 Performance. WebTech.45 http://developer.yahoo.com/performance/rules.html#dom_access http://goo.gl/Iu57
  45. 45. Namics. Minimize the number of iframes <iframe> pros: • Hilft bei langsamen Third-Party-Content wie Buttons und Bannern • Security Sandbox • Skripte werden parallel geladen <iframe> cons: • Teuer, selbst wenn sie leer sind • Blockiert den onload event • Nicht-Semantisch 12.10.2010 Performance. WebTech.46 http://www.slideshare.net/julien.lecomte/
  46. 46. Namics.12.10.2010 47 Performance. WebTech. Vorsicht vor 3rd Party Content
  47. 47. Namics.12.10.2010 Performance. WebTech.48 http://www.julienlecomte.net/blog/2007/09/16/
  48. 48. Namics.12.10.2010 49 Performance. WebTech. Bilder optimieren
  49. 49. Namics. Apache moddims <img src="http://yourdims.com/ dims/resize/320x240/ quality/70/ http://yourdomain.com/ lorem.jpg" width="320" height="240" alt="Lorem ipsum" /> 12.10.2010 Performance. WebTech.50 http://code.google.com/p/moddims/
  50. 50. Namics.12.10.2010 Performance. WebTech.51 http://psydk.org/PngOptimizer.php
  51. 51. Namics.12.10.2010 Performance. WebTech.52 http://developer.yahoo.com/yslow/smushit/
  52. 52. Namics.12.10.2010 53 Performance. WebTech. Lazy-load images
  53. 53. Namics. Lazy-Loading von Bildern Verschiedene JavaScript-Libraries: 12.10.2010 Performance. WebTech.54 Lazy Load (jQuery) ImageLoader (YUI) Sonar (AOL, standalone)
  54. 54. Namics.12.10.2010 55 Performance. WebTech. Neue (?) Ideen: @font-face für Icons
  55. 55. Namics. @font-face für Icons 1. Icons in Illustrator erstellen 2. In FontForge importieren 3. Verschiedene Font-Formate mit FontSquirrel generieren (TTF, WOFF, EOT, SVG) 4. @font-face im CSS einbauen Vorteile: skalierbar, Farbe frei wählbar, an Grundlinie ausgerichtet; Nachteil: einfarbig (Gradient mit CSS3?) 12.10.2010 Performance. WebTech.56
  56. 56. Namics.12.10.2010 57 Performance. WebTech. Keine eigene Datei print.css (auch keine iphone.css)
  57. 57. Namics. <link type="text/css" media="print" src="print.css" /> 12.10.2010 Performance. WebTech.58 @media print { a { text-decoration: none; } } 
  58. 58. Namics.12.10.2010 59 Performance. WebTech. CSS background-images reduzieren mit data:URI
  59. 59. Namics. #wrapper { background: url( bg.gif ); } 12.10.2010 Performance. WebTech.60 #wrapper { background: url( "data:image/png; base64,iVBORw0[…]" ); } http://software.hixie.ch/utilities/cgi/data/data
  60. 60. Namics. Die Lösung: MHTML in der ie.css /* Content-Type: multipart/related; boundary="SEPARATOR" --SEPARATOR-- Content-Location:bgimg1 Content-Transfer-Encoding:base64 iVBORw0[…] */ 12.10.2010 Performance. WebTech.61 http://www.phpied.com/the-proper-mhtml-syntax/ http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
  61. 61. Namics. Die Lösung: M(ultipart)HTML in der ie.css #wrapper { background: url( "mhtml:http://me.com/ ie.css!bgimg1" ); } 12.10.2010 Performance. WebTech.62 http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
  62. 62. Namics. Danke. 12.10.2010 63 Performance. WebTech. twitter: @kliehm Links: http://delicious.com/kliehm/performance Social: http://klie.hm/profile

×