Web Performance Optimierung (WPO)

WebTech Mainz. Schneller. Kleiner. WPO.Web Performance Optimierung.
Martin Kliehm. Senior Frontend Engineer.@kliehm. @namics.
12. Oktober 2010
http://flic.kr/p/5bgGb9

Web Performance Optimierung seit 2006
12.10.2010
Performance. WebTech.
2

Performance:schnell & klein.
12.10.2010
3
http://flic.kr/p/5jZ2nP

Komponenten einer Webseite:Ein großes deutsches Bankhaus
12.10.2010
4
http://webpagetest.org

12.10.2010
5
← Backend (HTML): 8,67%
DNS Lookup: 299 msBackend (HTML):+ 514 ms = 13,71%Frontend: 5402 ms = 91,12%

17.05.2010
6
DNS Lookup: 299 msBackend (HTML):+ 514 ms = 13,71%Frontend: 5402 ms = 91,12%
JavaScript:1717 ms
JavaScript lädt sequentiell
Bilder:nur 2 – 4parallel
Gesamt: 5928 ms
Frontend: 91,12%
Performance. Webmontag.

5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder?
12.10.2010
7
http://flic.kr/p/27sG2k

Case Studies: Langsamer
100 ms. Verzögerung è− 1% Umsatz
400 ms. Verzögerung è− 0,59% Suchen pro User
400 ms. Verzögerung è5 – 9% weniger Traffic
2 sec. langsamer è− 4,3% Umsatz pro User
12.10.2010
8

Case Studies: Schneller
2,2 sec. schnellere Seite è+ 15,4% Downloads
− 30% Dateivolumen è+ 30% Kartenaufrufe
Eine einzige Optimierungsmaßnahme, gzipè + 13-25% schneller,50% Dateivolumen eingespart
5 sec. schnellere Shopseitenè+ 7-12% Conversion Rate, + 25% mehr Seitenaufrufe, 50% Server + Energiekosten gespart
12.10.2010
9

12.10.2010
10
http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team

12.10.2010
11

12.10.2010
12

12.10.2010
13

Google Search Ranking
“Our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings.”
Google Blog, April 2010
12.10.2010
14

Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics.
12.10.2010
15
http://flic.kr/p/8VHFb

Die (bekannten) 14 Regeln
12.10.2010
16

Die (bekannten) 14 Regeln
Gzip Components
Add an Expires Header
Reduce DNS Lookups
Avoid Redirects
Make Fewer HTTP Requests
Make JavaScript and CSS External
Minify JavaScript & CSS
Put CSS at the Top
Avoid CSS Expressions
Put Scripts at the Bottom
Remove DuplicateScripts
Use a Content Delivery Network (CDN)
Configure ETags
Make AJAX Cacheable
12.10.2010
17
http://developer.yahoo.com/performance/rules.html

Tools zum Testen
12.10.2010
18
Yslow
Google Page Speed
jsPerf
HttpWatch
WebPagetest
Boomerang

1. Gzip Components
<IfModulemod_deflate.c>
# Don'tcompressimages
AddOutputFilterByType DEFLATEtext/htmltext/csstext/xmlapplication/xhtml+xmlapplication/x-javascripttext/x-jstext/javascripttext/jsapplication/javascript
</IfModule>
12.10.2010
19
http://developer.yahoo.com/performance/rules.html#gzip

2. Add an Expires Header
<IfModulemod_expires.c>
ExpiresActive On
ExpiresByTypeimage/jpg "access plus 1 month„
ExpiresByTypeimage/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByTypeimage/png "access plus 1 month"
ExpiresByTypeimage/ico "access plus 1 month"
ExpiresByTypeimage/icon "access plus 1 month"
ExpiresByTypeimage/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 year"
ExpiresByTypetext/javascript "access plus 1 month"
ExpiresByTypeapplication/javascript "access plus 1 month"
ExpiresByTypeapplication/x-javascript "access plus 1 month"
</IfModule>
12.10.2010
20
http://developer.yahoo.com/performance/rules.html#expires

