page.speed = 1
Web Performance Optimierung 2011

maddesigns | Sven Wolfermann
TYPO3camp München, 10.09.2011

Pfeiltasten zur Navigation nutzen

Wer ist die Flitzpiepe da überhaupt?

Sven Wolfermann - Certified TYPO3 Integrator

Sven Wolfermann, 34 - Freelancer aus Berlin
hat Ahnung von TYPO3 & CSS (sagt er)
TYPO3camp Berlin Orga
schreibt für das Webstandards-Magazin
Twitter: @maddesigns

Performance-Historie

durch den Anstieg der Bandbreite stieg im Laufe der Jahre auch die Größe der Webseiten (gesamte Dateigröße)

allerdings ist die Verbindung nicht überall gleich gut

mit Zunahme der Zugriffe über mobile Endgeräte bekam Bandbreite neue Bedeutung

http://www.websiteoptimization.com/speed/tweak/average-web-page/

Große Websites begannen mit Performance Optimierung

Amazon: +100ms = -1% Umsatz
Google/Bing: +500ms = -20% Suchanfragen

Shopzilla.de: -3500ms = +12% Umsatz
Firefox: Performance Optimierung + 10 Mio Downloads

14 Performance Rules by Yahoo -> Yslow

http://developer.yahoo.com/performance/rules.html

Google Page Speed

http://code.google.com/intl/de-DE/speed/page-speed/

Minimize HTTP Requests

HTTP-Requests durch Zusammenfassen von Dateien verringern

Externe Dateien zusammenfassen

Alte Browser laden und verarbeiten externe Resource nacheinander

Dateien zusammenfassen, HTTP-Request vermeiden

<script src="foo+bar+baz.js"></script>

2 Requests weniger
Bringt das was in modernen Browsern?

Gelb: Zeit für die Request-Anfrage. Blau: Download der Datei.

Moderne / Alt-Browser Optimimierung

2008

IE6, IE7: 70% Marktanteil
2 Dateien/Domain gleichzeitig laden, nacheinander verarbeitet

2011

IE6, IE7: 10% Marktanteil
IE8, Firefox >=3.6, Chrome: 70% Marktanteil
6 Dateien/Domain gleichzeitig laden, parallel verarbeitet

Sind also einige WPO Tipps nicht mehr gültig?

~~Externe Dateien zusammenfassen~~
~~Dateien über mehrere (Sub-)Domains verteilen~~

Resource über mehrere (Sub-)Domains verteilen

2008: 2 Verbindungen pro Hostname
2011: 6 Verbindungen pro Hostname
Jeder Hostname führt zu zusätzlichen DNS Verbindungen/Prüfungen (Zeit)
6 Verbindungen pro Hostname - optimale Parallelisierung
Google Page Speed empfiehlt Verteilung über mehrere Hostnames nicht mehr

JavaScript mit JavaScript laden

Moderne Browsers unterstützen das parallele Laden von JavaScript-Dateien
Aber JavaScript durch JavaScript geladen wird nacheinander verarbeitet

<script src="loader.js"></script>
<script>loader.load('http://www.example.com/core.js');</script>

Browserübergreifend einheitliches Verhalten und schnellstmögliche Abarbeitung dynamischer Scripte erreicht man über ein zusätzlich gesetztes 'async = true'

JavaScript mit JavaScript laden

<script src="loader.js"></script>
<script src="http://www.example.com/core.js"></script>

Scripts über HTML laden <script src=""></script> ist optimal
Script loader NICHT für JS-Dateien, die für das erste Laden wichtig sind, bzw. dann auf "async = true" setzen
Script loader für dynamische Inhalte/Funktionen nach dem ersten Laden besser
Page Speed für Chrome hat eine neue Regel, die das überprüft

http://pagespeed-velocity2011.appspot.com/

Desktop vs Mobile

neue Herausforderungen

Warum ist Performance auch/gerade mobil wichtig?

