SlideShare ist ein Scribd-Unternehmen logo

Campixx 2012-ladezeit-extreme

•
•
Alexander Merkel
Alexander Merkel

Meine Session auf der Campixx 2012 in Berlin

Ähnliche diashows

WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional III
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
 
WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional II
 
1 von 28
Downloaden Sie, um offline zu lesen
Ladezeit Extreme – Was funktioniert bei Contao, Joomla & Wordpress Alexander Merkel
Ü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
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
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
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
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
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
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
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
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
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
Seite § 12
Vorher Seite § 13
Nachher +20% Seite § 14
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
Seite § 16
Vorher Seite § 17
Nachher +208% Seite § 18
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 +100% Seite § 22
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 +40% Seite § 24
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
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
Fragen Wenn etwas unklar war ist jetzt der Augenblick es zu ändern ;-) Seite § 28

Weitere ähnliche Inhalte

Campixx 2012-ladezeit-extreme

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