Client-side Performance Optimizations

Jakob Schröter

22.01.2010

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

Facebook

-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