Das Dokument behandelt die Optimierung der Ladezeiten für Webseiten, die mit Contao, Joomla und WordPress betrieben werden, und beschreibt dabei verschiedene Apache-Module und Servererweiterungen wie mod_pagespeed, Memcached und Advanced PHP Cache. Es werden verschiedene Techniken zur Reduzierung der Ladezeit vorgestellt, darunter Caching, Kompression und die Nutzung von Content Delivery Networks (CDNs). Abschließend wird betont, dass die Implementierung dieser Maßnahmen signifikante Leistungssteigerungen mit sich bringen kann.

1. Ladezeit Extreme – Was
funktioniert bei Contao, Joomla &
Wordpress
Alexander Merkel

2. Über mich
§ Seit 2007 – Selbständig als Freelancer für
SEO, Linkbuilding und Redesign Projekte.
§ Seit 2010 als Online Marketing Consultant bei
verschiedenen Unternehmen tätig.
§ 2012 – Bachelor of Science: Electronic
Business
SEO-HN.DE
Seite § 2

3. Agenda
1 Die Basis das muss euer Server können!
2 Contao
3 Joomla on Speed
4 Das beste kommt zum Schluss - Wordpress
Seite § 3

4. Apache Module 1/2
§ Mod_Headers: § Mod_Mime
§ Kann HTTP Requests & § Erlaubt das assozieren von
Response Headers bestimmten Dateitypen und
verändern. Inhalten
§ Mod_Expires § Mod_env
§ Ermöglicht das § Kontrolliert bestimmte
kontrollieren von Caching Umgebungen
indem festgelegt wird
wann ein Inhalt neu § Mod_Setenvif:
geladen wird. § Erlaubt Regeln für
bestimmte Aktionen
§ Mod_Deflate
§ Erlaubt das Komprimieren § Mod_Pagespeed
von Inhalten bevor Sie § Ermöglicht automatisierte
zum Nutzer gesendet Funktionen zur
werden. Verbesserung der Ladezeit
Seite § 4

5. Apache Module 2/2
# compress text, html, javascript, css, xml: # Set up 2 Hour caching on commonly updated files
AddOutputFilterByType DEFLATE text/plain <FilesMatch ".(xml|txt|html|js|css)$">
AddOutputFilterByType DEFLATE text/html ExpiresDefault A604800
AddOutputFilterByType DEFLATE text/xml Header append Cache-Control "proxy-revalidate"
AddOutputFilterByType DEFLATE text/css </FilesMatch>
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml # Force no caching for dynamic files
AddOutputFilterByType DEFLATE application/rss+xml <FilesMatch ".(php|cgi|pl|htm)$">
AddOutputFilterByType DEFLATE application/javascript ExpiresActive Off
AddOutputFilterByType DEFLATE application/x-javascript Header set Cache-Control "private, no-cache, no-store, proxy-revalidate,
no-transform"
# Or, compress certain file types by extension: Header set Pragma "no-cache"
<Files *.html> </FilesMatch>
SetOutputFilter DEFLATE </IfModule>
</Files>
<IfModule mod_expires.c> ExpiresActive On
# Turn on Expires and set default to 0 # Expires after a month client accesses the file
ExpiresActive On ExpiresByType image/jpeg A2592000
ExpiresDefault A0 ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
# Set up caching on media files for 1 year (forever?) ExpiresByType image/x-icon A2592000
<FilesMatch ".(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> ExpiresByType text/plain A2592000
ExpiresDefault A29030400
Header append Cache-Control "public" # Good for one week
</FilesMatch> ExpiresByType application/x-javascript M604800
ExpiresByType text/css A2592000
# Set up caching on media files for 1 week ExpiresByType text/html A2592000
<FilesMatch ".(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
Seite § 5

6. Mod PageSpeed sollte gut konfiguriert werden!
Funktionen:
§ Inline CSS/JS
§ Outline CSS/JS
§ Combine CSS/JS
§ Compress HTML/CSS/JS
§ Compress Images
§ Rewrite Images
§ Sprite Images
§ Konvertiert GIF/JPEG/PNG
komprimiertere Formate
§ uvm.
§ Einfach Testen lohnt sich!!!
Seite § 6

7. Erweiterungen des Servers 1/2
MemCached Server:
§ Funktion: Vorhaltung von wichtigen Daten
im Arbeitsspeicher damit
Festplattenzugriffe erübrigt werden
beziehungsweise der Aufruf von (relativ)
aufwändigen und häufig verwendeten
Datenbankabfragen minimiert wird.
§ Installation: Sehr einfach auf Ubuntu und
Debian Server. Einfach Admin/Hoster
fragen dauert keine 30min
§ Konfiguration ist easy wird von: Wordpress
und Joomla unterstützt.
Seite § 7
Bildquelle: http://www.sxc.hu/photo/203793

