client-side performance optimizations
Post on 05-Dec-2014
3.164 Views
Preview:
DESCRIPTION
TRANSCRIPT
80%
20%
Wahrgenommene Ladezeiteiner Webseite
80%
20%
Wahrgenommene Ladezeiteiner Webseite
80%
20%
Client
Server
Wahrgenommene Ladezeiteiner Webseite
80%
20%
Client
Server
Jakob SchröterBachelor of Computer
Science in Media
Master of ComputerScience and Media
Kajona³ CMS
Frontend Engineer
BESTTRICK.COM
Schlagzeuger
Spalte2LADEZEIT?
50 ms
100 ms
500 ms
1000 ms
Einfluss der Ladezeit
Amazon: +100 ms = 1 % weniger Verkäufe
Yahoo: +400 ms = 5-9 % weniger Anfragen
Google: +500 ms = 20 % weniger Anfragen
Glückliche UserMehr UserMehr Geld
KurzeLadezeit
WAS PASSIERT IM BROWSER?
Your best friends
• Firebug
• Yahoo YSlow
• Google PageSpeed
• Speed limiter: Webscarab
HTML (Server) Ressources (Client)
ANZAHL DER REQUESTS REDUZIERENHTTP Requests are expensive!
HTTP Requests reduzieren
• Redirects vermeiden
• Dateien sinnvoll kombinieren– base.js, dragndrop.js, animation.js, …
– master.css, dashboard.css, lightbox.css
• Auch Grafiken – CSS Sprites!– button.png, button_hover.png,
button_active.png, …
CSS Sprites
.button {
width: 10px; height: 10px;
background-image: url(sprites.png);background-position: 100px 40px;
}
.button:hover {
background-position: 110px 40px;
}
sprites.png
110px
40px
Intelligentes Browser-Caching
• Achtung, ETag!
Server Client
GET File
File
Server Client
GET File, if modified
File304 not modified
Use HTTPs potential!
Weniger Daten, aber trotzdem ein Request!
Intelligentes Browser-Caching
• Besser: Expires-Header
Server Client
GET File
File
Server Client
File
Expires 01.01.2011
Kein Request! Erst wieder ab 02.01.2011
Cache busters
…um ein Neuladen zu erzwingen
• (Expire-Header vorher anpassen)
• base-12.js
• styles.css?67
• /890/background.png
REQUESTS VERKLEINERNHTTP Requests are expensive!
Compression & Minifying
• alles was geht: HTML, CSS, JS, JSON, XML, …aber keine Bilder, PDFs, SWFs, …
• Compression
– mod_deflate / mod_gzip
• Minifying
Compression & Minifyinghdm-stuttgart.de
Original Minified KomprimiertKomprimiert+ Minified
HTML 101 KB 97 KB 17 KB 16 KB
CSS 90 KB 68 KB 19 KB 14 KB
JS 243 KB 195 KB 73 KB 63 KB
434 KB 360 KB 109 KB 93 KB
-341 KB ≈ -79%!
IMAGEOPTIMIZATION
Image Optimization
JPG PNG (GIF)
• „Für Web speichern“
• CSS-Sprites
Farbanzahl
smushit.com
130 x 86 px
hdm-stuttgart.de
HDM-STUTTGART.DE
x 200.000.000 Unique Visitors= -82 TB/Monat
-325 KB-97 KB
-422 KB
Compression & Minifying
Image Optimization
-49%
REIHENFOLGE DER REQUESTSHTTP Requests are expensive!
Order of loading ressources
• Achtung <script>!
– blockiert weitere Downloads
• JS/CSS nicht doppelt einbinden
Order of loading ressources
CSSZwingend
notwendige Scripts Grafiken ErgänzendeScripts
DOM-ready
master.css base.js background.jpgbutton.png
dragndrop.jslightbox.js
onLoad
PRELOADING
Preloading
• Z.B. Loginseite
LAZY-LOADING
Post-loading
Domain sharding / CDN
• Parallele Downloads (für ältere Browser)
– nur 2 Requests per Host
• Schnellere Antwortzeiten/Übertragungsraten
– Schlanker Webserver
– Cookie-free Domain
static.ak.studivz.net
NOCH NICHT SCHNELL GENUG?
JS performance
• Passende AJAX-Bibliothek wählen
• Aktionen bei window.onload reduzieren
• Best practices
CSS performance
• Selektoren
#myElement > li {}
.myElement-li {}
• Best practices
Chrome Speed Tracer
„IST JA GANZ SCHÖN AUFWÄNDIG…“
Client-Side Performance Optimization
Vieles lässt sich automatisieren
Integration in den Deployment-Prozess
– JS/CSS-Dateien kombinieren
– Compression & Minifying
– Cache busters
– Image optimization
Client-sidematters!
EnormeAuswirkungen Oft einfach
Von Anfang an Grundregeln
beachten & ggf. weiter optimieren
Direkte Verbesserungfür die Nutzer
Kostenersparnis
don‘t fiddle – analyse first
Entlastet auchdie Server
Weiterführend
• Steve Souders: High Performance Websites
• Steve Souders: Even Faster Websites
• http://developer.yahoo.com/performance/rules.html
• Test-Webseite: http://stevesouders.com/cuzillion
Client-side Performance Optimizations
Jakob Schröter
xing.com/profile/Jakob_Schroeter
top related