Upgrade to Pro — share decks privately, control downloads, hide ads and more …

High Performance Websites

Tobias Baldauf
September 24, 2009

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.

Tobias Baldauf

September 24, 2009
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. High Performance Websites
    High Performance Websites
    1 / 22

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  22. Get Speedin'!
    Get Speedin'!
    22/ 22
    http://www.tobias-baldauf.de/
    [email protected]
    Danke für Eure
    Aufmerksamkeit!

    View full-size slide