$30 off During Our Annual Pro Sale. View Details »

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

  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
  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
  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
  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:
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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 <script defer src="http://www.foobar23.org/js/scripts.js" type="text/javascript"></script></body> "defer" Von Kopf zum Fuß JS minifyen Apache-Modul "modjsmin" AJAX
  17. WPO: Grafiken WPO: Grafiken 17 / 22 Bildoptimierungen: 292 KB

    40 KB
  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
  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
  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
  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
  22. Get Speedin'! Get Speedin'! 22/ 22 http://www.tobias-baldauf.de/ kontakt@tobias-baldauf.de Danke für

    Eure Aufmerksamkeit!