SlideShare ist ein Scribd-Unternehmen logo
Webmontag. Frankfurt. Schneller. Nur 15 Minuten. WPO. Web Performance Optimierung. Namics. Martin Kliehm. Senior Frontend Engineer.@kliehm. @namics. 17. Mai 2010
Web Performance Optimierung seit 2006 17.05.2010 Performance. Webmontag. 2
Performance:schnell & klein sein. 17.05.2010 3 Performance. Webmontag. http://flic.kr/p/5jZ2nP
Performance. Webmontag. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 4 http://webpagetest.org
Performance. Webmontag. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 5 ← Backend (HTML): 8,67% DNS Lookup:	299 msBackend (HTML):	514 ms = 8,67%Frontend:	5402 ms = 91,12% JavaScript:1717 ms
Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 6 DNS Lookup:	299 msBackend (HTML):	514 ms = 8,67%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? 17.05.2010 7 Performance. Webmontag. 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 17.05.2010 Performance. Webmontag. 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 17.05.2010 Performance. Webmontag. 9
17.05.2010 Performance. Webmontag. 10 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
17.05.2010 Performance. Webmontag. 11 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
17.05.2010 Performance. Webmontag. 12 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
17.05.2010 Performance. Webmontag. 13 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
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 17.05.2010 Performance. Webmontag. 14
Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics. 17.05.2010 15 Performance. Webmontag. http://flic.kr/p/8VHFb
Die (bekannten) 14 Regeln 17.05.2010 16 Performance. Webmontag.
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 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 17.05.2010 Performance. Webmontag. 17 http://developer.yahoo.com/performance/rules.html
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 17.05.2010 Performance. Webmontag. 18 http://developer.yahoo.com/performance/rules.html
17.05.2010 19 Performance. Webmontag. Neue (?) Ideen:Keine eigene Datei print.css
<link type="text/css"media="print"src="print.css" /> 17.05.2010 Performance. Webmontag. 20 @mediaprint { a { text-decoration: none; }} ü
17.05.2010 21 Performance. Webmontag. CSS background-images reduzieren mit data:URI
#wrapper {	background:url( bg.gif ); } 17.05.2010 Performance. Webmontag. 22 #wrapper {	background:url( "data:image/png; 			base64,iVBORw0[…]" ); } ü http://software.hixie.ch/utilities/cgi/data/data
		Die Lösung: M(ultipart)HTML		in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATORContent-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/ 17.05.2010 Performance. Webmontag. 23 http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
		Die Lösung: M(ultipart)HTML		in der ie.css#wrapper {	background:url( "mhtml:http://me.com/ie.css!bgimg1" );} 17.05.2010 Performance. Webmontag. 24 http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
17.05.2010 25 Performance. Webmontag. Apache-Module: modconcat, modjsmin, moddims
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 17.05.2010 Performance. Webmontag. 26 http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
Apache modjsmin $ apxs -c mod_jsmin.c Loadmodulejsmin_modulemodules/mod_jsmin.so 17.05.2010 Performance. Webmontag. 27 http://code.google.com/p/modjsmin/
Apache moddims <imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/		http://yourdomain.com/ 			lorem.jpg"width="320" height="240"	alt="Loremipsum" /> 17.05.2010 Performance. Webmontag. 28 http://code.google.com/p/moddims/
17.05.2010 29 Performance. Webmontag. Lazy-loadimages
Lazy-Loading von Bildern Verschiedene JavaScript-Libraries: 17.05.2010 Performance. Webmontag. 30 ,[object Object]
ImageLoader (YUI)
Sonar (AOL, standalone),[object Object]
@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?) 17.05.2010 Performance. Webmontag. 32

Weitere ähnliche Inhalte

Was ist angesagt?

Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
Kai Donato
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
Kai Donato
 
Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?
Belsoft
 
FMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael ValentinFMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael Valentin
Verein FM Konferenz
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!
Kai Donato
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
Belsoft
 
Wer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die QualWer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die Qual
Belsoft
 

Was ist angesagt? (7)

Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?
 
FMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael ValentinFMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael Valentin
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
 
Wer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die QualWer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die Qual
 

Ähnlich wie Performance. Webmontag. Frankfurt.

Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
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
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Nico Steiner
 
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 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
Nico Steiner
 
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
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
Bastian Grimm
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
AOE
 
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
SEARCH ONE
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
Alexander Merkel
 
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung
Nikolas Schmidt-Voigt
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
Fabian Lange
 
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
Sebastian Springer
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
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
Bastian Grimm
 

Ähnlich wie Performance. Webmontag. Frankfurt. (20)

Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
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
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
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 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
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)
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
 
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
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
 
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
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
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
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
 

Mehr von Martin Kliehm

Open City Data & Open Culture Data
Open City Data & Open Culture DataOpen City Data & Open Culture Data
Open City Data & Open Culture Data
Martin 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 Frankfurt
Martin Kliehm
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
Martin 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 Motivation
Martin Kliehm
 
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernWebmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Martin 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
 