8. Erweiterung des Server 2/2
Advanced PHP Cache:
§ Übersetzt PHP in Bytecode
§ Kann auch im Speicher
abgelegt werden wodurch die
Performance noch besser wird.
Seite § 8

9. Content Delivery Networks
§ Content Delivery Network ist ein Netz lokal verteilter und über das
Internet verbundener Server
§ Die Knoten sind auf viele Orte verteilt und oft auch auf viele Backbones.
Sie arbeiten zusammen, um Anfragen von Nutzern nach Inhalten zu
bedienen.
http://de.wikipedia.org/wiki/Content_Distribution_Network
Bildquelle: http://anangpratika.files.wordpress.com/2011/06/cdns.jpg
Seite § 9

10. CDN Anbieter
§ Amazon CloudFront: § Achtet aber darauf wo die Server
§ http://aws.amazon.com/de/ vom Anbieter stehen
cloudfront/
§ Es bringt nicht sehr viel wenn der
§ Contendo(Akamai): Anbieter günstig ist aber keine
§ http://www.akamai.com/ Server in Europa stehen hat.
cotendo
§ Media Temple ProCDN:
§ http://mediatemple.net/
webhosting/procdn/
§ NetDNA MaxCDN
§ http://www.maxcdn.com/
Seite § 10

11. Vorsicht CDN
§ CDN lässt keine automatisierte
Kombination der JavaScript & CSS
Dateien zu. Hier muss getestet werden
was schneller ist.
§ Bei Websites mit vielen Nutzer würde ich
aber CDN immer den Vorzug geben.
§ Bei wenig alles auf APC & Memcache
Bildquelle:
http://www.sxc.hu/photo/1334670
setzen.
Seite § 11

12. Seite § 12

13. Vorher
Seite § 13

14. Nachher
+20%
Seite § 14

15. Was wurde gemacht?
§ Internes Caching in Contao aktiviert
§ Mod_Pagespeed mit diesen Filtern erweitert:
§ Combine JS und CSS -> Kombiniert JS und CSS in wenige Dateien
§ Rewrite CSS und JS ->minimiert die URL‘s
§ Recompress Images -> Wandelt Bilder in PNG oder JPEG um.
§ Sprite Images -> Wandelt Hintergrundbilder im CSS Code zu Sprites
um
Seite § 15

16. Seite § 16

17. Vorher
Seite § 17

18. Nachher
+208%
Seite § 18

19. Was wurde gemacht?
§ Installation von APC
§ Installation Mod_Pagespeed mit folgenden Filtern:
§ Combine JS und CSS -> Kombiniert JS und CSS in wenige Dateien
§ Rewrite CSS und JS ->minimiert die URL‘s
§ Recompress Images -> Wandelt Bilder in PNG oder JPEG um.
§ Sprite Images -> Wandelt Hintergrundbilder im CSS Code zu Sprites um
Seite § 19

20. Seite § 20

21. Vorher
Seite § 21

22. Nachher ohne CDN
+100%
Seite § 22

23. Was wurde gemacht?
§ Installation von Mod_Pagespeed
mit folgenden Filtern:
§ Inline/rewrite/outline/combine CSS
§ Inline/rewrite/outline/combine JS
§ Recompress/Rewrite/Sprite Images
§ Installation des Plugins W3 Total
Cache
§ Alle Funktionen auf verschiedene
Memcache Server
§ HTML/CSS Tidy installieren und
konfigurieren
Seite § 23

24. Nachher mit CDN
+40%
Seite § 24

25. Warum CDN obwohl es doch langsamer ist?
§ Das gute an CDN man zahlt nur wenn es
gebraucht wird!
§ Bei Seiten mit vielen Nutzern ist CDN eine
gute Sache denn der Blog bleibt gleich
schnell
§ Ohne CDN bricht irgendwann der Server
zusammen!
Seite § 25

26. FAZIT
Seite § 26

27. Ladezeit-Optimierung auf dem CMS in wie weit möglich?
Contao Joomla Wordpress
§ DiskCache § DiskCache § DiskCache
§ Mod_PageSpeed § APC § APC
§ MEMCACHE <-Buggy § MEMCACHE
§ CDN § CDN
§ Minify § Minify
§ Mod_PagesSpeed § Mod_PageSpeed
Page § 27

28. Fragen
Wenn etwas unklar war ist jetzt der
Augenblick es zu ändern ;-)
Seite § 28