Meine Session auf der Campixx 2012 in Berlin

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