das mobile Netz ist teilweise erhebliche langsamer
mobile Prozessoren sind langsamer
mobile Browser sind nicht so leistungsfähig wie Desktop-Browser
mobile Nutzer nutzen das Internet anders/unterschiedlich
Das Rendering auf Smartphones ist 40%-80% langsamer
auf älteren internetfähigen Geräten 4x-10x langsamer
User erwarten dass mobiles Browsing genau so schnell ist

Mobile device CPU performance

Sunspider JavaScript Benchmark

Device	Time (ms)
MacBook Pro (2.4GHz, Chrome 10)	427
Nexus S (Android Gingerbread)	5869
Samsung Captivate (Android Eclair)	12606

10x JavaScript Ausführungszeit auf mobilen Devices
JavaScript das auf dem Desktop 100ms benötigt, benötigt ~1 Sekunde auf mobilen Geräten

mobiles Netz/Geschwindigkeit

mehrere Resourcen gleichzeitig sind zwar möglich, Verbindungen/Übertragungen dauern aber länger
mobile ist jeder zusätzlicher HTTP-Request zeitintensiv
deshalb für mobile: Dateien zusammenfassen!
noch besser: Für die Startseite ist es ratsam CSS & Javascript direkt im <head> einzubinden und erst auf Folgeseiten über <link> auszulagern, damit es cachebar ist
noch schöner: JS & CSS in HTML5 localStorage speichern

ganz kurz: localStorage

localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";

localStorage.getItem("key1");
localStorage["key1"];

localStorage.removeItem("key1");

localStorage.length;

localStorage.clear();

http://php-html.net/tutorials/html5-local-storage-guide/

HTML5 Application Cache

In HTML5 können je nach Browser/Device in einen gesonderten Cache gespeichert werden.

<!DOCTYPE HTML>
<html manifest="/my.manifest">
...
</html>

my.manifest

CACHE MANIFEST
/my.js
/my.css
...

	AddType text/cache-manifest .manifest

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
8+	3.5+	4.0+	4.0+	10.5+	2.0+	2.0+

http://diveintohtml5.org/offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/

weiteres Optimierungspotenzial

sowohl für Desktop als auch für mobile

Bilder

Richtiges Bildformat verwenden!

PNG vor GIF bevorzugen
PNG8 für bis zu 256 Farben
PNG24 für Alphatransparenzen
Fireworks oder das Kommandozeilentool PNGQuant können PNG8-Grafiken mit Alphatransparenz erzeugen
Bilddaten zusätzlich verringern!
Crushing PNG (entfernen unnötiger Daten)
=> Mac: http://imageoptim.pornel.net/
=> PC: http://psydk.org/PngOptimizer

Alpha Transparency in PNG-8 Images Without Using Fireworks

JPG nur für Fotos! -> JPEGmini

http://www.jpegmini.com/

CSS Sprites

Bilder zusammenfassen und mit CSS background-position verschieben

CSS Sprite - Ladegeschwindigkeit optimieren und HTTP-Requests verringern

weitere Möglichkeiten - Data URL

HTML

<img src="logo-maddesigns.png" alt="Logo maddesigns">

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE...">

CSS

<style>
  .logo { background-image: url("logo-maddesigns.png") }
</style>

<style>
  .logo { background-image: url("data:image/png;base64,iVBORw...")}
</style>

http://de.wikipedia.org/wiki/Data-URL

weitere Möglichkeiten - Data URL

optimal für kleine Bilddaten, die man nicht im Sprite-Image zusammenfassen kann/will
optimal für mobile Websites - Einsparen von HTTP-Requests

Nachteile

Resourcen nicht cachebar (externe CSS-Dateien schon)
bei Bildänderungen muss neu kodiert werden
IE8+ (Länge auf 32Kb begrenzt)

Optimierung durch CSS3

