Download - Campixx 2012-ladezeit-extreme
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