ARIA und HTML 5
ARIA und HTML 5ARIA und HTML 5
ARIA und HTML 5
Martin Kliehm
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
Martin Kliehm
 
ARIA
ARIAARIA
Das Canvas-Element in HTML5
Das Canvas-Element in HTML5Das Canvas-Element in HTML5
Das Canvas-Element in HTML5
Martin Kliehm
 

Mehr von 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
 

Performance. Webmontag. Frankfurt.

  • 1. Webmontag. Frankfurt. Schneller. Nur 15 Minuten. WPO. Web Performance Optimierung. Namics. Martin Kliehm. Senior Frontend Engineer.@kliehm. @namics. 17. Mai 2010
  • 2. Web Performance Optimierung seit 2006 17.05.2010 Performance. Webmontag. 2
  • 3. Performance:schnell & klein sein. 17.05.2010 3 Performance. Webmontag. http://flic.kr/p/5jZ2nP
  • 4. Performance. Webmontag. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 4 http://webpagetest.org
  • 5. Performance. Webmontag. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 5 ← Backend (HTML): 8,67% DNS Lookup: 299 msBackend (HTML): 514 ms = 8,67%Frontend: 5402 ms = 91,12% JavaScript:1717 ms
  • 6. Komponenten einer Webseite:Ein großes deutsches Bankhaus 17.05.2010 6 DNS Lookup: 299 msBackend (HTML): 514 ms = 8,67%Frontend: 5402 ms = 91,12% JavaScript:1717 ms JavaScript lädt sequentiell Bilder:nur 2 – 4parallel Gesamt: 5928 ms Frontend: 91,12% Performance. Webmontag.
  • 7. 5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder? 17.05.2010 7 Performance. Webmontag. http://flic.kr/p/27sG2k
  • 8. 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 17.05.2010 Performance. Webmontag. 8
  • 9. 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 17.05.2010 Performance. Webmontag. 9
  • 10. 17.05.2010 Performance. Webmontag. 10 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 11. 17.05.2010 Performance. Webmontag. 11 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 12. 17.05.2010 Performance. Webmontag. 12 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 13. 17.05.2010 Performance. Webmontag. 13 http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
  • 14. 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 17.05.2010 Performance. Webmontag. 14
  • 15. Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics. 17.05.2010 15 Performance. Webmontag. http://flic.kr/p/8VHFb
  • 16. Die (bekannten) 14 Regeln 17.05.2010 16 Performance. Webmontag.
  • 17. 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 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 17.05.2010 Performance. Webmontag. 17 http://developer.yahoo.com/performance/rules.html
  • 18. 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 17.05.2010 Performance. Webmontag. 18 http://developer.yahoo.com/performance/rules.html
  • 19. 17.05.2010 19 Performance. Webmontag. Neue (?) Ideen:Keine eigene Datei print.css
  • 20. <link type="text/css"media="print"src="print.css" /> 17.05.2010 Performance. Webmontag. 20 @mediaprint { a { text-decoration: none; }} ü
  • 21. 17.05.2010 21 Performance. Webmontag. CSS background-images reduzieren mit data:URI
  • 22. #wrapper { background:url( bg.gif ); } 17.05.2010 Performance. Webmontag. 22 #wrapper { background:url( "data:image/png; base64,iVBORw0[…]" ); } ü http://software.hixie.ch/utilities/cgi/data/data
  • 23. Die Lösung: M(ultipart)HTML in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATORContent-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/ 17.05.2010 Performance. Webmontag. 23 http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
  • 24. Die Lösung: M(ultipart)HTML in der ie.css#wrapper { background:url( "mhtml:http://me.com/ie.css!bgimg1" );} 17.05.2010 Performance. Webmontag. 24 http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
  • 25. 17.05.2010 25 Performance. Webmontag. Apache-Module: modconcat, modjsmin, moddims
  • 26. 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 17.05.2010 Performance. Webmontag. 26 http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
  • 27. Apache modjsmin $ apxs -c mod_jsmin.c Loadmodulejsmin_modulemodules/mod_jsmin.so 17.05.2010 Performance. Webmontag. 27 http://code.google.com/p/modjsmin/
  • 28. Apache moddims <imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/ http://yourdomain.com/ lorem.jpg"width="320" height="240" alt="Loremipsum" /> 17.05.2010 Performance. Webmontag. 28 http://code.google.com/p/moddims/
  • 29. 17.05.2010 29 Performance. Webmontag. Lazy-loadimages
  • 30.
  • 32.
  • 33. @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?) 17.05.2010 Performance. Webmontag. 32
  • 34. Danke. twitter: @kliehm Folien: http://slideshare.net/kliehm/performancewmfra Links: http://delicious.com/kliehm/performance Kontakt: http://klie.hm/profile Performance. Webmontag. 17.05.2010 33

Hinweis der Redaktion

  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. TenniTheurer 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. Bei Namics befassen wir uns mit WPO seit Sommer 2006.
  3. 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.
  4. 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!
  5. 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.
  6. Es gibt verschiedene JavaScript-Libraries, die Bilder erst dann nachladen, wenn man sie braucht.