SlideShare une entreprise Scribd logo
1  sur  62
Télécharger pour lire hors ligne
WebTech Mainz. Schneller. Kleiner. WPO.
Web Performance Optimierung.
Martin Kliehm. Senior Frontend Engineer.
@kliehm. @namics.
12. Oktober 2010 http://flic.kr/p/5bgGb9
Namics.
Web Performance Optimierung seit 2006
12.10.2010 Performance. WebTech.
2
Namics.
Performance:
schnell & klein.
12.10.2010 3 Performance. WebTech.
http://flic.kr/p/5jZ2nP
Namics.
Performance. WebTech.
Komponenten einer Webseite:
Ein großes deutsches Bankhaus
12.10.2010 4
http://webpagetest.org
Namics.
Performance. WebTech.
Komponenten einer Webseite:
Ein großes deutsches Bankhaus
12.10.2010 5
DNS Lookup: 299 ms
Backend (HTML):
+ 514 ms = 13,71%
Frontend:
5402 ms = 91,12%
← Backend (HTML): 8,67%
Namics.
Performance. Webmontag.
Komponenten einer Webseite:
Ein großes deutsches Bankhaus
17.05.2010 6
DNS Lookup: 299 ms
Backend (HTML):
+ 514 ms = 13,71%
Frontend:
5402 ms = 91,12%
JavaScript: 1717 ms
Frontend: 91,12%
JavaScript lädt
sequentiell
Bilder:
nur 2 – 4
parallel
Gesamt: 5928 ms
Namics.
5,9 Sekunden Ladezeit sind
doch nicht schlecht, oder?
12.10.2010 7 Performance. WebTech.
http://flic.kr/p/27sG2k
Namics.
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 Performance. WebTech.
8
Namics.
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 Performance. WebTech.
9
Namics.
12.10.2010 Performance. WebTech.
10
http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
Namics.
12.10.2010 Performance. WebTech.
11
http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
Namics.
12.10.2010 Performance. WebTech.
12
http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
Namics.
12.10.2010 Performance. WebTech.
13
http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
Namics.
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 Performance. WebTech.
14
Namics.
Performanz. Schneller. Besser. Grüner.
Mehr Umsatz. Alle glücklich. Namics.
12.10.2010 15 Performance. WebTech.
http://flic.kr/p/8VHFb
Namics.
Die (bekannten) 14 Regeln
12.10.2010 16 Performance. WebTech.
Namics.
Die (bekannten) 14 Regeln
1. Gzip Components
2. Add an Expires Header
3. Reduce DNS Lookups
4. Avoid Redirects
5. Make Fewer HTTP
Requests
6. Make JavaScript and
CSS External
7. Minify JavaScript & CSS
8. Put CSS at the Top
9. Avoid CSS Expressions
10. Put Scripts at the Bottom
11. Remove Duplicate
Scripts
12. Use a Content Delivery
Network (CDN)
13. Configure ETags
14. Make AJAX Cacheable
12.10.2010 Performance. WebTech.
17
http://developer.yahoo.com/performance/rules.html
Namics.
Tools zum Testen
12.10.2010 Performance. WebTech.
18
• Yslow
• Google Page Speed
• jsPerf
• HttpWatch
• WebPagetest
• Boomerang
Namics.
1. Gzip Components
<IfModule mod_deflate.c>
# Don't compress images
AddOutputFilterByType DEFLATE
text/html text/css text/xml
application/xhtml+xml
application/x-javascript
text/x-js text/javascript
text/js application/javascript
</IfModule>
12.10.2010 Performance. WebTech.
19
http://developer.yahoo.com/performance/rules.html#gzip
Namics.
2. Add an Expires Header
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month„
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/icon "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus
1 month"
ExpiresByType application/x-javascript "access plus
1 month"
</IfModule>
12.10.2010 Performance. WebTech.
20
http://developer.yahoo.com/performance/rules.html#expires
Namics.
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 Performance. WebTech.
21
http://developer.yahoo.com/performance/rules.html#dns_lookups
Namics.
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 Performance. WebTech.
22
http://developer.yahoo.com/performance/rules.html#redirects
Namics.
5. Make Fewer HTTP Requests
• JavaScript- bzw. CSS-Dateien
zusammenfügen
• CSS Sprites
12.10.2010 Performance. WebTech.
23
http://developer.yahoo.com/performance/rules.html#num_http
Namics.
12.10.2010 Performance. WebTech.
24
http://goo.gl/Zhs9
Namics.
http://goo.gl/Zhs9
12.10.2010 Performance. WebTech.
25
Namics.
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 der
jüngsten Datei
12.10.2010 Performance. WebTech.
26
http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
Namics.
12.10.2010 Performance. WebTech.
27
http://www.julienlecomte.net/blog/2007/09/16/
Namics.
12.10.2010 Performance. WebTech.
28
http://www.ejeliot.com/blog/73
Namics.
12.10.2010 Performance. WebTech.
29
https://jawr.dev.java.net/
Namics.
6. Make JavaScript and CSS External
• Damit die Dateien gecacht werden
können!
• Bonus-Tipp: Frameworks von
Google Code laden
12.10.2010 Performance. WebTech.
30
http://developer.yahoo.com/performance/rules.html#external
Namics.
7. Minify JavaScript: Apache modjsmin
$ apxs -c mod_jsmin.c
Loadmodule jsmin_module
modules/mod_jsmin.so
12.10.2010 Performance. WebTech.
31
http://code.google.com/p/modjsmin/
Namics.
12.10.2010 Performance. WebTech.
32
http://goo.gl/NTKi
Namics.
8. Put CSS at the Top
• Damit kann ein Browser die einzelnen
Seitenelemente schon darstellen
• Vorsicht: IE6 Conditional Comment
blockiert IE8 für 150 ms.
12.10.2010 Performance. WebTech.
34
http://developer.yahoo.com/performance/rules.html#css_top
http://goo.gl/gjYs
Namics.
9. Avoid CSS Expressions in IE
background-color:
expression(
(new Date()).getHours()%2 ?
"#B8D4FF" : "#F08A00" );
Expressions sind teuer, sie werden
mehrere 10.000 mal ausgeführt
12.10.2010 Performance. WebTech.
35
http://developer.yahoo.com/performance/rules.html#css_expressions
Namics.
10. Put Scripts at the Bottom
• denn sie laden nur nacheinander
• sie blockieren den restlichen Inhalt
12.10.2010 Performance. WebTech.
36
http://developer.yahoo.com/performance/rules.html#js_bottom
Namics.
Ausnahme: Non-blocking Scripts
var script =
document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.body.appendChild(script);
<script type="text/javascript"
async src="foo.js"></script>
12.10.2010 Performance. WebTech.
37
http://goo.gl/o453
Namics.
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 Performance. WebTech.
38
http://developer.yahoo.com/performance/rules.html#js_dupes
Namics.
12. Use a Content Delivery Network (CDN)
• Für internationale Websites essentiell
12.10.2010 Performance. WebTech.
39
http://developer.yahoo.com/performance/rules.html#cdn
Namics.
13. Configure ETags
FileETag none
12.10.2010 Performance. WebTech.
40
http://developer.yahoo.com/performance/rules.html#etags
Namics.
14. Make AJAX cacheable
• mit einem Expires Header
12.10.2010 Performance. WebTech.
41
http://developer.yahoo.com/performance/rules.html#cacheajax
Namics.
12.10.2010 Performance. WebTech.
42
http://youtu.be/nCgQDjiotG0
Namics.
Die (bekannten) 14 35 Regeln
15. Flush Buffer Early
16. Use GET for Ajax Requests
17. Postload Components
18. Preload Components
19. Reduce the Number of DOM
Elements
20. Split Components Across
Domains
21. Minimize Number of iframes
22. Avoid 404s
23. Reduce Cookie Size
24. Use Cookie-Free Domains for
Components
25. Minimize DOM Access
26. Develop Smart Event Handlers
27. Choose <link> Over @import
28. Avoid Filters
29. Optimize Images
30. Optimize CSS Sprites
31. Do Not Scale Images in HTML
32. Make favicon.ico Small and
Cacheable
33. Keep Components Under
25 KB
34. Pack Components Into a
Multipart Document
35. Avoid Empty Image src
12.10.2010 Performance. WebTech.
43
http://developer.yahoo.com/performance/rules.html
Namics.
Flush the buffer early
</head>
<?php flush(); ?>
<body>
12.10.2010 Performance. WebTech.
44
http://developer.yahoo.com/performance/rules.html#flush
Namics.
Minimize DOM Access
• Gehe von einer ID aus
• $('#id elm') statt $('#id .class')
• Elemente in Variablen cachen
• Mehrere Elemente zusammen dem
DOM-Baum hinzufügen (Document
reflow minimieren)
• Event Delegation (Bubbling)
• Vorsicht bei Loops im IE!
12.10.2010 Performance. WebTech.
45
http://developer.yahoo.com/performance/rules.html#dom_access
http://goo.gl/Iu57
Namics.
Minimize the number of iframes
<iframe> pros:
• Hilft bei langsamen Third-Party-Content
wie Buttons und Bannern
• Security Sandbox
• Skripte werden parallel geladen
<iframe> cons:
• Teuer, selbst wenn sie leer sind
• Blockiert den onload event
• Nicht-Semantisch
12.10.2010 Performance. WebTech.
46
http://www.slideshare.net/julien.lecomte/
Namics.
12.10.2010 47 Performance. WebTech.
Vorsicht vor 3rd Party Content
Namics.
12.10.2010 Performance. WebTech.
48
http://www.julienlecomte.net/blog/2007/09/16/
Namics.
12.10.2010 49 Performance. WebTech.
Bilder optimieren
Namics.
Apache moddims
<img src="http://yourdims.com/
dims/resize/320x240/
quality/70/
http://yourdomain.com/
lorem.jpg"
width="320" height="240"
alt="Lorem ipsum" />
12.10.2010 Performance. WebTech.
50
http://code.google.com/p/moddims/
Namics.
12.10.2010 Performance. WebTech.
51
http://psydk.org/PngOptimizer.php
Namics.
12.10.2010 Performance. WebTech.
52
http://developer.yahoo.com/yslow/smushit/
Namics.
12.10.2010 53 Performance. WebTech.
Lazy-load images
Namics.
Lazy-Loading von Bildern
Verschiedene JavaScript-Libraries:
12.10.2010 Performance. WebTech.
54
Lazy Load (jQuery)
ImageLoader (YUI)
Sonar (AOL, standalone)
Namics.
12.10.2010 55 Performance. WebTech.
Neue (?) Ideen:
@font-face für Icons
Namics.
@font-face für Icons
1. Icons in Illustrator erstellen
2. In FontForge importieren
3. Verschiedene Font-Formate mit
FontSquirrel generieren (TTF, WOFF, EOT, SVG)
4. @font-face im CSS einbauen
Vorteile: skalierbar, Farbe frei wählbar, an Grundlinie
ausgerichtet; Nachteil: einfarbig (Gradient mit CSS3?)
12.10.2010 Performance. WebTech.
56
Namics.
12.10.2010 57 Performance. WebTech.
Keine eigene Datei print.css
(auch keine iphone.css)
Namics.
<link type="text/css"
media="print"
src="print.css" />
12.10.2010 Performance. WebTech.
58
@media print {
a { text-decoration: none; }
}

