Web Performance

Optimization

Fabian Lange, codecentric AG

WARUM WPO? 5 Beispiele

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

Unzufriedenheit 2 Sekunden

Web Performance Optimization Mehr Erfolg durch

Ladezeiten Erstens

Codeausführung Zweitens

Standardkompatibilität Drittens

„SEO - Search Engine Optimization ist ein Thema von Gestern“

Steve Souders sagt

Seiten werden gefunden Google & Bing suchen

Gute Inhalte dominieren Blogs beweisen

SEO Voodoo funktioniert nicht mehr

Schamanen bedauern

Es gibt viel Budget für SEO Aber

WPO – Web Performance Optimization bewältigt aktuelle Herausforderungen

Steve hat Recht

Ladezeiten

Fragile Netzinfrastruktur Mobile Datennetze

Hohe Kosten Mobile Datennetze

Unerwartete Begrenzungen Verbindungen & Datentransfer

Wasserfall Charts Kostenaufstellung

Kombination Sprites & JavaScript

Kompression Bilder & JavaScript

Caching Datenübertragung vermeiden

Codeausführung

Unvollständige Seiten hängende Werbebanner

Unbenutzbarkeit viele Daten, suboptimaler Code

Nichtverfügbarkeit Servercode Probleme

Vertrauensverlust Nicht reagierender Zahlungsdienst

0

50

100

150

200

250

300

Sunspider Benchmark

Safari 5

Firefox 7

Chrome 16

Opera 11

IE 9

Browserkrieg 2.0 Schneller, höher, weiter

Nicht Blockieren Google Async Loader & Require.js

JavaScript Profiling WebKit Inspector

JavaScript Profiling Firebug

JavaScript Profiling IE 9

Browser Profiling Dynatrace Ajax

Anwendungsmonitoring AppDynamics

Java Profiling JProfiler

PHP Profiling Xdebug & WinCacheGrind

Symfony2 Profiling Web Profiler

Ruby Profiling ruby-prof

Standardkompatibilität

Browserkrieg 1.0 Interoperabilität

Browserkrieg 3.0 Interoperabilität

HTML 5 PC & Mobile

JavaScript Frameworks Kompatibilität dank

Ressourcen Teilen Supercache

Best Practices Yahoo 35, Google 29

Best Practices One Stop Shop

Automatische Optimierung Zukunftsmusik?

Asset Management für PHP Assetic

Messen & Handeln Fazit

Bildnachweis

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

Referenzen

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

@CodingFabian Fabian.Lange@codecentric.de

Rate my talk @ joind.in/3886