WordPress: Geschwindigkeit optimieren

WordPress: Geschwindigkeit optimieren

WordPress-Webseiten beschleunigen: Vortrag beim WP Meetup Hamburg am 23.04.2013

Bcc2431139ac8babaa0f6ccf308713e0?s=128

Torsten Landsiedel

April 24, 2013
Tweet

Transcript

  1. Geschwindigkeit optimieren Geschwindigkeit optimieren WP Meetup Hamburg am 23.4.2013

  2. Hamburg Hamburg WordPress WordPress Meetup Meetup Warum? • Rankingfaktor für

    Suchmaschinen • Usability / Kundenzufriedenheit • Optimierung für mobile Datenverbindungen • Umsatzrückgang • nicht alle haben schnelle DSL-Leitungen • ...
  3. Hamburg Hamburg WordPress WordPress Meetup Meetup Ausmisten! „Was nicht da

    ist, muss auch nicht optimiert werden!“
  4. Hamburg Hamburg WordPress WordPress Meetup Meetup Online-Tools • Google Pagespeed:

    https://developers.google.com/pagespeed/
  5. Hamburg Hamburg WordPress WordPress Meetup Meetup Online-Tools • Webpage Performance

    Test: www.webpagetest.org
  6. Hamburg Hamburg WordPress WordPress Meetup Meetup Online-Tools • GTMetrix: www.gtmetrix.com

  7. Hamburg Hamburg WordPress WordPress Meetup Meetup Online-Tools • http://tools.pingdom.com/fpt/

  8. Hamburg Hamburg WordPress WordPress Meetup Meetup Online-Tools • Google Analytics:

    – _gaq.push(['_trackPageLoadTime']);
  9. Hamburg Hamburg WordPress WordPress Meetup Meetup Weitere Online-Tools • http://www.websiteoptimization.com/services/analyze/

    • http://www.pagespeed.de/
  10. Hamburg Hamburg WordPress WordPress Meetup Meetup AddOns • PageSpeed für

    Chrome und Firefox: – http://code.google.com/intl/de-DE/speed/page-speed/
  11. Hamburg Hamburg WordPress WordPress Meetup Meetup AddOns • Yslow (Yahoo)

    – https://addons.mozilla.org/de/firefox/addon/yslow/
  12. Hamburg Hamburg WordPress WordPress Meetup Meetup AddOns • Firebug: –

    https://addons.mozilla.org/de/firefox/addon/firebug/
  13. Hamburg Hamburg WordPress WordPress Meetup Meetup Wie? • Reduzierung der

    Anfragen • Daten-Reduzierung durch Komprimierung • Optimierung der Bilder • Aktivierung des Browser Cache • Nutzung von Proxy-Servern • Verteilung der Last
  14. Hamburg Hamburg WordPress WordPress Meetup Meetup Wie? • Reduzierung der

    Anfragen • Daten-Reduzierung durch Komprimierung • Optimierung der Bilder • Aktivierung des Browser Cache • Nutzung von Proxy-Servern • Verteilung der Last
  15. Hamburg Hamburg WordPress WordPress Meetup Meetup Javascript / CSS •

    Javascript/CSS möglichst zusammenfassen • Skripte am Ende der Seite einbinden • Link statt @import nutzen • CSS / Skripte minimieren – http://compressor.ebiene.de/ – https://www.reneschmidt.de/tools/index.php/minify/
  16. Hamburg Hamburg WordPress WordPress Meetup Meetup GZip aktiviert? • http://www.gidnetwork.com/tools/gzip-test.php

    • http://www.whatsmyip.org/http-compression-test/
  17. Hamburg Hamburg WordPress WordPress Meetup Meetup Komprimierung <IfModule mod_deflate.c> #

    Insert filters / compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain ... # Ausnahme: Grafiken SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont_vary # Drop problematic browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule>
  18. Hamburg Hamburg WordPress WordPress Meetup Meetup Komprimierung <IfModule mod_gzip.c> mod_gzip_on

    Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>
  19. Hamburg Hamburg WordPress WordPress Meetup Meetup Template-Optimierung • Datenbank-Abfragen (Queries)

    verringern
  20. Hamburg Hamburg WordPress WordPress Meetup Meetup Wie? • Reduzierung der

    Anfragen • Daten-Reduzierung durch Komprimierung • Optimierung der Bilder • Aktivierung des Browser Cache • Nutzung von Proxy-Servern • Verteilung der Last
  21. Hamburg Hamburg WordPress WordPress Meetup Meetup Bilder optimieren • Bilder

    nicht per HTML skalieren • Höhe und Breite immer in HTML angeben • Korrektes Dateiformat wählen • CSS3-Funktionen nutzen (Gradients statt Bilder) • CSS-Sprites nutzen (http://csssprites.com/):
  22. Hamburg Hamburg WordPress WordPress Meetup Meetup Bilder komprimieren • Online-Tools

    und Programme: – http://jpegmini.com – http://tinypng.com, http://compresspng.com/, http://punypng.com/ – http://imageoptim.com/, http://pngmini.com/ – http://trimage.org/, http://pnggauntlet.com/ – http://www.smushit.com/ysmush.it/ – ...
  23. Hamburg Hamburg WordPress WordPress Meetup Meetup Wie? • Reduzierung der

    Anfragen • Daten-Reduzierung durch Komprimierung • Optimierung der Bilder • Aktivierung des Browser Cache • Nutzung von Proxy-Servern • Verteilung der Last
  24. Hamburg Hamburg WordPress WordPress Meetup Meetup Browser-Cache • Per .htaccess-Datei

    • Ablaufdatum für Elemente einstellen • Prüfen ob Modul vorhanden ist: – <IfModule mod_expires.c> • Aktivieren des Moduls: – ExpiresActive On • Ablaufdatum einstellen als Zugriffszeit plus ein fester Wert (1 Woche, 1 Monat, 1 Jahr, ...) – ExpiresDefault "access plus 1 week" – ExpiresByType image/jpg "access plus 1 year" – ...
  25. Hamburg Hamburg WordPress WordPress Meetup Meetup Wie? • Reduzierung der

    Anfragen • Daten-Reduzierung durch Komprimierung • Optimierung der Bilder • Aktivierung des Browser Cache • Nutzung von Proxy-Servern • Verteilung der Last
  26. Hamburg Hamburg WordPress WordPress Meetup Meetup Proxy-Server • Testen, ob

    Modul vorhanden – <IfModule mod_headers.c> • Für welche Dateien? – <FilesMatch "\.(ico|pdf|flv|swf|js|css| gif|png|jpg|jpeg|ico|txt|html|htm)$"> • Header setzen, 30 Tage gültig – Header set Cache-Control "max- age=2592000, public"
  27. Hamburg Hamburg WordPress WordPress Meetup Meetup Wie? • Reduzierung der

    Anfragen • Daten-Reduzierung durch Komprimierung • Optimierung der Bilder • Aktivierung des Browser Cache • Nutzung von Proxy-Servern • Verteilung der Last
  28. Hamburg Hamburg WordPress WordPress Meetup Meetup Verteilung der Last •

    CDN (Content Delivery Network) – Mehrere (cookiefreie) Domains liefern lastverteilt und optimiert statische Inhalte aus – Lohnt nur bei entsprechendem Traffic – Shared Hosting + CDN ist unnötig, zu viel Aufwand für wenig Nutzen
  29. Hamburg Hamburg WordPress WordPress Meetup Meetup All-in-one • https://gist.github.com/Zodiac1978/3145830

  30. Hamburg Hamburg WordPress WordPress Meetup Meetup Caching • Dynamische Seiten

    erfordern Datenbankabfragen • Caching erzeugt statische Inhalte, die eine begrenzte Zeit gültig sind • Inhalte werden schneller ausgeliefert, sind aber ggf. nicht aktuell • Problemfall: Kommentare
  31. Hamburg Hamburg WordPress WordPress Meetup Meetup WordPress-Lösungen • Caching-Plugins –

    cachify.de – wordpress.org/extend/plugins/hyper-cache/ – wordpress.org/extend/plugins/wp-super-cache/ – wordpress.org/extend/plugins/w3-total-cache/ • Lazy Load für YouTube-Videos – wordpress.org/extend/plugins/wp-youtube-lyte/ • Plugins testen – wordpress.org/extend/plugins/p3-profiler/
  32. Hamburg Hamburg WordPress WordPress Meetup Meetup WordPress-Lösungen • Bildoptimierung –

    http://wordpress.org/extend/plugins/wp-smushit/ – http://wordpress.org/extend/plugins/optimus/
  33. Hamburg Hamburg WordPress WordPress Meetup Meetup Fragen? Twitter: @zodiac1978 http://torstenlandsiedel.de/kontakt/