WordPress: Geschwindigkeit optimieren

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

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/