48
Website-Performance: Websites sichtbar schneller machen <[email protected]>

Website-Performance: Websites sichtbar schneller machen

Embed Size (px)

DESCRIPTION

Wie beschleunigt man die Ladezeiten einer Web-Site? Die Performanceeiner web-Site hängt nicht nur von den Back-End-Systemen und -Servernab, sondern vielmehr von der Strukturierung und dem Aufbau derWeb-Seite. Dieser Talk, gehalten auf dem iico.de internet congress 2008am 2008-06-04 beschreibt, wie man die Web-Site-Performance massivverbessert.

Citation preview

Page 1: Website-Performance: Websites sichtbar schneller machen

Website-Performance:Websites sichtbar schneller machen

<[email protected]>

Page 2: Website-Performance: Websites sichtbar schneller machen

Was kann ich tun, damit (m)eine Web-Site „schnell“ wird?

Page 3: Website-Performance: Websites sichtbar schneller machen
Page 4: Website-Performance: Websites sichtbar schneller machen

Wann ist eineWeb-Site schnell?

Page 5: Website-Performance: Websites sichtbar schneller machen

18% 82%

Page 6: Website-Performance: Websites sichtbar schneller machen

Site Leerer Cache Voller Cache

Amazon.com 82% 86%

eBay.com 98% 92%

MSN.com 97% 95%

Myspace.com 96% 86%

Wikipedia.org 80% 88%

Yahoo.com 95% 88%

Youtube.com 97% 95%

Prozentualer Anteil der Ladezeit, der zur Darstellung im Front-End benötigt wird

Page 7: Website-Performance: Websites sichtbar schneller machen

… die „Responsiveness“ist der kritische Faktor in Sachen User Experience.

Insbesondere für wiederkehrende Nutzer.

Für Erhöhung der Responsiveness reicht aber Back-End-Tuning nicht aus.

Google hat uns gezeigt …

Page 8: Website-Performance: Websites sichtbar schneller machen

Performance≠

Back-End-Tuning

Page 9: Website-Performance: Websites sichtbar schneller machen

Messen

Page 10: Website-Performance: Websites sichtbar schneller machen

http://tinyurl.com/y4aupu

Page 11: Website-Performance: Websites sichtbar schneller machen
Page 12: Website-Performance: Websites sichtbar schneller machen
Page 13: Website-Performance: Websites sichtbar schneller machen

Live HTTP headers

http://tinyurl.com/49hcv

Page 14: Website-Performance: Websites sichtbar schneller machen

Was kann ich tun, damit (m)eine Web-Site „schnell“ wird?

Page 15: Website-Performance: Websites sichtbar schneller machen

Wenige HTTP-Anfragen

Regel #1

Page 16: Website-Performance: Websites sichtbar schneller machen

Speaking of Google …

Wie „groß“ ist die Homepage von

Google?

Page 17: Website-Performance: Websites sichtbar schneller machen

19 KByte2 Requests

~200 ms

Page 18: Website-Performance: Websites sichtbar schneller machen
Page 19: Website-Performance: Websites sichtbar schneller machen

Es geht auch anders…

Page 20: Website-Performance: Websites sichtbar schneller machen
Page 21: Website-Performance: Websites sichtbar schneller machen
Page 22: Website-Performance: Websites sichtbar schneller machen
Page 23: Website-Performance: Websites sichtbar schneller machen

Warum ist das so?

Page 24: Website-Performance: Websites sichtbar schneller machen

Kein HTTP Pipelining• IE: 2 Verbindungen/Host• Serielle Verarbeitung

Upload-Geschwindigkeit• 5:1 - 20:1-Ratio bei DSL• HTTP-Request: 500 Bytes,

Problem für Objekte <10k

HTTP-Verbindungen

http://tinyurl.com/yedmux

Page 25: Website-Performance: Websites sichtbar schneller machen

Wie reduziere ich die Anzahl der HTTP Requests?

Page 26: Website-Performance: Websites sichtbar schneller machen

Asset Server mit DNS-VerteilungDer Browser beherrscht nur 2 Verbindungen pro Host

Also: Mehr Hosts!• image1.domain.de• image2.domain.de• image3.domain.de

- alles der gleiche Server

Optimale Anzahl: 4• CSS, JavaScript, Bilder• Overhead für DNS-Query

- DNS Browser Cache!

Page 27: Website-Performance: Websites sichtbar schneller machen

Kombinieren von Bildern• Viele Bestandteile in

einem großen Bild• Auswahl via CSS• Ggf. nachladen via JS

Vorteile• Geringere Größe als

Einzelbilder• Nur EIN HTTP-Request

Nachteile• Nur moderne Browser

CSS-Sprites

http://tinyurl.com/2fyqhp

Page 28: Website-Performance: Websites sichtbar schneller machen

HTTP/1.1 Keepalives

Wiederverwenden einer HTTP-Verbindung• Overhead für Neuaufbau

der TCP/IP-Verbindung entfällt

Konfiguration viaWeb-Server

Voraussetzung für Pipelining

Page 29: Website-Performance: Websites sichtbar schneller machen

Jeweils nur ein CSS und JS-Objekt

Nur ein JavaScript, nur ein CSS-Objekt pro Seite• Bei CSS einfach• Bei JS etwas schwerer

- Reihenfolge wichtig!

Automatisierte Lösungen• Out-of-the-Box bei Rails 2

CSS/JS immer extern referenzieren!

Page 30: Website-Performance: Websites sichtbar schneller machen

Regel #1: Zusammenfassung

