• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Web Performance Optimierung (WPO)

on

  • 3,592 views

Mein Vortrag auf der WebTech-Konferenz am 12.10.2010 in Mainz und der SEO-Konferenz am 13.10.2010 in Zürich.

Mein Vortrag auf der WebTech-Konferenz am 12.10.2010 in Mainz und der SEO-Konferenz am 13.10.2010 in Zürich.

Statistics

Views

Total Views
3,592
Views on SlideShare
3,570
Embed Views
22

Actions

Likes
3
Downloads
47
Comments
1

3 Embeds 22

http://dokuwiki.eifel-online.com 20
http://lanyrd.com 1
http://soup.sindre.at 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • „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.
  • Ziel von Web Performance Optimierung ist vor allem, schnell und klein zu sein. Wenige, kleine Server-Requests.
  • 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.
  • In diesem Beispiel einer deutschen Bank ist zu sehen, dass sich die Ladezeit der Seite in zwei Teile aufteilt: das Backend macht in diesem Fall inkl. DNS-Lookup 813 ms oder 13,71% aus, das Frontend über 5,4 Sekunden, das sind 91,13% (es gibt Überlappungen).
  • Zwei kritische Punkte hier sind das JavaScript und die Bilder: JavaScript lädt nur sequentiell, nicht parallel, und blockiert hier den Seitenaufbau um 1,7 Sekunden. Bilder laden parallel, aber in der Regel nur 2-4 gleichzeitig, weswegen selbst kleine Dateien „Schlange stehen“ müssen, bis sie an der Reihe sind, und für jedes muss eine eigene Serverabfrage gemacht werden.
  • Jetzt könnte man meinen, 5,9 Sekunden Ladezeit wären doch nicht so übel. Tatsache ist aber, dass Kunden selbst Veränderungen im Bereich von wenigen hundert Millisekunden quittieren:
  • 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. Übereinstimmend lässt sich sagen: schnellere Websites laden zum Browsen, zum Herumstöbern ein. Man kann mehr Informationen an den User vermitteln.
  • Besondere Bedeutung hat WPO noch bekommen, als im April 2010 Google verkündete, dass die Seitengeschwindigkeit nun auch ein Ranking-Parameter sein wird.
  • Zusammenfassend lässt sich sagen: alle sind glücklich. Die Seiten laden schneller, verbrauchen weniger Serverressourcen und damit weniger Strom, die Kunden werden stöberfreudiger, und der Umsatz steigt. Nebenbei ist es grüner, und wir haben wieder einmal die Welt gerettet – was will man mehr?
  • Die 14 in „High Performance Websites“ veröffentlichten Regeln.
  • Die Website der WebTech-Konferenz bringt es auf stolzer 800 KB mit 101 HTTP-Requests, wovon die meisten auf Profilbilder der Referenten entfallen. Das lässt sich nicht vermeiden. Aber die 10 CSS-Bilder ließen sich reduzieren, die 8 CSS-Dateien zu einer einzigen zusammenfassen und die JavaScript-Dateien ebenso.
  • Auffällig bei der Websites des Internet Briefings sind die 17 JavaScript-Dateien, die mit 348 KB auch sehr groß sind. Hier lässt sich viel optimieren. 29 Bilder werden vermutlicht nicht gebraucht, und die 9 CSS-Dateien lassen sich serverseitig aggregieren. Ebenfalls auffällig ist, dass über 200 KB nicht gecacht werden.
  • Darüberhinaus gibt es noch viele weitere Tools zur Aggregation: per Ant-Script,
  • … mit JSMin per PHP,
  • … oder mit JAWR in Java.
  • … oder, wenn es nur gelegentlich oder kurz vor dem finalen Deployment erforderlich ist, mit der Minifizierungsfunktion in Google Page Speed.
  • Google Page Speed.
  • Auf die im zweiten Buch besprochenen neuen Regeln möchte ich nur stichprobenhaft eingehen, denn sie würden den Umfang dieses Vortrags sprengen. Im Detail sind sie bei Yahoo! Im Web nachzulesen.
  • Julien Lecomte hat die Performance von 3rd Party Content untersucht. Während Google Analytics sehr gut mit Ressourcen umgeht, sind andere Skripte sehr groß.
  • PngOptimizer
  • Yahoo! SmushIt
  • Es gibt verschiedene JavaScript-Libraries, die Bilder erst dann nachladen, wenn man sie braucht.