3. Reduce DNS Lookups
Ein DNS Lookup dauert ca. 20-120 ms.
DNS Cache:
Internet Explorer: 30 min.
Firefox: 1 min.
Parallele Downloads über verschiedene Domains sind schneller
Kompromiss: 2-4 Domains
12.10.2010
21
http://developer.yahoo.com/performance/rules.html#dns_lookups

4. Avoid Redirects
Sie verzögern den Aufbau der Seite
Sie werden nicht gecacht
Best Practice: 301 oder 302
Vorsicht: fehlender Endslash erzeugt Redirect !
12.10.2010
22
http://developer.yahoo.com/performance/rules.html#redirects

5. MakeFewer HTTP Requests
JavaScript- bzw. CSS-Dateien zusammenfügen
CSS Sprites
12.10.2010
23
http://developer.yahoo.com/performance/rules.html#num_http

12.10.2010
24
http://goo.gl/Zhs9

http://goo.gl/Zhs9
12.10.2010
25

Apache modconcat zum Aggregieren von CSS oder JavaScript
<script type="text/javascript"src="http://yourdomain.com/??script-1.js,script-2.js"></script>
Verwendet den Cache Header derjüngstenDatei
12.10.2010
26
http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/

12.10.2010
27
http://www.julienlecomte.net/blog/2007/09/16/

12.10.2010
28
http://www.ejeliot.com/blog/73

12.10.2010
29
https://jawr.dev.java.net/

6. Make JavaScript and CSS External
Damit die Dateien gecacht werden können!
Bonus-Tipp: Frameworks von Google Code laden
12.10.2010
30
http://developer.yahoo.com/performance/rules.html#external

7. Minify JavaScript: Apache modjsmin
$ apxs -c mod_jsmin.c
Loadmodulejsmin_modulemodules/mod_jsmin.so
12.10.2010
31
http://code.google.com/p/modjsmin/

12.10.2010
32
http://goo.gl/NTKi

12.10.2010
33
http://goo.gl/NTKi

8. Put CSS atthe Top
Damit kann ein Browser die einzelnen Seitenelemente schon darstellen
Vorsicht: IE6 Conditional Comment blockiert IE8 für 150 ms.
12.10.2010
34
http://goo.gl/gjYs
http://developer.yahoo.com/performance/rules.html#css_top

9. Avoid CSS Expressions in IE
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Expressions sindteuer, siewerdenmehrere 10.000 mal ausgeführt
12.10.2010
35
http://developer.yahoo.com/performance/rules.html#css_expressions

10. Put Scripts attheBottom
denn sie laden nur nacheinander
sie blockieren den restlichen Inhalt
12.10.2010
36
http://developer.yahoo.com/performance/rules.html#js_bottom

Ausnahme: Non-blocking Scripts
varscript = document.createElement("script");script.type = "text/javascript";script.src = "file.js";document.body.appendChild(script);
<script type="text/javascript"asyncsrc="foo.js"></script>
12.10.2010
37
http://goo.gl/o453

11. Remove Duplicate Scripts
kommt öfters vor als man denkt
insbesondere Libraries wie jQuery werden oft mehrfach eingebunden
Internet Explorer cacht sie nicht: 2 Requests
verbraucht clientseitige Kapazitäten zum Verarbeiten
12.10.2010
38
http://developer.yahoo.com/performance/rules.html#js_dupes

12. Use a Content Delivery Network (CDN)
Für internationale Websites essentiell
12.10.2010
39
http://developer.yahoo.com/performance/rules.html#cdn

13. ConfigureETags
FileETagnone
12.10.2010
40
http://developer.yahoo.com/performance/rules.html#etags

14. Make AJAX cacheable
mit einem Expires Header
12.10.2010
41
http://developer.yahoo.com/performance/rules.html#cacheajax

12.10.2010
42
http://youtu.be/nCgQDjiotG0

