Slide 1

Slide 1 text

Performance Optimierung Für WordPress und andere Webanwendungen

Slide 2

Slide 2 text

Die Akteure Webseite PHP + MySQL Server Theme

Slide 3

Slide 3 text

Ein normaler Request im Leben von WordPress Besucher fragt Webseite beim Server an Server leitet Anfrage an WordPress weiter WordPress holt Inhalte aus Datenbank WordPress erzeugt aus Daten, Theme und Plugins HTML WordPress liefert HTML an Server zurück Server reicht HTML an Besucher zurück Besucher fragt CSS, JS, Bilder, etc. beim Server an Server schickt CSS, JS, Bilder zurück

Slide 4

Slide 4 text

Die üblichen Verdächtigen JS / CSS Dateien zusammenfassen Bilder und Grafiken optimieren Komprimierung Browser Caching Server Caching Schnelle Hardware (SSDs, CPU) CDN JS / CSS Includes optimieren Inline JS / CSS vermeiden Varnish Cache Server Lazy Loading von Bildern Weniger Plugins verwenden Theme Code optimieren

Slide 5

Slide 5 text

Ermittlungswerkzeuge • Google PageSpeed (Browser Plugin oder WebTool) • NewRelic (Anwendungs Profiling - kostenpflichtig) • Munin (Server Profiling) https://developers.google.com/speed/pagespeed/insights/ http://newrelic.com/

Slide 6

Slide 6 text

Spurensuche

Slide 7

Slide 7 text

Spurensuche • Auslieferung reines HTML ~ 100ms Ohne Caches, Ohne Browser Komprimierung

Slide 8

Slide 8 text

Spurensuche • Auslieferung WordPress HTML ~ 1000ms Ohne Caches, Mit Browser Komprimierung

Slide 9

Slide 9 text

Spurensuche

Slide 10

Slide 10 text

Die Täter

Slide 11

Slide 11 text

Sinnvoll optimieren Webseite PHP + MySQL Server Theme

Slide 12

Slide 12 text

Sinnvoll optimieren • WordPress selbst ist performant. Plugins und Themes machen die Probleme. • Drittanbieter Code kann nicht vernünftig von außen optimiert werden • Optimierungen direkt an der Wurzel des Übels – „Onpage“ Optimierungen => Theme – Server Optimierungen => Server / PHP / MySQL Configs

Slide 13

Slide 13 text

WAS BRINGT WELCHE OPTIMIERUNG WIRKLICH? Sekt oder Selters Disclaimer: Die folgende Bewertungen beziehen sich auf eine durchschnittliche, normale WordPress Webseite! Je nach Setup und Anforderungen kann die Bewertung auch anders aussehen.

Slide 14

Slide 14 text

CDN Statische Dateien (CSS, JS, IMG) in ein Content Distribution Network auslagern Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch O Nutzen Besucher (Ladezeit) O Nutzen Server (Auslastung) O Größter Nutzen Dateien kommen nicht mehr vom eigenen Server und können von global verteilten Servern ausgeliefert werden. Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden WordPress Unicorn-Faktor

Slide 15

Slide 15 text

CDN Statische Dateien (CSS, JS, IMG) in ein Content Distribution Network auslagern • Wenige sinnvolle Anwendungsfälle: – Große Dateien (Filme / Programme) – Seite muss global schnell sein • Kosten pro GB (unkalkulierbar) • Datenschutzproblematik

Slide 16

Slide 16 text

Bessere Hardware Server / Hosting mit SSDs und moderner CPU Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch ++ Nutzen Besucher (Ladezeit) + Nutzen Server (Auslastung) + Größter Nutzen SSDs reduzieren Zugriffszeiten deutlich Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden Server Unicorn-Faktor

Slide 17

Slide 17 text

Bessere Hardware Server / Hosting mit SSDs und moderner CPU • Hardware ist nur selten der Flaschenhals • Bei „Shared Hosting“ selten Einfluss auf die Hardware • Wechsel bei alten Verträgen (> 2 Jahre) kann sinnvoll sein • SSD einziger Punkt, der spürbaren Unterschied bringt

Slide 18

Slide 18 text

Server Konfigurationen optimieren Memory Limits, Ressourcen Limits, Tuning der Default Einstellungen Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch - Nutzen Besucher (Ladezeit) O Nutzen Server (Auslastung) + Größter Nutzen „Angezogene Handbremse“ wird gelöst. PHP & MySQL können die vorhandenen Ressourcen einsetzen Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden Server Unicorn-Faktor

Slide 19

Slide 19 text

Server Konfigurationen optimieren Memory Limits, Ressourcen Limits, Tuning der Default Einstellungen • Spezielles Know-How notwendig • Änderungen nur mit root Zugang möglich • Standard Einstellungen nie auf individuellen Anwendungsfall ausgerichtet • Tuning von php & MySQL kann spürbare Leistungsgewinne bringen (Memory Caches)

Slide 20

Slide 20 text

JS / CSS / IMG Optimierungen Includes optimieren (Header / Footer), Dateien minimieren / zusammenfassen, kein Inline Code, Lazy Loading von Bildern Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch - Nutzen Besucher (Ladezeit) ++ Nutzen Server (Auslastung) -- Größter Nutzen Die Seite wird viel schneller geladen. Bessere Platzierung bei Google. Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden Theme Unicorn-Faktor

Slide 21

Slide 21 text

