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

Web Performance Optimization - Web Tech Conference 2011 Talk