WordPress Performance Optimierungen v2

6574ee7c61e5e961ba64928fad6615e5?s=47 Jan Thiel
February 25, 2020

WordPress Performance Optimierungen v2

Mein WordPress ist "langsam"...
Was aber bedeutet es, wenn eine Webseite "langsam" ist? Was ist dann überhaupt langsam?
Diese Slides behandeln die gängigen Ursachen von Performanceengpässen und den Quellen von messbarer "Langsamkeit". Dazu auch eine Bewertung der üblichen Verbesserungsansäztze und wie diese wo umzusetzen sind.
Inklusive Behandlung der Page Builder Auswirkung auf Performance.

Gehalten auf dem WordPress Meetup Hamburg am 25.02.2020

6574ee7c61e5e961ba64928fad6615e5?s=128

Jan Thiel

February 25, 2020
Tweet

Transcript

  1. Performance Optimierung Für WordPress und andere Webanwendungen

  2. <3 WordPress • Jan Thiel • Entwickler / Architekt •

    Hamburger :-) • WordPress Beratung seit 2012 • Speaker auf zahlreichen WordCamps Hive-IT GmbH // wlwp.eu
  3. Die Akteure Webseite PHP + MySQL Server Theme

  4. 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 Browser verarbeitet HTML, CSS + JS
  5. 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
  6. Ermittlungswerkzeuge https://webpagetest.org https://newrelic.com/ https://datadoghq.com https://developers.google.com/web/tools/lighthouse Chrome Lighthouse / webpagetest.org (Browser

    Plugin oder WebTool) NewRelic / DataDog (Anwendungs Profiling - kostenpflichtig) Munin (Server Profiling)
  7. Spurensuche

  8. Spurensuche • Auslieferung reines HTML ~ 100ms Ohne Caches, Ohne

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

    Browser Komprimierung
  10. Spurensuche

  11. Die Täter

  12. Sinnvoll optimieren Webseite PHP + MySQL Server Theme

  13. 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
  14. DIE KRUX MIT DEN PAGEBUILDERN Und die Sahnekirsche zum Dessert

  15. Interessenskonflikt ? ! Theme (= Theme) • Layouting • Styling

    von Elementen • Styling von Blocks • Neue funktionale Elemente • Customizing • Weiß nichts von Plugins Pagebuilder (= Plugin / Theme) • Layouting • Styling von Elementen • Styling von Blocks • Neue funktionale Elemente • Customizing • Weiß nichts vom Theme (als Plugin)
  16. Pagebuilder (HTML + CSS + JS) Theme (HTML + CSS

    + JS) Ressourcen Overhead Overhead
  17. Theme Unterschiede https://fastwp.de/magazin/pagebuilder-performance-check-2020

  18. 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.
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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)
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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)
  33. 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
  34. 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: WP-Rocket, W3TotalCache, • 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.)
  35. 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
  36. 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
  37. TLDR;

  38. 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 löschen • Plugins sind nicht die Lösung, sondern das Problem!
  39. Jan Thiel CEO / DEVOp jan@wlwp.eu Ja, wir sind käuflich

    ☺ Melde dich gerne!