High Performance Websites

My first talk on high performance websites, given back in 2009 at Chaos Computer Club Cologne, Germany.

I also gave this talk at smaller venues later.

Transcript

1. High Performance Websites
   High Performance Websites
   1 / 22
   

   View Slide

2. Harte Fakten: Website-Wachstum
   Harte Fakten: Website-Wachstum
   2 / 22
   Website-Wachstum 2003 - 2009:
   Quellen:
   http://video.yahoo.com/watch/4156174/11192533
   http://www.websiteoptimization.com/speed/tweak/average-web-page/
   Top 1000 Websites laut Alexa
   

   View Slide

3. Harte Fakten: Internet-Slowdown
   Harte Fakten: Internet-Slowdown
   3 / 22
   Weltweiter Slowdown:
   Quelle: http://www.akamai.com/stateoftheinternet/
   Verlangsamung um ~11%
   Mehr Multimedia
   Wenig neue Infrastruktur
   

   View Slide

4. Harte Fakten: Mobile
   Harte Fakten: Mobile
   4 / 22
   Mobile Endgeräte / UMTS:
   Variierende Bandbreite, schwache CPUs
   Quelle: http://www.bitkom.org/de/presse/56204_50446.aspx
   ~ 1 Mio. aktiver UMTS-Benutzer
   

   View Slide

5. Amazon, Yahoo, Google & Bing, ShopZilla
   Amazon, Yahoo, Google & Bing, ShopZilla
   5 / 22
   +100ms = -1% Einkäufe
   Quelle: http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
   +400ms = -9% User (FullPageLoad)
   +500ms = -20% Suchanfragen
   +
   Quelle: http://www.slideshare.net/stoyan/yslow-20-presentation
   Quelle: http://assets.en.oreilly.com/1/event/29/The%20User%20and%20Business%20Impact%20of
   %20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking%20in%20Web
   %20Search%20Presentation.pptx
   -3.5 Sek. = +12% Umsatz
   Quelle: http://assets.en.oreilly.com/1/event/29/Shopzilla%27s%20Site%20Redo%20-%20You
   %20Get%20What%20You%20Measure%20Presentation.ppt
   Big Business:
   

   View Slide

6. Netflix: Kosten senken
   Netflix: Kosten senken
   6 / 22
   Optimierungen bei Netflix:
   Video-Streaming Service
   Mehr als 7 Mio. Benutzer
   Nach WPO: ~50% weniger Outbound Traffic
   Quelle: http://assets.en.oreilly.com/1/event/7/Improving%20Netflix%20Performance%20Presentation.pdf
   

   View Slide

7. Above the Fold
   Above the Fold
   7 / 22
   Sichtbarer Bereich:
   Quellen:
   http://assets.en.oreilly.com/1/event/29/The%20User%20and%20Business%20Impact%20of%20Server%20Delays,
   %20Additional%20Bytes,%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx
   http://blog.clicktale.com/?p=19
   !
   78% aller User scrollen nicht bis
   zum Website-Ende
   TimeToClick: 10% schneller
   Userwahrnehmung: 18% schneller
   

   View Slide

8. Fazit
   Fazit
   8 / 22
   Quellen:
   http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html
   http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
   Bessere Page Responsiveness:
   Mehr Benutzer
   Längere Verweilzeiten
   Mehr Vertrauen
   Geringere Betriebskosten
   

   View Slide

9. Web Performance Optimization (WPO): GZip
   Web Performance Optimization (WPO): GZip
   9 / 22
   GZipping von:
   Quelle: http://assets.en.oreilly.com/1/event/29/Beyond%20Gzipping%20Presentation.pdf
   GZipping HowTo: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
   Testcases GZippiing ON / OFF: http://stevesouders.com/hpws/rule-gzip.php
   Messung an den Top 10 Websites laut Alexa
   HTML
   Javascript
   CSS
   XML (RSS/Atom)
   = Bis zu 50% Zeitgewinn bis FullPageLoad
   

   View Slide

10. WPO: HTTP-Requests
    WPO: HTTP-Requests
    10/ 22
    HTTP-Requests reduzieren:
    Quellen:
    http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server
    http://assets.en.oreilly.com/1/event/29/Website%20Performance%20Analysis%20Presentation.ppt
    http://developer.yahoo.com/performance/rules.html#num_http
    Reminder:
    > 60 Objekte / Apache = 256
    Browser-Limits:
    FF2 & IE6/7 = 2
    Safari = 4
    FF3 / IE8 / Chrome = 6
    Opera = 8
    JS / CSS vereinen, aber extern lassen
    Downgrade auf HTTP1.0 für Static Content
    

    View Slide

11. WPO: Expire-Header
    WPO: Expire-Header
    11 / 22
    Expire Header setzen:
    Quelle: http://developer.yahoo.com/performance/rules.html#expires
    Für Static Content: Expire Header
    User-Cache = Performance Freebies
    Dynamic Content reloaden
    Versioning-Benamungsschema
    

    View Slide

