High Performance Websites1/ 18 MBit

Größe: px

Ab Seite anzeigen:

Download "High Performance Websites1/ 18 MBit"

Jasmin Hoch
vor 10 Jahren
Abrufe

1 High Performance Websites1 / 18 MBit

2 Harte Fakten 2 Website-Wachstum: Top 1000 Websites laut Alexa Quellen:

yahoo.com/watch/4156174/11192533 http://www.

3 Amazon, Yahoo, Google, Bing3 / ms = -1% Einkäufe Quelle: ms = -9% User (FullPageLoad) Quelle: ms = -20% Suchanfragen Quelle: %20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking%20in%20Web %20Search%20Presentation.pptx

net/stoyan/yslow-20-presentation + +500ms = -20% Suchanfragen Quelle: http://assets.en.oreilly.

4 Shopzilla 4 Vorher / Nachher-Show bei Shopzilla Ladezeit (Sek.) Vorher / Nachher Conversion-Rate (%) Vorher / Nachher Quelle: %20Measure%20Presentation.ppt

5 Fazit 5 1. Bessere PageResponseTime = Mehr Traffic Siehe 2. Bessere PageResponseTime = Mehr Vertrauen Siehe

oreilly.com/2009/06/bing-and-google-agree-slow-pag.html 2.

6 Optimierung: GZip 6 GZipping von: - HTML - Javascript - CSS - XML (RSS/Atom) = Bis zu 50% Zeitgewinn bis FullPageLoad Messung an den Top 10 Websites laut Alexa Quelle: GZipping HowTo: Testcases GZippiing ON / OFF:

com/1/event/29/beyond%20gzipping%20presentation.pdf GZipping HowTo: http://betterexplained.

7 Optimierung: HTTP-Requests7 / 18 HTTP-Requests reduzieren: - Reminder: mehr als 60 Objekte - Browser-Limits: FF2 & IE6+7 = 2, Safari = 4, FF3 & IE8 & Chrome = 6, Opera = 8 - Unveränderter Apache-Webserver = JS / CSS Files vereinen, aber extern lassen - Downgrade auf HTTP1.0 für Static Content Quellen:

Downgrade auf HTTP1.0 für Static Content Quellen: http://kb.mozillazine.org/network.http.max-persistent-connections-per-server http://assets.

8 Optimierung: Expire-Header8 / 18 Expire Header setzen: - Für Static Content: Expire Header weit in Zukunft; nur Dynamic Content reloaden - User-Cache = Performance Freebies Quelle:

Dynamic Content reloaden - User-Cache = Performance

9 Optimierung: CDN 9 Content Delivery Network: - 1 Domain für Static Content JS, CSS, HTML (HTTP1.0) - 1 Domain für Images (HTTP1.0) - 1 Domain für Dynamic Content (HTTP1.1) Quellen: %20With%20Your%20CDN%20Presentation.ppt %20Presentation.ppt

10 Optimierung: Above the Fold10 Above the Fold (AtF): - Möglichst schnell befüllen! - Userwahrnehmung: 18% schneller - TimeToClick: 10% schneller! 78% aller User scrollen nicht bis zum Website-Ende Quellen: %20of%20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking %20in%20Web%20Search%20Presentation.pptx

78% aller User scrollen nicht bis zum Website-Ende Quellen: http://assets.en.oreilly.

11 Optimierung: AtF - HTML 11 HTML-Grundgerüst: - Lego-Klötze - Grids lieben lernen - Wahrscheinlichste Interaktionselemente nach oben Quelle:

Interaktionselemente nach oben Quelle: http://www.

12 Optimierung: AtF - CSS 12 CSS-Performance: - Selectors: ID & CLASS = Gut * & > & CSS3 = Böse - Modulares CSS: Classes für mehrmals benutzte Style-Elemente - JS-Expressions in CSS = Böse Bsp: expression(document.body.clientwidth > 1100)? "1100px" : "auto"; 2x vermeiden - CSS kombinieren & minifyen Quellen:

13 Optimierung: AtF - Javascript13 Besseres Javascript: - Von Kopf zum Fuß <script defer src=" type="text/javascript"></script> </body> - "defer" nutzen - JS minifyen - Apache-Modul modjsmin - Z.B. "navi.js" per AJAX Quellen: %20Analysis%20Presentation.ppt

js" type="text/javascript"></script> </body> - "defer" nutzen - JS minifyen - Apache-Modul modjsmin -

14 Optimierung: AtF - Grafiken 14 Bildoptimierungen: - Großes Potential - Manuell: PS / GIMP - Halbautomatisch: Smush.it - Serverseitig mit Caching: moddims - CSS-Sprites nutzen Quellen: %20AOL%20Optimization%20Team%20Presentation.pdf

it - Serverseitig mit Caching: moddims - CSS-Sprites nutzen Quellen: http://assets.en.oreilly.

15 Optimierung: AtF - Flushing 15 Frühes Flushing / Chunking: - Statische Elemente früher ausliefern - Rechenintensiveren Operationen Zeit verschaffen - Progressives Rendering der Website => Besseres Interaktionsgefühl Quelle:

verschaffen - Progressives Rendering der Website => Besseres

16 Optimierung: AtF - Reflows 16 Repaints & Reflows: - Repaint: Visibility-Check im DOM Auslöser: 'outline', 'visibility', 'background-color' - Reflow: Positionierungscheck im DOM Auslöser: WindowSize, Fonts, display, padding, margin, position, top, left, +/- Stylesheet, DOM-Changes ('innerhtml','appendchild'), AJAX, Bild oder Video ohne Größenangaben - JS nicht für inline-styles nutzen - Animierte Objekte nur mit position:absolute/fixed - Tabellen vermeiden Quelle:

WindowSize, Fonts, display, padding, margin, position, top, left, +/- Stylesheet, DOM-Changes ('innerhtml','appendchild'), AJAX, Bild oder Video ohne

17 Tools of the Trade 17 Yslow (Firebug) PageSpeed SpriteMe! Paint-Events (Bookmarklet) Cuzillion UA-Profiler Smush.it Früher Web-App - Jetzt Teil von YSlow Hammerhead (Firebug) Episodes Paint-Events (Firebug) V8 Dromaeo SunSpider SlickSpeed

it Früher Web-App - Jetzt Teil von YSlow Hammerhead (Firebug) http://stevesouders.com/hammerhead/ Episodes http://stevesouders.com/episodes/ Paint-Events (Firebug) https://addons.mozilla.

18 Get Speedin'! 18 Danke für Eure Aufmerksamkeit!

Ähnliche Dokumente

Web-Performance-Optimierung - Websites auf Speed SEO Barbecue - DIWISH - Kiel - 01. August 2012. Timo Heinrich t.heinrich@online-werbung.

SEO Barbecue Web-Performance-Optimierung - DIWISH - Kiel - 01. August 2012 - Websites auf Speed 1 2 Kinder 1 Frau 41 Jahre jung Seit 1996 autodidaktischer Onliner Schwerpunkte: Suchmaschinenoptimierung