SlideShare ist ein Scribd-Unternehmen logo
1 von 55
Downloaden Sie, um offline zu lesen
Fabian Lange, codecentric AG



Web Performance
Optimization
5 Beispiele

WARUM WPO?
Yahoo

400 Millisekunden
9% Traffic
Microsoft Bing

1 Sekunde
56 Millionen USD   pro Jahr
Mozilla

2,2 Sekunden
60 Millionen Firefox
Shopzilla

4 Sekunden
5% Kunden
Amazon

100 Millisekunden
245 Millionen USD   pro Jahr
2 Sekunden

Unzufriedenheit
Mehr Erfolg durch

Web Performance Optimization
Erstens

Ladezeiten
Zweitens

Codeausführung
Drittens

Standardkompatibilität
Steve Souders sagt

„SEO - Search Engine Optimization
ist ein Thema von Gestern“
Google & Bing suchen

Seiten werden gefunden
Blogs beweisen

Gute Inhalte dominieren
Schamanen bedauern

SEO Voodoo funktioniert
nicht mehr
Aber

Es gibt viel Budget für SEO
Steve hat Recht

WPO – Web Performance Optimization
bewältigt aktuelle Herausforderungen
Ladezeiten
Mobile Datennetze

Fragile Netzinfrastruktur
Mobile Datennetze

Hohe Kosten
Verbindungen & Datentransfer

Unerwartete Begrenzungen
Kostenaufstellung

Wasserfall Charts
Sprites & JavaScript

Kombination
Bilder & JavaScript

Kompression
Datenübertragung vermeiden

Caching
Codeausführung
hängende Werbebanner

Unvollständige Seiten
viele Daten, suboptimaler Code

Unbenutzbarkeit
Servercode Probleme

Nichtverfügbarkeit
Nicht reagierender Zahlungsdienst

Vertrauensverlust
300


250


                                                  Safari 5
200
                                                  Firefox 7
                                                  Chrome 16
150                                               Opera 11
                                                  IE 9

      Schneller, höher, weiter
100

      Browserkrieg 2.0
50


 0
                            Sunspider Benchmark
Google Async Loader & Require.js

Nicht Blockieren
WebKit Inspector

JavaScript Profiling
Firebug

JavaScript Profiling
IE 9

JavaScript Profiling
Dynatrace Ajax

Browser Profiling
AppDynamics

Anwendungsmonitoring
JProfiler

Java Profiling
Xdebug & WinCacheGrind

PHP Profiling
Web Profiler

Symfony2 Profiling
ruby-prof

Ruby Profiling
Standardkompatibilität
Interoperabilität

Browserkrieg 1.0
Interoperabilität

Browserkrieg 3.0
PC & Mobile

HTML 5
Kompatibilität dank

JavaScript Frameworks
Supercache

Ressourcen Teilen
Yahoo 35, Google 29

Best Practices
One Stop Shop

Best Practices
Zukunftsmusik?

Automatische Optimierung
Assetic

Asset Management für PHP
Fazit

Messen & Handeln
Kätzchen            http://www.flickr.com/photos/crsan/4804813050
Netzwerkswitch      http://www.flickr.com/photos/br1dotcom/4296987925
JavaScript Code     http://www.flickr.com/photos/dmitry-baranovskiy/2378867408
Html5 Sticker       http://www.w3.org/html/logo
Heuballen           http://www.flickr.com/photos/janeladeimagens/166051502
Weinfässer          http://www.flickr.com/photos/jimnix/4623989305
Voodoo              http://www.flickr.com/photos/adamcohn/2827720891
Antennen            http://www.flickr.com/photos/thristian/295133206
Telefonrechnung     http://www.flickr.com/photos/wili/2254907478
Straßenarbeiten     http://www.flickr.com/photos/dougtone/4153798733
Ordner Icon         http://www.iconarchive.com/artist/deleket.html
Desk                http://www.flickr.com/photos/akeg/4652982150
Apple vs. Android   http://aoisora9x.deviantart.com/gallery/#/d2rpdbp




  Bildnachweis