JS / CSS / IMG Optimierungen Includes optimieren (Header / Footer), Dateien minimieren / zusammenfassen, kein Inline Code, Lazy Loading von Bildern • Riesiges Optimierungspotenzial • Wirklich sinnvoll und effizient nur direkt im Theme • Aufwände nicht zu unterschätzen • Nachträglich nur schwierig oder ineffizient umzusetzen

Slide 22

Slide 22 text

Komprimierung Dateien vom Server vor Übertragung mit gzip / deflate packen lassen Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch ++ Nutzen Besucher (Ladezeit) ++ Nutzen Server (Auslastung) O Größter Nutzen ~70%-80% weniger Traffic zwischen Besucher und Server Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden (Web-)Server Unicorn-Faktor

Slide 23

Slide 23 text

Komprimierung Dateien vom Server vor Übertragung mit gzip / deflate packen lassen • Simple Einstellung in .htaccess oder nginx Config • CSS, JS, HTML werden gepackt • Benötigte CPU-Last (Server / Browser) zu vernachlässigen • Riesiger Nutzen

Slide 24

Slide 24 text

Caching Browser Caching • Dateien (CSS / JS / IMG / HTML) werden auf der Festplatte des Besuchers gespeichert • Dateien werden nur beim ersten Seitenaufruf und bei Änderungen geladen Server Caching • Rechenintensive Operationen (PHP, MySQL, etc) werden zwischengespeichert • Verarbeitungszeiten und Server-Last werden reduziert

Slide 25

Slide 25 text

Caching – Fallstricke • Bei Codeänderungen (js, css, Grafiken) können alte Versionen im Cache verbleiben – Lösung: Cache Buster (Parameter mit Version des Themes / Plugins an Dateien anhängen -> style.css?v=1.2. Nach Update: style.css?v=1.3) • Bei Inhaltsänderungen (Beiträge, Seiten) können alte Versionen im Cache verbleiben – Lösung: Caching Plugin muss statischen Cache bei Events (z.B. Post publish) löschen • Nicht / nur eingeschränkt für voll-dynamische Webseiten (Community, Shops) geeignet

Slide 26

Slide 26 text

Browser Caching Statische Dateien direkt im Browser des Users speichern Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch ++ Nutzen Besucher (Ladezeit) ++ Nutzen Server (Auslastung) O Größter Nutzen Nach dem ersten Seitenaufruf laden alle Folgeseiten deutlich schneller Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden (Web-)Server Unicorn-Faktor

Slide 27

Slide 27 text

Browser Caching Statische Dateien direkt im Browser des Users speichern • Simple Einstellung in .htaccess oder nginx Config • Browser lädt HTML, CSS, JS, Bilder,… nur initial und speichert diese • Dateien werden dann aus dem Browser Cache geladen statt vom Server • Bei Updates von Dateien auf dem Server kann es zu Problemen kommen (Besucher hat noch alte Dateien im Cache)

Slide 28

Slide 28 text

Server Caching Umgehung von PHP / MySQL bei so vielen Anfragen wie möglich Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch - Nutzen Besucher (Ladezeit) ++ Nutzen Server (Auslastung) ++ Größter Nutzen Statische Seiten werden als HTML zwischengespeichert und ohne WordPress ausgeliefert Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden WordPress + (Web-)Server Unicorn-Faktor

Slide 29

Slide 29 text

Server Caching Umgehung von PHP / MySQL bei so vielen Anfragen wie möglich • Initiale Einrichtung aufwändig (Plugin + Server) • Plugin in WordPress erzeugt HTML aus Seiten – Plugins: Cachify, W3TotalCache, WP-Super Cache • HTML liegt auf SSD oder im RAM • Besucher bekommt HTML direkt vom Webserver • Keine PHP / MySQL Last mehr durch Besucher • Dynamische Seiten dürfen nicht gecacht werden (Community, Shops, etc.)

Slide 30

Slide 30 text

Varnish Vorgelagerter Caching Server speichert Antworten des Servers und liefert diese direkt aus Kriterium Bewertung Einrichtungsaufwand ++ = gering | -- = hoch - Nutzen Besucher (Ladezeit) + Nutzen Server (Auslastung) + Größter Nutzen Wie Server Caching, nur mit zusätzlicher Software gelöst. Wo implementierbar Theme WordPress Server Wo sollte es implementiert werden WordPress Unicorn-Faktor

Slide 31

Slide 31 text

Varnish Vorgelagerter Caching Server speichert Antworten des Servers und liefert diese direkt aus • Aufwändige Konfiguration • Spezialwissen notwendig • Kaum Vorteile gegenüber Server Caching • Probleme mit Inhalten die im Cache festhängen möglich • Zusätzliche Ressourcen notwendig

Slide 32

Slide 32 text

TLDR;

Slide 33

Slide 33 text

Optimierungs Plugins nutzen? • PHP = (Zweit-) größtes Optimierungspotenzial • Plugins = (Längere) PHP Ladezeit • 90% der Funktionen der Plugins können direkt im Theme oder am Server umgesetzt werden • Einfache Optimierung: Plugins deaktivieren • Plugins sind nicht die Lösung, sondern das Problem!

Slide 34

Slide 34 text

Jan Thiel CEO / DEVOp [email protected] Du benötigst Beratung oder Unterstützung bei der Optimierung deiner Server / Webseite / Anwendung? Melde dich gerne!