Namics.
12.10.2010 59 Performance. WebTech.
CSS background-images reduzieren mit data:URI
Namics.
#wrapper {
background:
url( bg.gif );
}
12.10.2010 Performance. WebTech.
60
#wrapper {
background:
url( "data:image/png;
base64,iVBORw0[…]" );
}

http://software.hixie.ch/utilities/cgi/data/data
Namics.
Die Lösung: MHTML in der ie.css
/*
Content-Type: multipart/related;
boundary="SEPARATOR"
--SEPARATOR--
Content-Location:bgimg1
Content-Transfer-Encoding:base64
iVBORw0[…]
*/
12.10.2010 Performance. WebTech.
61
http://www.phpied.com/the-proper-mhtml-syntax/
http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Namics.
Die Lösung: M(ultipart)HTML
in der ie.css
#wrapper {
background:
url( "mhtml:http://me.com/
ie.css!bgimg1" );
}
12.10.2010 Performance. WebTech.
62
http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Namics.
Danke.
12.10.2010 63 Performance. WebTech.
twitter: @kliehm
Links: http://delicious.com/kliehm/performance
Social: http://klie.hm/profile

Contenu connexe

Tendances

Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Dennis Oderwald
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017Bastian Grimm
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrants0enke
 
Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Bastian Grimm
 