Firebug                          http://getfirebug.com
Smart Sprites Generator          http://csssprites.org
Yahoo UI Compressor              http://developer.yahoo.com/yui/compressor
Smush.it                         http://www.smushit.com
RFC 2616 - HTTP Spec (Caching)   http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html
Require.js                       http://requirejs.org
Google Ajax Libs                 http://code.google.com/intl/de-DE/apis/libraries
AppDynamics                      http://appdynamics.com/free
JProfiler                        http://www.jprofiler.com
Xdebug                           http://www.xdebug.org
WinCacheGrind                    http://sourceforge.net/projects/wincachegrind
ruby-prof                        http://ruby-prof.rubyforge.org
YSlow                            http://developer.yahoo.com/yslow
Show Slow                        http://www.showslow.com
Mod_pagespeed                    http://code.google.com/p/modpagespeed
Assetic                          https://github.com/kriswallsmith/assetic




  Referenzen

Rate my talk @ joind.in/3886                                      @CodingFabian
                                                                  Fabian.Lange@codecentric.de

Weitere ähnliche Inhalte

Was ist angesagt?

Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Florian Elbers
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
Thomas Christinck
 

Was ist angesagt? (18)

Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
Linkrisiko Management - SEOkomm 2013
Linkrisiko Management - SEOkomm 2013Linkrisiko Management - SEOkomm 2013
Linkrisiko Management - SEOkomm 2013
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Das Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisDas Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der Praxis
 
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das WebFahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Flash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitFlash, Ajax & Barrierefreiheit
Flash, Ajax & Barrierefreiheit
 
Barcamp Südtirol 2014 - Robert Leiter - Zurück in die Zukunft
Barcamp Südtirol 2014 - Robert Leiter - Zurück in die ZukunftBarcamp Südtirol 2014 - Robert Leiter - Zurück in die Zukunft
Barcamp Südtirol 2014 - Robert Leiter - Zurück in die Zukunft
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Cologne Web Performance Meetup 29.04.2020
Cologne Web Performance Meetup 29.04.2020Cologne Web Performance Meetup 29.04.2020
Cologne Web Performance Meetup 29.04.2020
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Paginierung - 10 dos and don'ts - OMWest 2019
Paginierung - 10 dos and don'ts - OMWest 2019 Paginierung - 10 dos and don'ts - OMWest 2019
Paginierung - 10 dos and don'ts - OMWest 2019
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
Wordpress für Profis
Wordpress für ProfisWordpress für Profis
Wordpress für Profis
 
Wordpress - Einführung und Überblick über die Kernfunktionen
Wordpress - Einführung und Überblick über die KernfunktionenWordpress - Einführung und Überblick über die Kernfunktionen
Wordpress - Einführung und Überblick über die Kernfunktionen
 

Andere mochten auch

Projecte final
Projecte finalProjecte final
Projecte final
fgruas1
 
U4 enchúfate indicaciones5to
U4 enchúfate indicaciones5toU4 enchúfate indicaciones5to
U4 enchúfate indicaciones5to
SofiaVR
 
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
David Maciejewski
 
Agenturpräsentation FIGGE+SCHUSTER AG
Agenturpräsentation FIGGE+SCHUSTER AGAgenturpräsentation FIGGE+SCHUSTER AG
Agenturpräsentation FIGGE+SCHUSTER AG
FIGGE+SCHUSTER AG
 

Andere mochten auch (18)

Artículo Científico Compresor A/C
Artículo Científico Compresor A/CArtículo Científico Compresor A/C
Artículo Científico Compresor A/C
 
Projecte final
Projecte finalProjecte final
Projecte final
 
m20 Estudios
m20 Estudiosm20 Estudios
m20 Estudios
 
Les productores
Les productoresLes productores
Les productores
 
U4 enchúfate indicaciones5to
U4 enchúfate indicaciones5toU4 enchúfate indicaciones5to
U4 enchúfate indicaciones5to
 
Leben durch Podcasting - Die Metaebene
Leben durch Podcasting - Die MetaebeneLeben durch Podcasting - Die Metaebene
Leben durch Podcasting - Die Metaebene
 
