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).

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

10. 17.05.2010Performance. Webmontag.10http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team

11. 17.05.2010Performance. Webmontag.11http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team

12. 17.05.2010Performance. Webmontag.12http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team

13. 17.05.2010Performance. Webmontag.13http://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 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/

29. 17.05.201029Performance. Webmontag.Lazy-loadimages

30. Lazy-Loading von BildernVerschiedene JavaScript-Libraries:17.05.2010Performance. Webmontag.30LazyLoad (jQuery)

31. ImageLoader (YUI)

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