12. WPO: Load Sharing
    WPO: Load Sharing
    12 / 22
    Mehrere Domains / Server:
    Quellen:
    http://assets.en.oreilly.com/1/event/29/Website%20Performance%20Analysis%20Presentation.ppt
    http://assets.en.oreilly.com/1/event/29/Getting%20to%20Second%20Base%20With%20Your%20CDN%20Presentation.ppt
    http://meta.wikimedia.org/wiki/Wikimedia_servers
    http://code.google.com/intl/de-DE/apis/ajaxlibs/
    Domain für Images (HTTP1.0)
    Domain für Static Content
    JS, CSS, HTML (HTTP1.0)
    Domain für Dynamic Content (HTTP1.1)
    Think Big: Content Delivery Network (CDN)
    Google AJAX Libraries API
    

    View Slide

13. WPO: ETags
    WPO: ETags
    13/ 22
    Entity Tags vs. CDN:
    Cache = Server (unique ID)?
    TRUE: 304 / FALSE: 200
    > 1 Server: 200 trotz Cache
    ETags deaktiveren / Fallback: Last-Modified
    Quellen:
    http://en.wikipedia.org/wiki/HTTP_ETag
    http://developer.yahoo.com/performance/rules.html#etags
    

    View Slide

14. WPO: HTML
    WPO: HTML
    14 / 22
    HTML-Grundgerüst:
    Quellen:
    http://www.slideshare.net/stubbornella/designing-fast-websites-presentation
    http://ejohn.org/blog/html-5-parsing/
    Lego-Klötze
    HTML5: 3-5% schneller durch
    standardisiertes Parsen
    Grids lieben lernen
    Wahrscheinlichste Interaktions-
    elemente nach oben
    

    View Slide

15. WPO: CSS
    WPO: CSS
    15/ 22
    CSS-Performance:
    Quellen:
    http://stevesouders.com/tests/atimport/import-import.php
    http://shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942
    http://wiki.github.com/stubbornella/oocss
    expression(document.body.clientWidth > 960)?"960px" : "auto";
    @import: 2x vermeiden
    Good: # / .
    Evil: * / > / CSS3 /
    JS-Expressions
    Modular: Classes & OOCSS
    CSS kombinieren & minifyen
    

    View Slide

16. WPO: Javascript
    WPO: Javascript
    16/ 22
    Besseres Javascript:
    Quellen:
    http://www.websiteoptimization.com/speed/tweak/defer/
    http://assets.en.oreilly.com/1/event/29/Website%20Performance%20Analysis%20Presentation.ppt
    type="text/javascript">

    View Slide

17. WPO: Grafiken
    WPO: Grafiken
    17 / 22
    Bildoptimierungen:
    292 KB 40 KB
    

    View Slide

18. WPO: Grafiken
    WPO: Grafiken
    18/ 22
    Bildoptimierungen:
    Quellen:
    http://assets.en.oreilly.com/1/event/29/The%20Secret%20Weapons%20of%20the%20AOL%20Optimization%20Team%20
    Presentation.pdf
    http://www.stevesouders.com/spriteme/
    Großes Potential
    Manuell: PS / GIMP
    Halbautomatisch: PunyPNG
    Serverseitig mit Caching: moddims, optipng
    CSS-Sprites
    

    View Slide

19. WPO: Flushing
    WPO: Flushing
    19/ 22
    Frühes Flushing / Chunking:
    Quelle: http://www.stevesouders.com/blog/2009/05/18/flushing-the-document-early/
    Static Content früher ausliefern
    Queries Zeit verschaffen
    Erhöhte Responsiveness
    Progressives Rendering
    

    View Slide

20. WPO: Repaints & Reflows
    WPO: Repaints & Reflows
    20/ 22
    Repaint- / Reflow-Events:
    Quelle: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
    http://www.youtube.com/watch?v=AKZ2fj8155I
    Repaint: Visibility-Check
    'outline', 'visibility', 'background-color'
    WindowSize, Fonts, display, padding, margin, position, top, left
    +/- Stylesheet, DOM-Changes ('innerHTML','appendChild'), AJAX,
    Bild oder Video ohne Größenangaben
    Keine Tabellen
    Reflow: Position-Check
    JS nicht für Inline-Styles
    Animierte Objekte nur position:absolute/fixed
    

    View Slide

21. Tools of the Trade
    Tools of the Trade
    21 / 22
    Schweizer Taschenmesser der WPO
    http://developer.yahoo.com/yslow/
    Einfach CSS-Sprites generieren
    http://www.stevesouders.com/spriteme/
    Repaints und Reflows analysieren
    https://addons.mozilla.org/en-US/firefox/addon/9620 und http://ejohn.org/blog/browser-paint-events/
    YSlow
    SpriteMe
    Paint Events
    Fähigkeiten verschiedenster UAs erfahren
    http://www.browserscope.org/
    Browserscope
    

    View Slide

22. Get Speedin'!
    Get Speedin'!
    22/ 22
    http://www.tobias-baldauf.de/
    kontakt@tobias-baldauf.de
    Danke für Eure
    Aufmerksamkeit!
    

    View Slide