Web Performance Optimierung (WPO) Web Performance Optimierung (WPO) Presentation Transcript

  • WebTech Mainz. Schneller. Kleiner. WPO.Web Performance Optimierung.
    Martin Kliehm. Senior Frontend Engineer.@kliehm. @namics.
    12. Oktober 2010
    http://flic.kr/p/5bgGb9
  • Web Performance Optimierung seit 2006
    12.10.2010
    Performance. WebTech.
    2
  • Performance:schnell & klein.
    12.10.2010
    3
    Performance. WebTech.
    http://flic.kr/p/5jZ2nP
  • Performance. WebTech.
    Komponenten einer Webseite:Ein großes deutsches Bankhaus
    12.10.2010
    4
    http://webpagetest.org
  • Performance. WebTech.
    Komponenten einer Webseite:Ein großes deutsches Bankhaus
    12.10.2010
    5
    ← Backend (HTML): 8,67%
    DNS Lookup: 299 msBackend (HTML):+ 514 ms = 13,71%Frontend: 5402 ms = 91,12%
  • Komponenten einer Webseite:Ein großes deutsches Bankhaus
    17.05.2010
    6
    DNS Lookup: 299 msBackend (HTML):+ 514 ms = 13,71%Frontend: 5402 ms = 91,12%
    JavaScript:1717 ms
    JavaScript lädt sequentiell
    Bilder:nur 2 – 4parallel
    Gesamt: 5928 ms
    Frontend: 91,12%
    Performance. Webmontag.
  • 5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder?
    12.10.2010
    7
    Performance. WebTech.
    http://flic.kr/p/27sG2k
  • 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
    12.10.2010
    Performance. WebTech.
    8
  • 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
    12.10.2010
    Performance. WebTech.
    9
  • 12.10.2010
    Performance. WebTech.
    10
    http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 12.10.2010
    Performance. WebTech.
    11
    http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 12.10.2010
    Performance. WebTech.
    12
    http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 12.10.2010
    Performance. WebTech.
    13
    http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 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
    12.10.2010
    Performance. WebTech.
    14
  • Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics.
    12.10.2010
    15
    Performance. WebTech.
    http://flic.kr/p/8VHFb
  • Die (bekannten) 14 Regeln
    12.10.2010
    16
    Performance. WebTech.
  • 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 & CSS
    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
    12.10.2010
    Performance. WebTech.
    17
    http://developer.yahoo.com/performance/rules.html
  • Tools zum Testen
    12.10.2010
    Performance. WebTech.
    18
    • Yslow
    • Google Page Speed
    • jsPerf
    • HttpWatch
    • WebPagetest
    • Boomerang
  • 1. Gzip Components
    <IfModulemod_deflate.c>
    # Don'tcompressimages
    AddOutputFilterByType DEFLATEtext/htmltext/csstext/xmlapplication/xhtml+xmlapplication/x-javascripttext/x-jstext/javascripttext/jsapplication/javascript
    </IfModule>
    12.10.2010
    Performance. WebTech.
    19
    http://developer.yahoo.com/performance/rules.html#gzip
  • 2. Add an Expires Header
    <IfModulemod_expires.c>
    ExpiresActive On
    ExpiresByTypeimage/jpg "access plus 1 month„
    ExpiresByTypeimage/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByTypeimage/png "access plus 1 month"
    ExpiresByTypeimage/ico "access plus 1 month"
    ExpiresByTypeimage/icon "access plus 1 month"
    ExpiresByTypeimage/x-icon "access plus 1 month"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByTypetext/javascript "access plus 1 month"
    ExpiresByTypeapplication/javascript "access plus 1 month"
    ExpiresByTypeapplication/x-javascript "access plus 1 month"
    </IfModule>
    12.10.2010
    Performance. WebTech.
    20
    http://developer.yahoo.com/performance/rules.html#expires
  • 3. Reduce DNS Lookups
    • Ein DNS Lookup dauert ca. 20-120 ms.
    • DNS Cache:
    • Internet Explorer: 30 min.
    • Firefox: 1 min.
    • Parallele Downloads über verschiedene Domains sind schneller
    • Kompromiss: 2-4 Domains
    12.10.2010
    Performance. WebTech.
    21
    http://developer.yahoo.com/performance/rules.html#dns_lookups
  • 4. Avoid Redirects
    • Sie verzögern den Aufbau der Seite
    • Sie werden nicht gecacht
    • Best Practice: 301 oder 302
    • Vorsicht: fehlender Endslash erzeugt Redirect !
    12.10.2010
    Performance. WebTech.
    22
    http://developer.yahoo.com/performance/rules.html#redirects
  • 5. MakeFewer HTTP Requests
    • JavaScript- bzw. CSS-Dateien zusammenfügen
    • CSS Sprites
    12.10.2010
    Performance. WebTech.
    23
    http://developer.yahoo.com/performance/rules.html#num_http
  • 12.10.2010
    Performance. WebTech.
    24
    http://goo.gl/Zhs9
  • http://goo.gl/Zhs9
    12.10.2010
    Performance. WebTech.
    25
  • 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
    12.10.2010
    Performance. WebTech.
    26
    http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
  • 12.10.2010
    Performance. WebTech.
    27
    http://www.julienlecomte.net/blog/2007/09/16/
  • 12.10.2010
    Performance. WebTech.
    28
    http://www.ejeliot.com/blog/73
  • 12.10.2010
    Performance. WebTech.
    29
    https://jawr.dev.java.net/
  • 6. Make JavaScript and CSS External
    • Damit die Dateien gecacht werden können!
    • Bonus-Tipp: Frameworks von Google Code laden
    12.10.2010
    Performance. WebTech.
    30
    http://developer.yahoo.com/performance/rules.html#external
  • 7. Minify JavaScript: Apache modjsmin
    $ apxs -c mod_jsmin.c
    Loadmodulejsmin_modulemodules/mod_jsmin.so
    12.10.2010
    Performance. WebTech.
    31
    http://code.google.com/p/modjsmin/
  • 12.10.2010
    Performance. WebTech.
    32
    http://goo.gl/NTKi
  • 12.10.2010
    Performance. WebTech.
    33
    http://goo.gl/NTKi
  • 8. Put CSS atthe Top
    • Damit kann ein Browser die einzelnen Seitenelemente schon darstellen
    • Vorsicht: IE6 Conditional Comment blockiert IE8 für 150 ms.
    12.10.2010
    Performance. WebTech.
    34
    http://goo.gl/gjYs
    http://developer.yahoo.com/performance/rules.html#css_top
  • 9. Avoid CSS Expressions in IE
    background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
    Expressions sindteuer, siewerdenmehrere 10.000 mal ausgeführt
    12.10.2010
    Performance. WebTech.
    35
    http://developer.yahoo.com/performance/rules.html#css_expressions
  • 10. Put Scripts attheBottom
    • denn sie laden nur nacheinander
    • sie blockieren den restlichen Inhalt
    12.10.2010
    Performance. WebTech.
    36
    http://developer.yahoo.com/performance/rules.html#js_bottom
  • Ausnahme: Non-blocking Scripts
    varscript = document.createElement("script");script.type = "text/javascript";script.src = "file.js";document.body.appendChild(script);
    <script type="text/javascript"asyncsrc="foo.js"></script>
    12.10.2010
    Performance. WebTech.
    37
    http://goo.gl/o453
  • 11. Remove Duplicate Scripts
    • kommt öfters vor als man denkt
    • insbesondere Libraries wie jQuery werden oft mehrfach eingebunden
    • Internet Explorer cacht sie nicht: 2 Requests
    • verbraucht clientseitige Kapazitäten zum Verarbeiten
    12.10.2010
    Performance. WebTech.
    38
    http://developer.yahoo.com/performance/rules.html#js_dupes
  • 12. Use a Content Delivery Network (CDN)
    • Für internationale Websites essentiell
    12.10.2010
    Performance. WebTech.
    39
    http://developer.yahoo.com/performance/rules.html#cdn
  • 13. ConfigureETags
    FileETagnone
    12.10.2010
    Performance. WebTech.
    40
    http://developer.yahoo.com/performance/rules.html#etags
  • 14. Make AJAX cacheable
    • mit einem Expires Header
    12.10.2010
    Performance. WebTech.
    41
    http://developer.yahoo.com/performance/rules.html#cacheajax
  • 12.10.2010
    Performance. WebTech.
    42
    http://youtu.be/nCgQDjiotG0
  • 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
    12.10.2010
    Performance. WebTech.
    43
    http://developer.yahoo.com/performance/rules.html
  • Flushthebufferearly
    </head>
    <?phpflush(); ?>
    <body>
    12.10.2010
    Performance. WebTech.
    44
    http://developer.yahoo.com/performance/rules.html#flush
  • Minimize DOM Access
    • Gehe von einer ID aus
    • $('#idelm') statt $('#id .class')
    • Elemente in Variablencachen
    • MehrereElementezusammendem DOM-Baum hinzufügen(Document reflow minimieren)
    • Event Delegation (Bubbling)
    • Vorsichtbei Loops im IE!
    12.10.2010
    Performance. WebTech.
    45
    http://developer.yahoo.com/performance/rules.html#dom_access
    http://goo.gl/Iu57
  • Minimizethenumberofiframes
    <iframe> pros:
    • Hilftbeilangsamen Third-Party-Contentwie Buttons und Bannern
    • Security Sandbox
    • Skriptewerden parallel geladen
    <iframe> cons:
    • Teuer, selbstwennsie leer sind
    • Blockiert den onload event
    • Nicht-Semantisch
    12.10.2010
    Performance. WebTech.
    46
    http://www.slideshare.net/julien.lecomte/
  • 12.10.2010
    47
    Performance. WebTech.
    Vorsicht vor 3rd Party Content
  • 12.10.2010
    Performance. WebTech.
    48
    http://www.julienlecomte.net/blog/2007/09/16/
  • 12.10.2010
    49
    Performance. WebTech.
    Bilder optimieren
  • Apache moddims
    <imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/ http://yourdomain.com/ lorem.jpg"width="320" height="240" alt="Loremipsum" />
    12.10.2010
    Performance. WebTech.
    50
    http://code.google.com/p/moddims/
  • 12.10.2010
    Performance. WebTech.
    51
    http://psydk.org/PngOptimizer.php
  • 12.10.2010
    Performance. WebTech.
    52
    http://developer.yahoo.com/yslow/smushit/
  • 12.10.2010
    53
    Performance. WebTech.
    Lazy-loadimages
  • Lazy-Loading von Bildern
    Verschiedene JavaScript-Libraries:
    12.10.2010
    Performance. WebTech.
    54
    • LazyLoad (jQuery)
    • ImageLoader (YUI)
    • Sonar (AOL, standalone)
  • 12.10.2010
    55
    Performance. WebTech.
    Neue (?) Ideen:@font-face für Icons
  • @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?)
    12.10.2010
    Performance. WebTech.
    56
  • 12.10.2010
    57
    Performance. WebTech.
    Keine eigene Datei print.css(auch keine iphone.css)
  • <link type="text/css"media="print"src="print.css" />
    12.10.2010
    Performance. WebTech.
    58
    @mediaprint { a { text-decoration: none; }}
    ü
  • 12.10.2010
    59
    Performance. WebTech.
    CSS background-images reduzieren mit data:URI
  • #wrapper { background:url( bg.gif ); }
    12.10.2010
    Performance. WebTech.
    60
    #wrapper { background:url( "data:image/png; base64,iVBORw0[…]" ); }
    ü
    http://software.hixie.ch/utilities/cgi/data/data
  • Die Lösung: MHTML in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATOR--Content-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/
    12.10.2010
    Performance. WebTech.
    61
    http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
    http://www.phpied.com/the-proper-mhtml-syntax/
  • Die Lösung: M(ultipart)HTML in der ie.css#wrapper { background:url( "mhtml:http://me.com/ ie.css!bgimg1" );}
    12.10.2010
    Performance. WebTech.
    62
    http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
  • Danke.
    twitter: @kliehm
    Links: http://delicious.com/kliehm/performance
    Social: http://klie.hm/profile
    Performance. WebTech.
    12.10.2010
    63