So wenig HTTP-Anfragen wie möglich• Maßgeblicher Faktor für

Front-End Performance

Reduzieren via• CSS Sprites• HTTP Keepalives• Asset-Server• Nur ein CSS/JS-File

Page 31: Website-Performance: Websites sichtbar schneller machen

Caching

Regel #2

Page 32: Website-Performance: Websites sichtbar schneller machen

CachingAssets clientseitig cachen• Bilder, CSS, JavaScript• Beschleunigt Folgeseiten

Via HTTP-Header

If-Modified-Since• Reduzierung des

Datenvolumens

Expires• Zusätzliche Reduzierung

der HTTP-Requests

Page 33: Website-Performance: Websites sichtbar schneller machen

If-Modified-Since1. Antwort• Der Server sendet das

Änderungsdatum

2. Anfrage• Der Client fragt, ob das

Objekt seitdem geändert wurde

Ergebnis• Keine erneute

Datenübertragung• Ein HTTP-Request

GET /images/logo.png HTTP/1.1Host: www.kundensite.de

HTTP/1.1 200 OKLast-Modified: Thu, 21 Feb 2008 12:18:57 GMT

[... Daten ...]

GET /images/logo.png HTTP/1.1Host: www.kundensite.deIf-Modified-Since: Thu, 21 Feb 2008 12:18:57 GMT

HTTP/1.1 304 Not Modified

Page 34: Website-Performance: Websites sichtbar schneller machen

Expires1. Antwort• Der Server sendet das

Ablaufdatum

2. Ergebnis• Der Browser fragt nie

mehr nach dem Objekt, solange es im Cache ist

Tip• Ggf. Anhängen von IDs

an das Objekt- image.png?123531

GET /images/hugeimage.jpg HTTP/1.1Host: www.kundensite.de

HTTP/1.1 200 OKExpires: Wed, 25 Jun 2008 09:00:00 GMT

[... Daten ...]

Page 35: Website-Performance: Websites sichtbar schneller machen

Regel #2: ZusammenfassungCachen, wo es geht• Beschleunigt Folgeseiten• Nur für wiederkehrende

Benutzer

Datenübertragung reduzieren via• If-Modified-Since• Expires

Anmerkung:• ETags vermeiden!

Page 36: Website-Performance: Websites sichtbar schneller machen

Regel #3

Compression

Page 37: Website-Performance: Websites sichtbar schneller machen

CompressionReduzierung der Größe der zu übertragenden Daten

Vorab• Bilder optimieren• JS/CSS minimieren

On-The-Fly• Anfrage vom Browser

nach komprimierten Daten

• Der Webserver verschickt komprimiert

Page 38: Website-Performance: Websites sichtbar schneller machen

On-The-Fly-KomprimierungApache: mod_deflate• Standard-Modul• Gzip verwenden!

Vorteile• Massive Datenreduktion

- Bei JS/CSS bis zu 80%

Nachteile• CPU-Verbrauch

auf dem Server• Probleme mit alten IEs

Unkomprimiert Komprimiert

Page 39: Website-Performance: Websites sichtbar schneller machen

Vorab-KomprimierungBilder vorab optimieren• Nur JPEG und PNG!

CSS verkleinern• Files zusammenfügen• Unnötiges entfernen:

- 0px=0, Kommentare- z. B. CSSTidy

JavaScript verkleinern• JavaScript Minifier

- z. B. JSMin, Dojo• Bis zu 25% Reduktion

http://tinyurl.com/2tajlb · http://tinyurl.com/jum6g

Page 40: Website-Performance: Websites sichtbar schneller machen

Cookies klein halten!Compression wirkt nicht für HTTP-Header• Betrifft insbesondere

Cookies• Besonders schlimm bei

DSL-Leitungen

Keine automatisierte Lösung• auf große Datenmengen

im Cookie verzichten• ggf. via JS nach Laden

aller Elemente setzen

Page 41: Website-Performance: Websites sichtbar schneller machen

Regel #3: ZusammenfassungCompression verkürzt Ladezeiten• Wirkt schon bei erstem

Besuch

Nachteil• Wirkt nicht für HTTP-

Header- Cookies!

Einfach zu realisieren• mod_deflate im Apache

Page 42: Website-Performance: Websites sichtbar schneller machen

Regel #4

CSS oben,JS unten

Page 43: Website-Performance: Websites sichtbar schneller machen

Reihenfolge CSS/JSCSS-Files an den Anfang• Progressive Rendering:

- Visuelles Feedback anstatt weiße Seite

• <link> anstatt @import!

JS ans Ende• Scripts verhindern

Rendering aller Elemente unterhalb des Scripts

• Scripts blockieren alle offenen Downloads!

Page 44: Website-Performance: Websites sichtbar schneller machen

JavaScript ans Ende

Page 45: Website-Performance: Websites sichtbar schneller machen

Regel #4: CSS oben, JS unten

CSS-Stylesheets• Genau eines• Am Anfang der Seite

JavaScript-Files• Nur eines• Am Ende der Seite

Page 46: Website-Performance: Websites sichtbar schneller machen

Zusammenfassung

#1: Wenige HTTP-Requests• Sprites, Asset Server

#2: Caching• Expires, Modified-Since

#3: Compression• Gzip, CSS/JS minify

#4: CSS oben, JS unten• Reihenfolge ist wichtig!

Page 47: Website-Performance: Websites sichtbar schneller machen

Empfohlenes Buch

http://tinyurl.com/6d4unc

Page 48: Website-Performance: Websites sichtbar schneller machen

Vielen Dank für Ihre Aufmerksamkeit!