Your SlideShare is downloading. ×
0
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Performance. Webmontag. Frankfurt.

5,944

Published on

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

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

Published in: Technology, Design
1 Comment
15 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
5,944
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
108
Comments
1
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • „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.
  • Transcript

    • 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
    • 30. Lazy-Loading von Bildern
      Verschiedene JavaScript-Libraries:
      17.05.2010
      Performance. Webmontag.
      30
      • LazyLoad (jQuery)
      • 31. ImageLoader (YUI)
      • 32. Sonar (AOL, standalone)
    • 17.05.2010
      31
      Performance. Webmontag.
      @font-face für Icons
    • 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

    ×