Wolfgang Wagner, wowa-webdesign.de

TYPO3 Performance Optimierung

Wolfgang Wagner, wowa-webdesign.de

Wolfgang Wagner Nebenberuflich selbständig als

Webdesigner Hauptberuf Krankenpfleger Jahrgang 1972 Schwerpunkte TYPO3 & WordPress Mit TYPO3 seit Version 3.8

unterwegs Web: wowa-webdesign.de Twitter: wowawebdesign

Wolfgang Wagner, wowa-webdesign.de

Warum überhaupt Performance-Optimierung? Schnellere Ladezeiten -> glückliche Besucher Glückliche Besucher -> mehr Conversions Suchmaschinen-Ranking

Wolfgang Wagner, wowa-webdesign.de

Wie kann man die Performance einer Website verbessern?

HTML/CSS-Template

TYPO3 Webserver

Wolfgang Wagner, wowa-webdesign.de

Testen! Google PageSpeed

Online-Service Browser-Plugin

YSlow (Browser-Plugin) http://www.webpagetest.org/

Wolfgang Wagner, wowa-webdesign.de

HTML/CSSAnsatz 1

Wolfgang Wagner, wowa-webdesign.de

HTML/CSS HTML reduzieren

HTML-Kommentare vermeiden Code verringern Extension: sourceopt

CDN verwenden (Caching) Bilder optimieren (Komprimierung, Bildmaße) CSS-Sprites verwenden CSS/JavaScript zusammenfassen und minimieren

(manuell oder per TS)

Wolfgang Wagner, wowa-webdesign.de

TYPO3Ansatz 2

Wolfgang Wagner, wowa-webdesign.de

Mehrere Möglichkeiten in TYPO3

Install-Tool Typoscript Extensions

Wolfgang Wagner, wowa-webdesign.de

Demo-Website Absichtlich nicht optimierte

Website Test mit Google PageSpeed-

Plugin für Chrome PageSpeed Score 56 

(von 100 Punkten) 

Wolfgang Wagner, wowa-webdesign.de

Änderungen im Install-Tool Log-Dateien deaktivieren

Developer-Log deaktivieren[SYS][enable_DLOG] =

Deprecation-Log deaktivieren[SYS][enableDeprecationLog] =

Keine permanente Datenbank-Verbindung [SYS][no_pconnect] = 1

Wolfgang Wagner, wowa-webdesign.de

Änderungen im Install-Tool Gzip-Komprimierung für CSS & JavaScript aktivieren

[BE][compressionLevel] = [0-9][FE][compressionLevel] = [0-9]

Werte zwischen 0 und 9, abhängig von Server-Leistung

Wolfgang Wagner, wowa-webdesign.de

Änderungen im Install-Tool Gzip-Komprimierung für CSS & JavaScript aktivieren

Folgende Zeilen in der .htaccess nötig:

Wolfgang Wagner, wowa-webdesign.de

Ergebnis der Änderungen im Install-Tool

Änderungen im Install-

Tool

Google PageSpeed-

Score: 59 (+3)

Wolfgang Wagner, wowa-webdesign.de

Optimierung per Typoscript Cache aktivieren

config.no_cache = 0

TYPO3-Kommentare deaktivieren config.disablePrefixComment = 1

Default-JavaScript entfernen („Blur“-Effekt) config.removeDefaultJS = 1

Default-CSS auslagern config.inlineStyle2TempFile = 1

Wolfgang Wagner, wowa-webdesign.de

Optimierung per Typoscript CSS-Dateien zusammenfassen und minimieren

config { compressCss = 1 concatenateCss = 1}

JavaScript zusammenfassen und minimieren config { compressJs = 1  concatenateJs = 1}

Wolfgang Wagner, wowa-webdesign.de

Optimierung per Typoscript Externe Javascript-Librarys, z.B. jQuery, von der

Zusammenfassung und Komprimierung ausnehmen

page.includeJSlibs { jquery = http://code.jquery.com/jquery-1.6.3.min.js

jquery.external = 1jquery.disableCompression = 1jquery.excludeFromConcatenation = 1

}

Wolfgang Wagner, wowa-webdesign.de

Ergebnis der Optimierung per Typoscript

Optimierungen per

Typoscript

Google PageSpeed-

Score: 85 (+26)

Wolfgang Wagner, wowa-webdesign.de

Optimierung per TyposcriptBeachten:compressCss/concatenateCss und compressJS/concatenateJs erst ab TYPO3 4.6!

Für ältere Versionen kann man die Extension scriptmerger verwenden.

Wolfgang Wagner, wowa-webdesign.de

Optimierung per Extensions Scriptmerger

CSS: Minifizierung, Komprimierung, Zusammenfassung JavaScript: Minifizierung, Komprimierung Nutzt bessere Kompressionsmethoden als die in TYPO3

eingebauten Bietet mehr Konfigurationsmöglichkeiten Bei Hochlast-Seiten unter Umständen besser!

Wolfgang Wagner, wowa-webdesign.de

Optimierung per Extensions sourceopt

Komprimierung des erzeugten HTML-Codes Entfernt Kommentare Entfernt Leerzeichen und Zeilenumbrüche Verschiedene „Level“ einstellbar

Wolfgang Wagner, wowa-webdesign.de

WebserverAnsatz 3

Wolfgang Wagner, wowa-webdesign.de

Webserver optimieren

mod_expires

Setzt ein „Ablaufdatum“ für Dateien, Browser behält die Daten solange im Cache

mod_deflatemod_header

sETag

entfernen

Komprimiert Dateien, bevor Sie an den Client gesendet werden

Um das maximale Cache-Alter zu definieren

Entity Tag entfernen, um das Browser-Caching nicht auszuhebeln (so ungefähr)

Wolfgang Wagner, wowa-webdesign.de

Webserver optimieren mod_expires &

mod_headers

in der .htaccess:

Wolfgang Wagner, wowa-webdesign.de

Webserver optimieren mod_deflate

in der .htaccess:

Wolfgang Wagner, wowa-webdesign.de

Webserver optimieren ETag entfernen

in der .htaccess: ETag (für Entity Tag, etwa Entitätmarke) ist ein im HTTP 1.1 eingeführtes Header-Feld. Es dient zur Bestimmung von Änderungen an der angeforderten Ressource und wird hauptsächlich zum Caching, also der Vermeidung redundanter Datenübertragungen, verwendet.

Wolfgang Wagner, wowa-webdesign.de

Ergebnis der Optimierungen am Webserver

Das ganze auf einem normalen Webhosting-Paket.YSlow zeigte Grade A mit 98 von 100 Punkten.

Optimierungen am

Webserver

Google PageSpeed-

Score: 96 (+11)

Wolfgang Wagner, wowa-webdesign.de

ZusammenfassungHTML/CSS-Template

TYPO3 Webserver

56

96

Wolfgang Wagner, wowa-webdesign.de

Links .htaccess – Codes: http://wiki.wowa-webdesign.de jQuery-CDN: http://code.jquery.com/ Bilder online komprimieren: http://www.jpegmini.com/ Online CSS-Sprite Generator:

http://spritepad.wearekiss.com/ Extension sourceopt im TER: http://goo.gl/4u3oL Extension scriptmerger im TER: http://goo.gl/nj2B7

Wolfgang Wagner, wowa-webdesign.de

Noch Fragen oder Anmerkungen?

Wolfgang Wagner, wowa-webdesign.de

Danke!