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

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

Große Websites begannen mit Performance Optimierung

Minimize HTTP Requests

HTTP-Requests durch Zusammenfassen von Dateien verringern

Externe Dateien zusammenfassen

  • 2 Requests weniger
  • Bringt das was in modernen Browsern?
Gelb: Zeit für die Request-Anfrage. Blau: Download der Datei.

Browserversionen 2008 - Sept. 2011

Moderne / Alt-Browser Optimimierung

Resource über mehrere (Sub-)Domains verteilen

JavaScript mit JavaScript laden

JavaScript mit JavaScript laden

  • 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

Desktop vs Mobile

neue Herausforderungen

Warum ist Performance auch/gerade mobil wichtig?

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

mobiles Netz/Geschwindigkeit

ganz kurz: localStorage

localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
	
localStorage.getItem("key1");
localStorage["key1"];
	
localStorage.removeItem("key1"); 
	
localStorage.length;
	
localStorage.clear(); 
	

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+

weiteres Optimierungspotenzial

sowohl für Desktop als auch für mobile

Bilder

Richtiges Bildformat verwenden!

JPG nur für Fotos! -> JPEGmini

CSS Sprites

Sprite Images

               

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>

weitere Möglichkeiten - Data URL

Optimierung durch CSS3

Caching

kein TYPO3-Cache! Browser-Cache

<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>
	

Neu in TYPO3 4.6

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;

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

Testtools

Danke für die Aufmerksamkeit!

Fragen?