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

Seite § 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 § 3

Agenda

Die Basis das muss euer Server können!

Contao

Joomla on Speed

Das beste kommt zum Schluss - Wordpress

1

2

3

4

Apache Module 1/2

Seite § 4

§  Mod_Headers: §  Kann HTTP Requests &

Response Headers verändern.

§  Mod_Expires

§  Ermöglicht das kontrollieren von Caching indem festgelegt wird wann ein Inhalt neu geladen wird.

§  Mod_Deflate

§  Erlaubt das Komprimieren von Inhalten bevor Sie zum Nutzer gesendet werden.

§  Mod_Mime §  Erlaubt das assozieren von

bestimmten Dateitypen und Inhalten

§  Mod_env

§  Kontrolliert bestimmte Umgebungen

§  Mod_Setenvif:

§  Erlaubt Regeln für bestimmte Aktionen

§  Mod_Pagespeed §  Ermöglicht automatisierte

Funktionen zur Verbesserung der Ladezeit

Apache Module 2/2

Seite § 5

# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension: <Files *.html> SetOutputFilter DEFLATE </Files> <IfModule mod_expires.c> # Turn on Expires and set default to 0 ExpiresActive On ExpiresDefault A0 # Set up caching on media files for 1 year (forever?) <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> ExpiresDefault A29030400 Header append Cache-Control "public" </FilesMatch> # Set up caching on media files for 1 week <FilesMatch "\.(gif|jpg|jpeg|png|swf)$"> ExpiresDefault A604800 Header append Cache-Control "public" </FilesMatch>

# Set up 2 Hour caching on commonly updated files <FilesMatch "\.(xml|txt|html|js|css)$"> ExpiresDefault A604800 Header append Cache-Control "proxy-revalidate" </FilesMatch> # Force no caching for dynamic files <FilesMatch "\.(php|cgi|pl|htm)$"> ExpiresActive Off Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform" Header set Pragma "no-cache" </FilesMatch> </IfModule> ExpiresActive On # Expires after a month client accesses the file ExpiresByType image/jpeg A2592000 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/x-icon A2592000 ExpiresByType text/plain A2592000 # Good for one week ExpiresByType application/x-javascript M604800 ExpiresByType text/css A2592000 ExpiresByType text/html A2592000

Mod PageSpeed sollte gut konfiguriert werden!

Seite § 6

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

Erweiterungen des Servers 1/2

Seite § 7

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.

Bildquelle: http://www.sxc.hu/photo/203793

Erweiterung des Server 2/2

Seite § 8

Advanced PHP Cache: §  Übersetzt PHP in Bytecode

§  Kann auch im Speicher

abgelegt werden wodurch die Performance noch besser wird.

Content Delivery Networks

Seite § 9

§  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

CDN Anbieter

Seite § 10

§  Amazon CloudFront: §  http://aws.amazon.com/de/

cloudfront/

§  Contendo(Akamai): §  http://www.akamai.com/

cotendo

§  Media Temple ProCDN: §  http://mediatemple.net/

webhosting/procdn/ §  NetDNA MaxCDN

§  http://www.maxcdn.com/

§  Achtet aber darauf wo die Server vom Anbieter stehen

§  Es bringt nicht sehr viel wenn der

Anbieter günstig ist aber keine Server in Europa stehen hat.

Vorsicht CDN

Seite § 11

§  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

setzen.

Bildquelle: http://www.sxc.hu/photo/1334670

Seite § 12

Vorher

Seite § 13

Nachher

Seite § 14

+20%

Was wurde gemacht?

Seite § 15

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

Vorher

Seite § 17

Nachher

Seite § 18

+208%

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

Seite § 20

Vorher

Seite § 21

Nachher ohne CDN

Seite § 22

+100%

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

Nachher mit CDN

Seite § 24

+40%

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

FAZIT

Seite § 26

Page § 27

Ladezeit-Optimierung auf dem CMS in wie weit möglich?

§  DiskCache

§  Mod_PageSpeed

Contao

§  DiskCache

§  APC

§  MEMCACHE <-Buggy §  CDN

§  Minify

§  Mod_PagesSpeed

Joomla

§  DiskCache

§  APC

§  MEMCACHE §  CDN

§  Minify

§  Mod_PageSpeed

Wordpress

Seite § 28

Wenn etwas unklar war ist jetzt der Augenblick es zu ändern ;-)

Fragen