Webmontag. Frankfurt. Schneller. Nur 15 Minuten. WPO. Web Performance Optimierung. Namics.<br />Martin Kliehm. Senior Fron...
Web Performance Optimierung seit 2006<br />17.05.2010<br />Performance. Webmontag.<br />2<br />
Performance:schnell & klein sein.<br />17.05.2010<br />3<br />Performance. Webmontag.<br />http://flic.kr/p/5jZ2nP<br />
Performance. Webmontag.<br />Komponenten einer Webseite:Ein großes deutsches Bankhaus<br />17.05.2010<br />4<br />http://w...
Performance. Webmontag.<br />Komponenten einer Webseite:Ein großes deutsches Bankhaus<br />17.05.2010<br />5<br />← Backen...
Komponenten einer Webseite:Ein großes deutsches Bankhaus<br />17.05.2010<br />6<br />DNS Lookup:	299 msBackend (HTML):	514...
5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder?<br />17.05.2010<br />7<br />Performance. Webmontag.<br />http://flic....
Case Studies: Langsamer<br />100 ms. Verzögerung è− 1% Umsatz<br />400 ms. Verzögerung è− 0,59% Suchen pro User<br />400 m...
Case Studies: Schneller<br />2,2 sec. schnellere Seite è+ 15,4% Downloads<br />− 30% Dateivolumen è+ 30% Kartenaufrufe<br ...
17.05.2010<br />Performance. Webmontag.<br />10<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimiza...
17.05.2010<br />Performance. Webmontag.<br />11<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimiza...
17.05.2010<br />Performance. Webmontag.<br />12<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimiza...
17.05.2010<br />Performance. Webmontag.<br />13<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimiza...
Google Search Ranking<br />“Our users place a lot of value in speed —  that’s why we’ve decided to take site speed  into a...
Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics.<br />17.05.2010<br />15<br />Performance. Webmo...
Die (bekannten) 14 Regeln<br />17.05.2010<br />16<br />Performance. Webmontag.<br />
Die (bekannten) 14 Regeln<br />Gzip Components <br />Add an Expires Header<br />Reduce DNS Lookups <br />Avoid Redirects<b...
Die (bekannten) 14 35 Regeln<br />FlushBufferEarly<br />UseGETforAjaxRequests<br />Postload Components<br />Preload Compon...
17.05.2010<br />19<br />Performance. Webmontag.<br />Neue (?) Ideen:Keine eigene Datei print.css<br />
<link type="text/css"media="print"src="print.css" /><br />17.05.2010<br />Performance. Webmontag.<br />20<br />@mediaprint...
17.05.2010<br />21<br />Performance. Webmontag.<br />CSS background-images reduzieren mit data:URI<br />
#wrapper {	background:url( bg.gif ); }<br />17.05.2010<br />Performance. Webmontag.<br />22<br />#wrapper {	background:url...
		Die Lösung: M(ultipart)HTML		in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATORContent-Loca...
		Die Lösung: M(ultipart)HTML		in der ie.css#wrapper {	background:url( "mhtml:http://me.com/ie.css!bgimg1" );}<br />17.05....
17.05.2010<br />25<br />Performance. Webmontag.<br />Apache-Module: modconcat, modjsmin, moddims<br />
Apache modconcat zum Aggregieren von CSS oder JavaScript<br /><script type="text/javascript"src="http://yourdomain.com/??s...
Apache modjsmin<br />$ apxs -c mod_jsmin.c<br />Loadmodulejsmin_modulemodules/mod_jsmin.so<br />17.05.2010<br />Performanc...
Apache moddims<br /><imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/		http://yourdomain.com/ 			lorem.jpg"widt...
17.05.2010<br />29<br />Performance. Webmontag.<br />Lazy-loadimages<br />
Lazy-Loading von Bildern<br />Verschiedene JavaScript-Libraries:<br />17.05.2010<br />Performance. Webmontag.<br />30<br /...
ImageLoader (YUI)
Sonar (AOL, standalone)</li></li></ul><li>17.05.2010<br />31<br />Performance. Webmontag.<br />@font-face für Icons<br />
@font-face für Icons<br />Icons in Illustrator erstellen<br />In FontForge importieren<br />Verschiedene Font-Formate mitF...
Upcoming SlideShare
Loading in …5
×

Performance. Webmontag. Frankfurt.

6,669 views

Published on

Mein Vortrag zu Web Performance Optimization auf dem Webmontag Frankfurt am 17. Mai 2010.