Continuous Integration mit Hudson
Continuous Integration mit HudsonContinuous Integration mit Hudson
Continuous Integration mit HudsonDr. Christian Betz
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch CachingAOE
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: SecurityMayflower GmbH
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Bastian Grimm
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishSpeedPartner GmbH
 
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Bastian Grimm
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Wartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-SoftwareWartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-SoftwareOliver Libutzki
 
Deploy Magento Shops with Capistrano v3
Deploy Magento Shops with Capistrano  v3Deploy Magento Shops with Capistrano  v3
Deploy Magento Shops with Capistrano v3Roman Hutterer
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishSpeedPartner GmbH
 

Tendances (17)

Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
 
Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015
 
Continuous Integration mit Hudson
Continuous Integration mit HudsonContinuous Integration mit Hudson
Continuous Integration mit Hudson
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
 
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Wartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-SoftwareWartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-Software
 
Deploy Magento Shops with Capistrano v3
Deploy Magento Shops with Capistrano  v3Deploy Magento Shops with Capistrano  v3
Deploy Magento Shops with Capistrano v3
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
 

Similaire à Web Performance Optimierung (WPO)

Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Martin Kliehm
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebSebastian Springer
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittdominion
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkFabian Lange
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
Website Performance
Website PerformanceWebsite Performance
Website Performanceskyfyre
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationJakob
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoOliver Lemm
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptSebastian Springer
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 

