Performance. Webmontag. Frankfurt.
•Download as PPTX, PDF•
14 likes•2,185 views
Mein Vortrag zu Web Performance Optimization auf dem Webmontag Frankfurt am 17. Mai 2010.
Recommended
Recommended
More Related Content
What's hot
Similar to Performance. Webmontag. Frankfurt.
Similar to Performance. Webmontag. Frankfurt. (20)
More from Martin Kliehm
More from Martin Kliehm (10)
Performance. Webmontag. Frankfurt.
- 1. Webmontag. Frankfurt. Schneller. Nur 15 Minuten. WPO. Web Performance Optimierung. Namics. Martin Kliehm. Senior Frontend Engineer.@kliehm. @namics. 17. Mai 2010
- 2. Web Performance Optimierung seit 2006 17.05.2010 Performance. Webmontag. 2
- 3. Performance:schnell & klein sein. 17.05.2010 3 Performance. Webmontag. http://flic.kr/p/5jZ2nP
- 4. Performance. Webmontag. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 4 http://webpagetest.org
- 5. Performance. Webmontag. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 5 ← Backend (HTML): 8,67% DNS Lookup: 299 msBackend (HTML): 514 ms = 8,67%Frontend: 5402 ms = 91,12% JavaScript:1717 ms
- 6. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 6 DNS Lookup: 299 msBackend (HTML): 514 ms = 8,67%Frontend: 5402 ms = 91,12% JavaScript:1717 ms JavaScript lädt sequentiell Bilder:nur 2 – 4parallel Gesamt: 5928 ms Frontend: 91,12% Performance. Webmontag.
- 7. 5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder? 17.05.2010 7 Performance. Webmontag. http://flic.kr/p/27sG2k
- 8. 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 17.05.2010 Performance. Webmontag. 8
- 9. 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 17.05.2010 Performance. Webmontag. 9
- 10. 17.05.2010 Performance. Webmontag. 10 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
- 11. 17.05.2010 Performance. Webmontag. 11 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
- 12. 17.05.2010 Performance. Webmontag. 12 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
- 13. 17.05.2010 Performance. Webmontag. 13 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
- 14. 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 17.05.2010 Performance. Webmontag. 14
- 15. Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics. 17.05.2010 15 Performance. Webmontag. http://flic.kr/p/8VHFb
- 16. Die (bekannten) 14 Regeln 17.05.2010 16 Performance. Webmontag.
- 17. Die (bekannten) 14 Regeln Gzip Components Add an Expires Header Reduce DNS Lookups Avoid Redirects Make Fewer HTTP Requests Make JavaScript and CSS External Minify JavaScript Put CSS at the Top Avoid CSS Expressions Put Scripts at the Bottom Remove DuplicateScripts Use a Content Delivery Network (CDN) Configure ETags Make AJAX Cacheable 17.05.2010 Performance. Webmontag. 17 http://developer.yahoo.com/performance/rules.html
- 18. Die (bekannten) 14 35 Regeln FlushBufferEarly UseGETforAjaxRequests Postload Components Preload Components ReducetheNumberofDOM Elements Split ComponentsAcross Domains MinimizeNumberofiframes Avoid404s ReduceCookie Size UseCookie-Free Domains for Components MinimizeDOM Access DevelopSmart Event Handlers Choose<link> Over @import AvoidFilters OptimizeImages OptimizeCSS Sprites Do Not ScaleImages in HTML Makefavicon.ico Small andCacheable Keep Components Under25 KB Pack Components Into a Multipart Document AvoidEmpty Imagesrc 17.05.2010 Performance. Webmontag. 18 http://developer.yahoo.com/performance/rules.html
- 19. 17.05.2010 19 Performance. Webmontag. Neue (?) Ideen:Keine eigene Datei print.css
- 20. <link type="text/css"media="print"src="print.css" /> 17.05.2010 Performance. Webmontag. 20 @mediaprint { a { text-decoration: none; }} ü
- 21. 17.05.2010 21 Performance. Webmontag. CSS background-images reduzieren mit data:URI
- 22. #wrapper { background:url( bg.gif ); } 17.05.2010 Performance. Webmontag. 22 #wrapper { background:url( "data:image/png; base64,iVBORw0[…]" ); } ü http://software.hixie.ch/utilities/cgi/data/data
- 23. Die Lösung: M(ultipart)HTML in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATORContent-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/ 17.05.2010 Performance. Webmontag. 23 http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
- 24. Die Lösung: M(ultipart)HTML in der ie.css#wrapper { background:url( "mhtml:http://me.com/ie.css!bgimg1" );} 17.05.2010 Performance. Webmontag. 24 http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
- 25. 17.05.2010 25 Performance. Webmontag. Apache-Module: modconcat, modjsmin, moddims
- 26. 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 derjüngstenDatei 17.05.2010 Performance. Webmontag. 26 http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
- 27. Apache modjsmin $ apxs -c mod_jsmin.c Loadmodulejsmin_modulemodules/mod_jsmin.so 17.05.2010 Performance. Webmontag. 27 http://code.google.com/p/modjsmin/
- 28. Apache moddims <imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/ http://yourdomain.com/ lorem.jpg"width="320" height="240" alt="Loremipsum" /> 17.05.2010 Performance. Webmontag. 28 http://code.google.com/p/moddims/
- 29. 17.05.2010 29 Performance. Webmontag. Lazy-loadimages
- 33. @font-face für Icons Icons in Illustrator erstellen In FontForge importieren Verschiedene Font-Formate mitFontSquirrel generieren (TTF, WOFF, EOT, SVG) @font-faceim CSS einbauen Vorteile: skalierbar, Farbe frei wählbar, an Grundlinie ausgerichtet; Nachteil: einfarbig (Gradient mit CSS3?) 17.05.2010 Performance. Webmontag. 32
- 34. Danke. twitter: @kliehm Folien: http://slideshare.net/kliehm/performancewmfra Links: http://delicious.com/kliehm/performance Kontakt: http://klie.hm/profile Performance. Webmontag. 17.05.2010 33
Editor's Notes
- „WPO“ ist das Akronym für Web Performance Optimierung, analog zu „SEO“ wird es in den nächsten Jahren eine eigene Industrie werden.
- TenniTheurer und Steve Souders begannen 2006 bei Yahoo!, die Performanz von Webseiten eingehender zu untersuchen. Entsprechend der Prämisse, dass man am Ende mehr profitiert, wenn man seine Erkenntnisse mit anderen teilt, publizierte Yahoo! diese Ergebnisse auf Konferenzen und Blogs noch im selben Jahr. Souders veröffentlichte in der Zwischenzeit zwei Bücher zum Thema und arbeitet heute bei Google. Bei Namics befassen wir uns mit WPO seit Sommer 2006.
- Studien von Yahoo! und Google haben ergeben, dass nur 10-20% der Ladezeit vom Server abhängig ist. Bis vor wenigen Jahren dachte man bei Geschwindigkeit ausschließlich an den Server. Tatsächlich werden aber 80-90% der Ladezeit im Frontend fällig. Darum ist Web Performance Optimierung (WPO) im Frontend effizienter.Zwei wichtige Schwachstellen sind JavaScript-Dateien und die schiere Anzahl von Dateien:JavaScript lädt sequentiell und blockiert sämtliche nachfolgenden Inhalte. Darum sollte es nicht im Kopf, sondern im Fuß einer Seite stehen.Zweitens können ältere Browser, vor allem der Internet Explorer, nur 2-4 Dateien parallel laden. Dateien bilden darum eine Schlange, die nur langsam abgearbeitet wird. Ziel ist es darum, durch Zusammenfassung von Dateien die Anzahl der HTTP-Requests zu reduzieren.
- Zusätzlich zur Seitenverzögerung hat man festgestellt, dass die Nutzer abgelenkter werden. 400 ms. mehr Ladezeit führten zu fast 800 ms. Verzögerung bis zur Interaktion mit der Seite!
- AOL hat die Anzahl der Page Views in Abhängigkeit von der Ladegeschwindigkeit untersucht. Wenig überraschend war die Anzahl der besuchten Seiten höher, wenn sie schnell luden. Interessanterweise ist der Kurvenverlauf bei den untersuchten Sites unterschiedlich. Offenbar spielt der Kontext bzw. Surf-Modus eine Rolle, wieviele Seiten ein User durchklickt.
- Es gibt verschiedene JavaScript-Libraries, die Bilder erst dann nachladen, wenn man sie braucht.