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