Die (bekannten) 14 35 Regeln
FlushBufferEarly
UseGETforAjaxRequests
Postload Components
Preload Components
ReducetheNumberofDOM Elements
Split ComponentsAcross Domains
MinimizeNumberofiframes
Avoid404s
ReduceCookie Size
UseCookie-Free Domains for Components
MinimizeDOM Access
DevelopSmart Event Handlers
Choose<link> Over @import
AvoidFilters
OptimizeImages
OptimizeCSS Sprites
Do Not ScaleImages in HTML
Makefavicon.ico Small andCacheable
Keep Components Under25 KB
Pack Components Into a Multipart Document
AvoidEmpty Imagesrc
12.10.2010
43
http://developer.yahoo.com/performance/rules.html

Flushthebufferearly
</head>
<?phpflush(); ?>
<body>
12.10.2010
44
http://developer.yahoo.com/performance/rules.html#flush

Minimize DOM Access
Gehe von einer ID aus
$('#idelm') statt $('#id .class')
Elemente in Variablencachen
MehrereElementezusammendem DOM-Baum hinzufügen(Document reflow minimieren)
Event Delegation (Bubbling)
Vorsichtbei Loops im IE!
12.10.2010
45
http://developer.yahoo.com/performance/rules.html#dom_access
http://goo.gl/Iu57

Minimizethenumberofiframes
<iframe> pros:
Hilftbeilangsamen Third-Party-Contentwie Buttons und Bannern
Security Sandbox
Skriptewerden parallel geladen
<iframe> cons:
Teuer, selbstwennsie leer sind
Blockiert den onload event
Nicht-Semantisch
12.10.2010
46
http://www.slideshare.net/julien.lecomte/

12.10.2010
47
Vorsicht vor 3rd Party Content

12.10.2010
48
http://www.julienlecomte.net/blog/2007/09/16/

12.10.2010
49
Bilder optimieren

Apache moddims
<imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/ http://yourdomain.com/ lorem.jpg"width="320" height="240" alt="Loremipsum" />
12.10.2010
50
http://code.google.com/p/moddims/

12.10.2010
51
http://psydk.org/PngOptimizer.php

12.10.2010
52
http://developer.yahoo.com/yslow/smushit/

12.10.2010
53
Lazy-loadimages

Lazy-Loading von Bildern
Verschiedene JavaScript-Libraries:
12.10.2010
54
LazyLoad (jQuery)
ImageLoader (YUI)
Sonar (AOL, standalone)

12.10.2010
55
Neue (?) Ideen:@font-face für Icons

@font-face für Icons
Icons in Illustrator erstellen
In FontForge importieren
Verschiedene Font-Formate mitFontSquirrel generieren (TTF, WOFF, EOT, SVG)
@font-faceim CSS einbauen
Vorteile: skalierbar, Farbe frei wählbar, an Grundlinie ausgerichtet; Nachteil: einfarbig (Gradient mit CSS3?)
12.10.2010
56

12.10.2010
57
Keine eigene Datei print.css(auch keine iphone.css)

12.10.2010
59
CSS background-images reduzieren mit data:URI

#wrapper { background:url( bg.gif ); }
12.10.2010
60
#wrapper { background:url( "data:image/png; base64,iVBORw0[…]" ); }
ü
http://software.hixie.ch/utilities/cgi/data/data

Die Lösung: MHTML in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATOR--Content-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/
12.10.2010
61
http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
http://www.phpied.com/the-proper-mhtml-syntax/

Die Lösung: M(ultipart)HTML in der ie.css#wrapper { background:url( "mhtml:http://me.com/ ie.css!bgimg1" );}
12.10.2010
62
http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Danke.
twitter: @kliehm
Links: http://delicious.com/kliehm/performance
Social: http://klie.hm/profile
12.10.2010
63

http://dokuwiki.eifel-online.com	16
http://lanyrd.com	1
http://soup.sindre.at	1

Web Performance Optimierung (WPO)

by Martin Kliehm on Nov 14, 2010

Accessibility

Tags

Upload Details

Usage Rights

3 Embeds 18

Statistics

Web Performance Optimierung (WPO) — Presentation Transcript