Similaire à Web Performance Optimierung (WPO) (20)

Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & Co
 
Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-Trends
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 

Plus de Martin Kliehm

Open City Data & Open Culture Data
Open City Data & Open Culture DataOpen City Data & Open Culture Data
Open City Data & Open Culture DataMartin Kliehm
 
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion FrankfurtKommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion FrankfurtMartin Kliehm
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3DMartin Kliehm
 
P2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting MotivationP2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting MotivationMartin Kliehm
 
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernWebmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernMartin Kliehm
 
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.Martin Kliehm
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: CanvasMartin Kliehm
 
Das Canvas-Element in HTML5
Das Canvas-Element in HTML5Das Canvas-Element in HTML5
Das Canvas-Element in HTML5Martin Kliehm
 

Plus de Martin Kliehm (10)

Open City Data & Open Culture Data
Open City Data & Open Culture DataOpen City Data & Open Culture Data
Open City Data & Open Culture Data
 
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion FrankfurtKommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
 
P2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting MotivationP2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting Motivation
 
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernWebmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
 
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
 
ARIA und HTML 5
ARIA und HTML 5ARIA und HTML 5
ARIA und HTML 5
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 
ARIA
ARIAARIA
ARIA
 
Das Canvas-Element in HTML5
Das Canvas-Element in HTML5Das Canvas-Element in HTML5
Das Canvas-Element in HTML5
 

