Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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...
Prochain SlideShare
Chargement dans…5
×

Performance. Webmontag. Frankfurt.

6 728 vues

Publié le

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

Publié dans : Technologie, 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.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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 />

×