Website-Performance: Websites sichtbar schneller machen
-
Upload
thomas-witt -
Category
Technology
-
view
4.571 -
download
0
description
Transcript of Website-Performance: Websites sichtbar schneller machen
![Page 2: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/2.jpg)
Was kann ich tun, damit (m)eine Web-Site „schnell“ wird?
![Page 3: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/3.jpg)
![Page 4: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/4.jpg)
Wann ist eineWeb-Site schnell?
![Page 5: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/5.jpg)
18% 82%
![Page 6: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/6.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/7.jpg)
… 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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/8.jpg)
Performance≠
Back-End-Tuning
![Page 9: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/9.jpg)
Messen
![Page 10: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/10.jpg)
http://tinyurl.com/y4aupu
![Page 11: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/11.jpg)
![Page 12: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/12.jpg)
![Page 13: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/13.jpg)
Live HTTP headers
http://tinyurl.com/49hcv
![Page 14: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/14.jpg)
Was kann ich tun, damit (m)eine Web-Site „schnell“ wird?
![Page 15: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/15.jpg)
Wenige HTTP-Anfragen
Regel #1
![Page 16: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/16.jpg)
Speaking of Google …
Wie „groß“ ist die Homepage von
Google?
![Page 17: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/17.jpg)
19 KByte2 Requests
~200 ms
![Page 18: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/18.jpg)
![Page 19: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/19.jpg)
Es geht auch anders…
![Page 20: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/20.jpg)
![Page 21: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/21.jpg)
![Page 22: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/22.jpg)
![Page 23: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/23.jpg)
Warum ist das so?
![Page 24: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/24.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/25.jpg)
Wie reduziere ich die Anzahl der HTTP Requests?
![Page 26: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/26.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/27.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/28.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/29.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/30.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/31.jpg)
Caching
Regel #2
![Page 32: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/32.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/33.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/34.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/35.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/36.jpg)
Regel #3
Compression
![Page 37: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/37.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/38.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/39.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/40.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/41.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/42.jpg)
Regel #4
CSS oben,JS unten
![Page 43: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/43.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/44.jpg)
JavaScript ans Ende
![Page 45: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/45.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/46.jpg)
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](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/47.jpg)
Empfohlenes Buch
http://tinyurl.com/6d4unc
![Page 48: Website-Performance: Websites sichtbar schneller machen](https://reader033.fdokument.com/reader033/viewer/2022061205/5481266eb4af9fea158b5e7b/html5/thumbnails/48.jpg)
Vielen Dank für Ihre Aufmerksamkeit!