Layout-Grafiken durch CSS3 ersetzen
gute Unterstützung in mobilen Browsern
progressive enhancement!
Teaserboxen komplett ohne Bilder

Muss jede Seite in jedem Browser gleich aussehen?

Caching

kein TYPO3-Cache! Browser-Cache

Expires Header verwenden

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
</IfModule>

GZIP verwenden

<IfModule mod_deflate.c>
  <FilesMatch "\.(js|css)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

JS/CSS komprimieren

TYPO3 bietet ab der Version 4.6 die Möglichkeit JS & CSS zu komprimieren

config.compressJs = 1
config.compressCss = 1

Frontend Kompression muss im Install Tool aktiviert sein

$GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 5;

TYPO3 4.6 Release Notes (beta2)

JS/CSS zusammenfassen

config.concatenateJs = 1
config.concatenateCss = 1

Dateien exkludieren

page.includeJSlibs {
    jquery = http://code.jquery.com/jquery-1.6.3.min.js
    jquery.external = 1
    jquery.disableCompression = 1
    jquery.excludeFromConcatenation = 1
}

Gleiches geht auch bei CSS-Dateien

Extension: scriptmerger

Neu: HTML5 Support
Support für ältere Browser
vielfältig konfigurierbar
Performance ohne Ende!

http://typo3.org/extensions/repository/view/scriptmerger/current/

Danke für die Aufmerksamkeit!

Fragen?

page.speed = 1
Web Performance Optimierung 2011

Wer ist die Flitzpiepe da überhaupt?

Performance-Historie

Große Websites begannen mit Performance Optimierung

14 Performance Rules by Yahoo -> Yslow

Google Page Speed

Minimize HTTP Requests

Externe Dateien zusammenfassen

Browserversionen 2008 - Sept. 2011

Moderne / Alt-Browser Optimimierung

Resource über mehrere (Sub-)Domains verteilen

JavaScript mit JavaScript laden

JavaScript mit JavaScript laden

Desktop vs Mobile

Warum ist Performance auch/gerade mobil wichtig?

Mobile device CPU performance

mobiles Netz/Geschwindigkeit

ganz kurz: localStorage

HTML5 Application Cache

weiteres Optimierungspotenzial

Bilder

JPG nur für Fotos! -> JPEGmini

CSS Sprites

Sprite Images

weitere Möglichkeiten - Data URL

weitere Möglichkeiten - Data URL

Optimierung durch CSS3

Caching

GZIP verwenden

Neu in TYPO3 4.6

JS/CSS komprimieren

JS/CSS zusammenfassen

Extension: scriptmerger

Testtools

Danke für die Aufmerksamkeit!

page.speed = 1 Web Performance Optimierung 2011

Wer ist die Flitzpiepe da überhaupt?

Performance-Historie

Große Websites begannen mit Performance Optimierung

14 Performance Rules by Yahoo -> Yslow

Google Page Speed

Minimize HTTP Requests

Externe Dateien zusammenfassen

Browserversionen 2008 - Sept. 2011

Moderne / Alt-Browser Optimimierung

Resource über mehrere (Sub-)Domains verteilen

JavaScript mit JavaScript laden

JavaScript mit JavaScript laden

Desktop vs Mobile

Warum ist Performance auch/gerade mobil wichtig?

Mobile device CPU performance

mobiles Netz/Geschwindigkeit

ganz kurz: localStorage

HTML5 Application Cache

weiteres Optimierungspotenzial

Bilder

JPG nur für Fotos! -> JPEGmini

CSS Sprites

Sprite Images

weitere Möglichkeiten - Data URL

weitere Möglichkeiten - Data URL

Optimierung durch CSS3

Caching

GZIP verwenden

Neu in TYPO3 4.6

JS/CSS komprimieren

JS/CSS zusammenfassen

Extension: scriptmerger

Testtools

Danke für die Aufmerksamkeit!

page.speed = 1
Web Performance Optimierung 2011