Performance. Webmontag. Frankfurt.
Als PPTX, PDF herunterladen14 gefällt mir2,193 aufrufe
Die Präsentation beim Webmontag Frankfurt am 17. Mai 2010 von Martin Kliehm beleuchtet die Bedeutung der Web Performance Optimierung (WPO) und deren Auswirkungen auf die Ladezeiten von Webseiten. Anhand von Fallstudien werden die negativen Effekte langsamer Ladezeiten auf Umsatz und Benutzererfahrung sowie erfolgreiche Optimierungsmaßnahmen vorgestellt, die signifikante Verbesserungen in der Performance bewirken können. Zu den empfohlenen Techniken gehören unter anderem die Minimierung von HTTP-Anfragen, die Nutzung von Gzip-Kompression und die Implementierung von Content Delivery Networks (CDNs).
![#wrapper { background:url( bg.gif ); }17.05.2010Performance. Webmontag.22#wrapper { background:url( "data:image/png; base64,iVBORw0[…]" ); }ühttp://software.hixie.ch/utilities/cgi/data/data](https://image.slidesharecdn.com/webmontag-performance-2010-100516152854-phpapp01/85/Performance-Webmontag-Frankfurt-22-320.jpg)
![Die Lösung: M(ultipart)HTML in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATORContent-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/17.05.2010Performance. Webmontag.23http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/](https://image.slidesharecdn.com/webmontag-performance-2010-100516152854-phpapp01/85/Performance-Webmontag-Frankfurt-23-320.jpg)
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 200617.05.2010Performance. Webmontag.2
- 3. Performance:schnell & klein sein.17.05.20103Performance. Webmontag.http://flic.kr/p/5jZ2nP
- 4. Performance. Webmontag.Komponenten einer Webseite:Ein großes deutsches Bankhaus17.05.20104http://webpagetest.org
- 5. Performance. Webmontag.Komponenten einer Webseite:Ein großes deutsches Bankhaus17.05.20105← 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 Bankhaus17.05.20106DNS Lookup: 299 msBackend (HTML): 514 ms = 8,67%Frontend: 5402 ms = 91,12%JavaScript:1717 msJavaScript lädt sequentiellBilder:nur 2 – 4parallelGesamt: 5928 msFrontend: 91,12%Performance. Webmontag.
- 7. 5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder?17.05.20107Performance. Webmontag.http://flic.kr/p/27sG2k
- 8. Case Studies: Langsamer100 ms. Verzögerung è− 1% Umsatz400 ms. Verzögerung è− 0,59% Suchen pro User400 ms. Verzögerung è5 – 9% weniger Traffic2 sec. langsamer è− 4,3% Umsatz pro User17.05.2010Performance. Webmontag.8
- 9. Case Studies: Schneller2,2 sec. schnellere Seite è+ 15,4% Downloads− 30% Dateivolumen è+ 30% KartenaufrufeEine einzige Optimierungsmaßnahme, gzipè + 13-25% schneller,50% Dateivolumen eingespart5 sec. schnellere Shopseitenè+ 7-12% Conversion Rate, + 25% mehr Seitenaufrufe, 50% Server + Energiekosten gespart17.05.2010Performance. Webmontag.9
- 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 201017.05.2010Performance. Webmontag.14
- 15. Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics.17.05.201015Performance. Webmontag.http://flic.kr/p/8VHFb
- 16. Die (bekannten) 14 Regeln17.05.201016Performance. Webmontag.
- 17. Die (bekannten) 14 RegelnGzip Components Add an Expires HeaderReduce DNS Lookups Avoid RedirectsMake Fewer HTTP RequestsMake JavaScript and CSS ExternalMinify JavaScriptPut CSS at the TopAvoid CSS ExpressionsPut Scripts at the BottomRemove DuplicateScriptsUse a Content Delivery Network (CDN)Configure ETagsMake AJAX Cacheable17.05.2010Performance. Webmontag.17http://developer.yahoo.com/performance/rules.html
- 18. Die (bekannten) 14 35 RegelnFlushBufferEarlyUseGETforAjaxRequestsPostload ComponentsPreload ComponentsReducetheNumberofDOM ElementsSplit ComponentsAcross DomainsMinimizeNumberofiframesAvoid404sReduceCookie SizeUseCookie-Free Domains for ComponentsMinimizeDOM AccessDevelopSmart Event HandlersChoose<link> Over @importAvoidFiltersOptimizeImagesOptimizeCSS SpritesDo Not ScaleImages in HTMLMakefavicon.ico Small andCacheableKeep Components Under25 KBPack Components Into a Multipart DocumentAvoidEmpty Imagesrc17.05.2010Performance. Webmontag.18http://developer.yahoo.com/performance/rules.html
- 19. 17.05.201019Performance. Webmontag.Neue (?) Ideen:Keine eigene Datei print.css
- 20. <link type="text/css"media="print"src="print.css" />17.05.2010Performance. Webmontag.20@mediaprint { a { text-decoration: none; }}ü
- 21. 17.05.201021Performance. Webmontag.CSS background-images reduzieren mit data:URI
- 22. #wrapper { background:url( bg.gif ); }17.05.2010Performance. 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.2010Performance. Webmontag.23http://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.2010Performance. Webmontag.24http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
- 25. 17.05.201025Performance. 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üngstenDatei17.05.2010Performance. Webmontag.26http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
- 27. Apache modjsmin$ apxs -c mod_jsmin.cLoadmodulejsmin_modulemodules/mod_jsmin.so17.05.2010Performance. Webmontag.27http://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.2010Performance. Webmontag.28http://code.google.com/p/moddims/
- 30. Lazy-Loading von BildernVerschiedene JavaScript-Libraries:17.05.2010Performance. Webmontag.30LazyLoad (jQuery)
- 32. Sonar (AOL, standalone)17.05.201031Performance. Webmontag.@font-face für Icons
- 33. @font-face für IconsIcons in Illustrator erstellenIn FontForge importierenVerschiedene Font-Formate mitFontSquirrel generieren (TTF, WOFF, EOT, SVG)@font-faceim CSS einbauenVorteile: skalierbar, Farbe frei wählbar, an Grundlinie ausgerichtet; Nachteil: einfarbig (Gradient mit CSS3?)17.05.2010Performance. Webmontag.32
Hinweis der Redaktion
- #2: „WPO“ ist das Akronym für Web Performance Optimierung, analog zu „SEO“ wird es in den nächsten Jahren eine eigene Industrie werden.
- #3: 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.
- #5: 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.
- #9: 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!
- #11: 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.
- #31: Es gibt verschiedene JavaScript-Libraries, die Bilder erst dann nachladen, wenn man sie braucht.