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
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!