Dn12 u3 a19_maah tema libre
Dn12 u3 a19_maah  tema libreDn12 u3 a19_maah  tema libre
Dn12 u3 a19_maah tema libre
 
Website Optimierungen
Website OptimierungenWebsite Optimierungen
Website Optimierungen
 
Símbols pneumàtics
Símbols pneumàticsSímbols pneumàtics
Símbols pneumàtics
 
Projecte Final Competic 2
Projecte Final Competic 2Projecte Final Competic 2
Projecte Final Competic 2
 
Ecommerce für Verlage
Ecommerce für VerlageEcommerce für Verlage
Ecommerce für Verlage
 
Pneumatica i hidraulica 2014.ppt
Pneumatica i hidraulica 2014.ppt Pneumatica i hidraulica 2014.ppt
Pneumatica i hidraulica 2014.ppt
 
Tema 12 _Accionaments Pneumàtics (1r batx)
Tema 12 _Accionaments Pneumàtics (1r batx)Tema 12 _Accionaments Pneumàtics (1r batx)
Tema 12 _Accionaments Pneumàtics (1r batx)
 
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
 
Questionari hidraulica i neumatica
Questionari hidraulica i neumaticaQuestionari hidraulica i neumatica
Questionari hidraulica i neumatica
 
Frauen aus Russland im Kontext der deutschen Einwanderungsgesellschaft - Sozi...
Frauen aus Russland im Kontext der deutschen Einwanderungsgesellschaft - Sozi...Frauen aus Russland im Kontext der deutschen Einwanderungsgesellschaft - Sozi...
Frauen aus Russland im Kontext der deutschen Einwanderungsgesellschaft - Sozi...
 
Multiple IT-Sourcingund Global Delivery
Multiple IT-Sourcingund Global DeliveryMultiple IT-Sourcingund Global Delivery
Multiple IT-Sourcingund Global Delivery
 
Agenturpräsentation FIGGE+SCHUSTER AG
Agenturpräsentation FIGGE+SCHUSTER AGAgenturpräsentation FIGGE+SCHUSTER AG
Agenturpräsentation FIGGE+SCHUSTER AG
 

Ähnlich wie Web Performance Optimization - Web Tech Conference 2011 Talk

Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Nico Steiner
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 

Ähnlich wie Web Performance Optimization - Web Tech Conference 2011 Talk (20)

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
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-Trends
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
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)
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
Einstieg in das Vueniverse
Einstieg in das VueniverseEinstieg in das Vueniverse
Einstieg in das Vueniverse
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
SEOs als Dienstleister
SEOs als DienstleisterSEOs als Dienstleister
SEOs als Dienstleister
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
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
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 

Mehr von Fabian Lange

Mehr von Fabian Lange (10)

SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012
 
The SPDY Protocol
The SPDY ProtocolThe SPDY Protocol
The SPDY Protocol
 
Aspects of modern APM solutions
Aspects of modern APM solutionsAspects of modern APM solutions
Aspects of modern APM solutions
 
Performance - a challenging craft
Performance  - a challenging craftPerformance  - a challenging craft
Performance - a challenging craft
 
Agile Development of High Performance Applications
Agile Development of High Performance ApplicationsAgile Development of High Performance Applications
Agile Development of High Performance Applications
 
Rich Ajax Platform - Programming for Web and Rich Client
Rich Ajax Platform - Programming for Web and Rich ClientRich Ajax Platform - Programming for Web and Rich Client
Rich Ajax Platform - Programming for Web and Rich Client
 
Eclipse Rich Ajax Platform
Eclipse Rich Ajax PlatformEclipse Rich Ajax Platform
Eclipse Rich Ajax Platform
 
Ant Maven
Ant MavenAnt Maven
Ant Maven
 
Codecentric At Ajax World Conference San Jose
Codecentric At Ajax World Conference San JoseCodecentric At Ajax World Conference San Jose
Codecentric At Ajax World Conference San Jose
 
Full Stack Web Application Performance Tuning
Full Stack Web Application Performance TuningFull Stack Web Application Performance Tuning
Full Stack Web Application Performance Tuning
 

Web Performance Optimization - Web Tech Conference 2011 Talk