Published in: Technology, Design
  • Ich habe jetzt Slide #4 in drei einzelne aufgeteilt, damit die Folie auch in der Slideshare-Ansicht ohne Animationen verständlich ist. Außerdem habe ich alle is.gd-URLs aufgelöst in die richtigen. Alle Links sind übrigens klickbar.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Performance. Webmontag. Frankfurt.

  1. 1. Webmontag. Frankfurt. Schneller. Nur 15 Minuten. WPO. Web Performance Optimierung. Namics.<br />Martin Kliehm. Senior Frontend Engineer.@kliehm. @namics.<br />17. Mai 2010<br />
  2. 2. Web Performance Optimierung seit 2006<br />17.05.2010<br />Performance. Webmontag.<br />2<br />
  3. 3. Performance:schnell & klein sein.<br />17.05.2010<br />3<br />Performance. Webmontag.<br />http://flic.kr/p/5jZ2nP<br />
  4. 4. Performance. Webmontag.<br />Komponenten einer Webseite:Ein großes deutsches Bankhaus<br />17.05.2010<br />4<br />http://webpagetest.org<br />
  5. 5. Performance. Webmontag.<br />Komponenten einer Webseite:Ein großes deutsches Bankhaus<br />17.05.2010<br />5<br />← Backend (HTML): 8,67%<br />DNS Lookup: 299 msBackend (HTML): 514 ms = 8,67%Frontend: 5402 ms = 91,12%<br />JavaScript:1717 ms<br />
  6. 6. Komponenten einer Webseite:Ein großes deutsches Bankhaus<br />17.05.2010<br />6<br />DNS Lookup: 299 msBackend (HTML): 514 ms = 8,67%Frontend: 5402 ms = 91,12%<br />JavaScript:1717 ms<br />JavaScript lädt sequentiell<br />Bilder:nur 2 – 4parallel<br />Gesamt: 5928 ms<br />Frontend: 91,12%<br />Performance. Webmontag.<br />
  7. 7. 5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder?<br />17.05.2010<br />7<br />Performance. Webmontag.<br />http://flic.kr/p/27sG2k<br />
  8. 8. Case Studies: Langsamer<br />100 ms. Verzögerung è− 1% Umsatz<br />400 ms. Verzögerung è− 0,59% Suchen pro User<br />400 ms. Verzögerung è5 – 9% weniger Traffic<br />2 sec. langsamer è− 4,3% Umsatz pro User<br />17.05.2010<br />Performance. Webmontag.<br />8<br />
  9. 9. Case Studies: Schneller<br />2,2 sec. schnellere Seite è+ 15,4% Downloads<br />− 30% Dateivolumen è+ 30% Kartenaufrufe<br />Eine einzige Optimierungsmaßnahme, gzipè + 13-25% schneller,50% Dateivolumen eingespart<br />5 sec. schnellere Shopseitenè+ 7-12% Conversion Rate, + 25% mehr Seitenaufrufe, 50% Server + Energiekosten gespart<br />17.05.2010<br />Performance. Webmontag.<br />9<br />
  10. 10. 17.05.2010<br />Performance. Webmontag.<br />10<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team<br />
  11. 11. 17.05.2010<br />Performance. Webmontag.<br />11<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team<br />
  12. 12. 17.05.2010<br />Performance. Webmontag.<br />12<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team<br />
  13. 13. 17.05.2010<br />Performance. Webmontag.<br />13<br />http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team<br />
  14. 14. Google Search Ranking<br />“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.”<br />Google Blog, April 2010<br />17.05.2010<br />Performance. Webmontag.<br />14<br />
  15. 15. Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics.<br />17.05.2010<br />15<br />Performance. Webmontag.<br />http://flic.kr/p/8VHFb<br />
  16. 16. Die (bekannten) 14 Regeln<br />17.05.2010<br />16<br />Performance. Webmontag.<br />
  17. 17. Die (bekannten) 14 Regeln<br />Gzip Components <br />Add an Expires Header<br />Reduce DNS Lookups <br />Avoid Redirects<br />Make Fewer HTTP Requests<br />Make JavaScript and CSS External<br />Minify JavaScript<br />Put CSS at the Top<br />Avoid CSS Expressions<br />Put Scripts at the Bottom<br />Remove DuplicateScripts<br />Use a Content Delivery Network (CDN)<br />Configure ETags<br />Make AJAX Cacheable<br />17.05.2010<br />Performance. Webmontag.<br />17<br />http://developer.yahoo.com/performance/rules.html<br />
  18. 18. Die (bekannten) 14 35 Regeln<br />FlushBufferEarly<br />UseGETforAjaxRequests<br />Postload Components<br />Preload Components<br />ReducetheNumberofDOM Elements<br />Split ComponentsAcross Domains<br />MinimizeNumberofiframes<br />Avoid404s<br />ReduceCookie Size<br />UseCookie-Free Domains for Components<br />MinimizeDOM Access<br />DevelopSmart Event Handlers<br />Choose<link> Over @import<br />AvoidFilters<br />OptimizeImages<br />OptimizeCSS Sprites<br />Do Not ScaleImages in HTML<br />Makefavicon.ico Small andCacheable<br />Keep Components Under25 KB<br />Pack Components Into a Multipart Document<br />AvoidEmpty Imagesrc<br />17.05.2010<br />Performance. Webmontag.<br />18<br />http://developer.yahoo.com/performance/rules.html<br />
  19. 19. 17.05.2010<br />19<br />Performance. Webmontag.<br />Neue (?) Ideen:Keine eigene Datei print.css<br />
  20. 20. <link type="text/css"media="print"src="print.css" /><br />17.05.2010<br />Performance. Webmontag.<br />20<br />@mediaprint { a { text-decoration: none; }}<br />ü<br />
  21. 21. 17.05.2010<br />21<br />Performance. Webmontag.<br />CSS background-images reduzieren mit data:URI<br />
  22. 22. #wrapper { background:url( bg.gif ); }<br />17.05.2010<br />Performance. Webmontag.<br />22<br />#wrapper { background:url( "data:image/png; base64,iVBORw0[…]" ); }<br />ü<br />http://software.hixie.ch/utilities/cgi/data/data<br />
  23. 23. Die Lösung: M(ultipart)HTML in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATORContent-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/<br />17.05.2010<br />Performance. Webmontag.<br />23<br />http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/<br />
  24. 24. Die Lösung: M(ultipart)HTML in der ie.css#wrapper { background:url( "mhtml:http://me.com/ie.css!bgimg1" );}<br />17.05.2010<br />Performance. Webmontag.<br />24<br />http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/<br />
  25. 25. 17.05.2010<br />25<br />Performance. Webmontag.<br />Apache-Module: modconcat, modjsmin, moddims<br />
  26. 26. Apache modconcat zum Aggregieren von CSS oder JavaScript<br /><script type="text/javascript"src="http://yourdomain.com/??script-1.js,script-2.js"></script><br />Verwendet den Cache Header derjüngstenDatei<br />17.05.2010<br />Performance. Webmontag.<br />26<br />http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/<br />
  27. 27. Apache modjsmin<br />$ apxs -c mod_jsmin.c<br />Loadmodulejsmin_modulemodules/mod_jsmin.so<br />17.05.2010<br />Performance. Webmontag.<br />27<br />http://code.google.com/p/modjsmin/<br />
  28. 28. Apache moddims<br /><imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/ http://yourdomain.com/ lorem.jpg"width="320" height="240" alt="Loremipsum" /><br />17.05.2010<br />Performance. Webmontag.<br />28<br />http://code.google.com/p/moddims/<br />
  29. 29. 17.05.2010<br />29<br />Performance. Webmontag.<br />Lazy-loadimages<br />
  30. 30. Lazy-Loading von Bildern<br />Verschiedene JavaScript-Libraries:<br />17.05.2010<br />Performance. Webmontag.<br />30<br /><ul><li>LazyLoad (jQuery)
  31. 31. ImageLoader (YUI)
  32. 32. Sonar (AOL, standalone)</li></li></ul><li>17.05.2010<br />31<br />Performance. Webmontag.<br />@font-face für Icons<br />
  33. 33. @font-face für Icons<br />Icons in Illustrator erstellen<br />In FontForge importieren<br />Verschiedene Font-Formate mitFontSquirrel generieren (TTF, WOFF, EOT, SVG)<br />@font-faceim CSS einbauen<br />Vorteile: skalierbar, Farbe frei wählbar, an Grundlinie ausgerichtet; Nachteil: einfarbig (Gradient mit CSS3?)<br />17.05.2010<br />Performance. Webmontag.<br />32<br />
  34. 34. Danke.<br />twitter: @kliehm<br />Folien: http://slideshare.net/kliehm/performancewmfra<br />Links: http://delicious.com/kliehm/performance<br />Kontakt: http://klie.hm/profile<br />Performance. Webmontag.<br />17.05.2010<br />33<br />

×