Web Performance Optimierung (WPO)

Notes de l'éditeur

  1. „WPO“ ist das Akronym für Web Performance Optimierung, analog zu „SEO“ wird es in den nächsten Jahren eine eigene Industrie werden.
  2. Tenni Theurer und Steve Souders begannen 2006 bei Yahoo!, die Performanz von Webseiten eingehender zu untersuchen. Entsprechend der Prämisse, dass man am Ende mehr profitiert, wenn man seine Erkenntnisse mit anderen teilt, publizierte Yahoo! diese Ergebnisse auf Konferenzen und Blogs noch im selben Jahr. Souders veröffentlichte in der Zwischenzeit zwei Bücher zum Thema und arbeitet heute bei Google.
  3. Ziel von Web Performance Optimierung ist vor allem, schnell und klein zu sein. Wenige, kleine Server-Requests.
  4. Studien von Yahoo! und Google haben ergeben, dass nur 10-20% der Ladezeit vom Server abhängig ist. Bis vor wenigen Jahren dachte man bei Geschwindigkeit ausschließlich an den Server. Tatsächlich werden aber 80-90% der Ladezeit im Frontend fällig. Darum ist Web Performance Optimierung (WPO) im Frontend effizienter. Zwei wichtige Schwachstellen sind JavaScript-Dateien und die schiere Anzahl von Dateien: JavaScript lädt sequentiell und blockiert sämtliche nachfolgenden Inhalte. Darum sollte es nicht im Kopf, sondern im Fuß einer Seite stehen. Zweitens können ältere Browser, vor allem der Internet Explorer, nur 2-4 Dateien parallel laden. Dateien bilden darum eine Schlange, die nur langsam abgearbeitet wird. Ziel ist es darum, durch Zusammenfassung von Dateien die Anzahl der HTTP-Requests zu reduzieren.
  5. In diesem Beispiel einer deutschen Bank ist zu sehen, dass sich die Ladezeit der Seite in zwei Teile aufteilt: das Backend macht in diesem Fall inkl. DNS-Lookup 813 ms oder 13,71% aus, das Frontend über 5,4 Sekunden, das sind 91,13% (es gibt Überlappungen).
  6. Zwei kritische Punkte hier sind das JavaScript und die Bilder: JavaScript lädt nur sequentiell, nicht parallel, und blockiert hier den Seitenaufbau um 1,7 Sekunden. Bilder laden parallel, aber in der Regel nur 2-4 gleichzeitig, weswegen selbst kleine Dateien „Schlange stehen“ müssen, bis sie an der Reihe sind, und für jedes muss eine eigene Serverabfrage gemacht werden.
  7. Jetzt könnte man meinen, 5,9 Sekunden Ladezeit wären doch nicht so übel. Tatsache ist aber, dass Kunden selbst Veränderungen im Bereich von wenigen hundert Millisekunden quittieren:
  8. Zusätzlich zur Seitenverzögerung hat man festgestellt, dass die Nutzer abgelenkter werden. 400 ms. mehr Ladezeit führten zu fast 800 ms. Verzögerung bis zur Interaktion mit der Seite!
  9. AOL hat die Anzahl der Page Views in Abhängigkeit von der Ladegeschwindigkeit untersucht. Wenig überraschend war die Anzahl der besuchten Seiten höher, wenn sie schnell luden. Interessanterweise ist der Kurvenverlauf bei den untersuchten Sites unterschiedlich. Offenbar spielt der Kontext bzw. Surf-Modus eine Rolle, wieviele Seiten ein User durchklickt. Übereinstimmend lässt sich sagen: schnellere Websites laden zum Browsen, zum Herumstöbern ein. Man kann mehr Informationen an den User vermitteln.
  10. Besondere Bedeutung hat WPO noch bekommen, als im April 2010 Google verkündete, dass die Seitengeschwindigkeit nun auch ein Ranking-Parameter sein wird.
  11. Zusammenfassend lässt sich sagen: alle sind glücklich. Die Seiten laden schneller, verbrauchen weniger Serverressourcen und damit weniger Strom, die Kunden werden stöberfreudiger, und der Umsatz steigt. Nebenbei ist es grüner, und wir haben wieder einmal die Welt gerettet – was will man mehr?
  12. Die 14 in „High Performance Websites“ veröffentlichten Regeln.
  13. GZIP lässt sich auf Apache-Servern mit wenigen Zeilen aktivieren. Es wird alles gezippt, das textbasiert ist. Bilder müssen nicht gezippt werden, denn sie sind ohnehin bereits komprimiert.
  14. Durch den Expires Header wird Caching ermöglicht. Je weiter das Datum in der Zukunft ist, desto besser. Wenn JavaScript- und CSS-Dateien serverseitig aggregiert werden, kann die generierte neue Datei mit einem Timestamp versehen werden und mit einem Expires Header in der fernen Zukunft sehr lange gecacht werden. Auch Dateien, die sich nach einem Launch nicht mehr oft ändern, wie CSS-Dateien oder das Favicon, sollten sehr lange gecacht werden. Es wird alles gecacht außer den HTML-Dateien selbst.
  15. Die ideale Zahl an (Sub-) Domains in einer Seite ist 2-4. Einige Websites verwenden eine cookiefreie Subdomain für Bilder, um nicht bei jedem Bild-Request die Cookies mit auszutauschen.
  16. Redirects sollten vermieden werden. Wenn es unbedingt welche geben muss, sollten sie eine 301 oder 302 Response zurückgeben.
  17. CSS-Sprites gibt es seit 2004. Statt vieler kleiner Dateien mit jeweils einem Icon gibt es dann eine einzige mit vielen Icons, die als CSS-Background-Images mit background-position verschoben werden. Auf diese Weise spart man sehr viele zeitintensive HTTP-Requests. http://www.alistapart.com/articles/sprites
  18. Die Website der WebTech-Konferenz bringt es auf stolzer 800 KB mit 101 HTTP-Requests, wovon die meisten auf Profilbilder der Referenten entfallen. Das lässt sich nicht vermeiden. Aber die 10 CSS-Bilder ließen sich reduzieren, die 8 CSS-Dateien zu einer einzigen zusammenfassen und die JavaScript-Dateien ebenso.
  19. Auffällig bei der Websites des Internet Briefings sind die 17 JavaScript-Dateien, die mit 348 KB auch sehr groß sind. Hier lässt sich viel optimieren. 29 Bilder werden vermutlicht nicht gebraucht, und die 9 CSS-Dateien lassen sich serverseitig aggregieren. Ebenfalls auffällig ist, dass über 200 KB nicht gecacht werden.
  20. Apache modconcat aggregiert einfach Dateien ohne viel Aufwand. Nachteil: dies geschieht zur Laufzeit.
  21. Darüberhinaus gibt es noch viele weitere Tools zur Aggregation: per Ant-Script,
  22. … mit JSMin per PHP,
  23. … oder mit JAWR in Java.
  24. JavaScript-Dateien minifizieren (also überflüssigen Whitespace entfernen) kann man mit modjsmin,
  25. … oder, wenn es nur gelegentlich oder kurz vor dem finalen Deployment erforderlich ist, mit der Minifizierungsfunktion in Google Page Speed.
  26. Google Page Speed.
  27. Der Server benötigt 200-500ms zum Zusammenbauen der Seite: diese Zeit kann man nutzen, indem CSS in den <head> gestellt wird. Die Qualität von CSS-Selektoren beeinflusst übrigens kaum die Performance.
  28. JavaScript wird am Ende des Codes unmittelbar vor dem schließenden </body> eingebunden, damit die Dateien keine anderen Inhalte blockieren.
  29. Ausgenommen davon sind non-blocking Scripts, die entweder per JavaScript oder in HTML5 mit dem async-Attribut eingebunden werden.
  30. Mit Content Delivery Networks wie Amazon S3 oder Akamai werden Inhalte von einem Proxy in der Nähe des Users ausgeliefert, was Zeit spart.
  31. Etags setzen sich aus vielen Faktoren zusammen. Bei einer Serverfarm haben verteilte Dateien zwar einen gleichen URL, aber oft unterschiedliche Etags. Dies führt dazu, dass ein Bild, das von Server 1 ausgeliefert wurde, das nächste Mal von Server 2 erneut abgefragt wird, weil durch die unterschiedlichen Etags für den Browser nicht die gleiche Ressource vorliegt. Somit ist Caching ausgehebelt. Am einfachsten ist es, Etag mit obigem Befehl in Apache auszuschalten.
  32. Auch AJAX-/JSON-Requests sollten gecacht werden. Die Freunde bei Facebook ändern sich nicht so oft, man kann sie leicht eine Stunde cachen. GET-Requests lassen sich leicht cachen.
  33. Nach 14 Slides ein bisschen Kurzweil mit Chrome Speed Tests – da geht es auch um Geschwindigkeit.
  34. Auf die im zweiten Buch besprochenen neuen Regeln möchte ich nur stichprobenhaft eingehen, denn sie würden den Umfang dieses Vortrags sprengen. Im Detail sind sie bei Yahoo! Im Web nachzulesen.
  35. Große Websites flushen oft den Buffer, wenigstens nach der Generierung des HTML-Heads. Dann kann der Browser bereits das CSS laden.
  36. Unvorsichtig eingesetztes JavaScript kann den Browser für einige Sekunden einfrieren lassen, insbesondere den Internet Explorer. Vorsicht bei einfach aussehenden Selektoren in jQuery, die dahinter komplexe Abfragen fahren.
  37. Vorsicht auch bei IFRAMEs.
  38. Julien Lecomte hat die Performance von 3rd Party Content untersucht. Während Google Analytics sehr gut mit Ressourcen umgeht, sind andere Skripte sehr groß.
  39. Bilder werden oft von Redakteuren zu hochauflösend oder in einem falschen Format eingebettet. Bilder sollten nie im Browser runterskaliert werden!
  40. Man muss hinzufügen, dass das ein Hack ist. Effizienter ist es, wenn das CMS beim Upload der Bilder entsprechende Korrekturen in Format und Qualität vornimmt.
  41. PngOptimizer
  42. Yahoo! SmushIt
  43. Unter Lazy-Loading versteht man das Nachladen von Bildern, die nicht sofort sichtbar oder nicht im sichtbaren Bereich sind, nachdem die Seite fertig geladen hat.
  44. Es gibt verschiedene JavaScript-Libraries, die Bilder erst dann nachladen, wenn man sie braucht.
  45. Anstelle von CSS-Sprites kann man Icons auch in einer eigenen Schriftdatei einbetten. Aus Gründen der Barrierefreiheit sollten die Icons nicht auf die Buchstaben ABC gelegt werden, sondern auf das entsprechenden Unicode-Zeichen, etwa für einen Stern.
  46. Gegen Ende der Frontend-Programmierung sollten alle CSS background-images durch data:URIs ersetzt werden. Damit werden weitere HTTP-Requests eingespart.
  47. Base64 braucht man, damit die data:URIs auch im Safari auf dem iPhone angezeigt werden.
  48. MHTML im IE, Teil 1: Zunächst baut man in einem CSS-Kommentar den data:URI ein und referenziert ihn mit einer ID (Content-Location)
  49. MHTML im IE, Teil 2: Als URL des background-images verwendet man dann das CSS mit „!ID“ angehängt