WordPress Performance-Audit: So führst du es durch

Ein Performance-Audit ist eine gründliche Überprüfung einer bestehenden Webseite im Hinblick auf Ladegeschwindigkeit und Ressourcenauslastung. Mit dieser Methode deckst du potenzielle Probleme und Optimierungsmöglichkeiten auf. Das Performance-Audit kann auch als Checkliste bei der Entwicklung einer neuen Webseite dienen. So stellst du sicher, dass von Anfang an alle wichtigen Aspekte berücksichtigt werden. Warum die Performance ein Faktor für die Suchmaschinenoptimierung und damit auch für das Ranking einer Webseite ist, erklären wir ausführlich in unserem Artikel SEO-Audit. Tools & Ressourcen Das wichtigste Tool-Set, das für das Performance-Audit benötigt wird, ist Chrome DevTools. Es ist bereits standardmäßig in Chrome vorinstalliert und kann mit der Taste F12 geöffnet werden. Alternativ besteht die Möglichkeit, die Entwicklertools von Firefox, Edge und anderen Browsern zu verwenden. Unser Performance-Audit ist auf das weitverbreitete Chrome DevTools zugeschnitten. Die Search Console von Google ermöglicht einen zusätzlichen Einblick in Performance-Metriken einer Webseite, die über einen langen Zeitraum erhoben werden. Außerdem nutzen wir PageSpeed Insights von Google, den Pingdom Website Speed Test von Solarwind und Tools von KeyCDN zur synthetischen Analyse. Performantes Hosting für WordPress Die gewählte Art des Hostings für eine Webseite kann erhebliche Auswirkungen auf die Ladezeiten haben. Shared-Hosting ist eine häufig verwendete Hosting-Optionen, insbesondere für kleinere Webseiten und Blogs und gleichzeitig eine der häufigsten Ursachen für schlechte Performance. Bei Shared-Hosting teilen sich mehrere Webseiten dieselben Server-Ressourcen, etwa CPU, RAM und Speicherplatz. Das kann die Performance einer Webseite beeinträchtigen, wenn andere Webseiten auf demselben Server plötzlich mehr Ressourcen verbrauchen. Die Ladezeiten unterliegen hier oftmals Schwankungen, auf die man keinen direkten Einfluss nehmen kann. Um Performance-Probleme im Zusammenhang mit Shared-Hosting zu vermeiden, solltest du dedizierte oder Managed-Hosting-Lösungen in Betracht ziehen. Dedizierte Server bieten einer Webseite exklusive Ressourcen und volle Kontrolle, während Managed-Hosting-Pläne in der Regel optimierte Serverkonfigurationen ermöglichen. Es gibt zudem Hoster, die ihre Infrastruktur und Funktionen speziell auf WordPress zugeschnitten haben. Caching-Plugins für WordPress Caching-Plugins sind eine Schlüssel-Komponente zur Verbesserung der Performance von WordPress-Webseiten. Sie bieten eine Vielzahl nützlicher Funktionen, die Ladezeiten der Webseite reduzieren und das Benutzererlebnis verbessern. Zu den wichtigsten Features zählen: Seiten-Caching: Caching-Plugins speichern statische Versionen von dynamisch generierten Seiten, um den Serveraufwand bei wiederholten Anfragen zu reduzieren. Das beschleunigt die Ladezeit für wiederkehrende Besuchende, da der Server keine neue Seite generieren muss. Browser-Caching: Diese Funktion ermöglicht das Speichern von Webseiten-Ressourcen wie Bildern, CSS- und JavaScript-Dateien im Browser des Benutzers. Das reduziert die Anzahl der HTTP-Anfragen und die benötigte Bandbreite, was zu schnelleren Ladezeiten führt. Minifizierung und Zusammenfassung von Dateien: Caching-Plugins komprimieren CSS- und JavaScript-Dateien, indem sie unnötige Zeichen entfernten und mehrere Dateien zusammenführten. Dies führt zu einer kleineren Dateigröße und einer geringeren Anzahl an HTTP-Anfragen. Allerdings hat ist diese Praxis seit der Einführung von HTTP/2 nicht mehr empfehlenswert: Für jede Seite wird eine neue, große Zusammenfassung der CSS- und JS-Dateien erzeugt, was das Caching praktisch nutzlos macht. Die Zusammenführung scheint in erster Linie die Bewertung durch PageSpeed und ähnliche Tools zu beeinflussen, da diese nur einzelne Seiten betrachten und nicht die gesamte Webseite. Andernfalls würde das Problem der ineffektiven Zusammenführung bemängelt werden. Daher empfehlen wir, die Zusammenführung von Dateien nicht zu aktivieren. Die Qualität und der Funktionsumfang von Caching-Plugins können sich erheblich unterscheiden. Caching-Plugins wie Borlabs Cache stellen den Nutzer:innen von Anfang an eine breite Palette an Features zur Verfügung, was die Optimierung deutlich vereinfacht. Content Delivery Networks (CDN) Ein Content Delivery Network (CDN) ist ein Netzwerk aus Servern, die auf der ganzen Welt verteilt sind und Inhalte – etwa Bilder, Skripte, Stylesheets und andere statische Dateien – schneller an Webseiten-Besuchende ausliefert. Die Verwendung eines CDN für WordPress kann Ladezeiten verbessern und die Serverlast reduzieren, da Anfragen für statische Inhalte auf die CDN-Server umgeleitet werden.Allerdings ist ein CDN für die meisten Webseitenbetreibenden nicht erforderlich. Ein CDN lohnt sich in der Regel nur, wenn Besucher:innen aus entfernten Ländern kommen oder größere Medien, etwa Videos, über den Server ausgespielt werden. Wer seine Webseite in Deutschland hostet und hauptsächlich Traffic aus Westeuropa erwartet, wird kein CDN benötigen. Um ein CDN in einer WordPress-Webseite zu nutzen, gibt es verschiedene Möglichkeiten. Eine einfache Methode besteht darin, ein Caching-Plugin wie Borlabs Cache zu verwenden. Die Einrichtung eines CDNs erfolgt dabei in der Regel durch Anpassungen am DNS, sodass eine bestimmte Domain durch das CDN geleitet wird. Vorteile von CDNs: Schnellere Ladezeiten und verbesserte Benutzererfahrung Reduzierte Last auf dem Ursprungsserver Erhöhte Sicherheit und Zuverlässigkeit Direktere Verfügbarkeit der Inhalte Nachteile von CDNs: Zusätzliche Kosten, da CDN-Dienste in der Regel kostenpflichtig sind Mögliche Komplexität bei der Einrichtung und Verwaltung Bei manchen CDNs können sich durch die Caching-Strategien Inkonsistenzen in den angezeigten Inhalten ergeben, wenn sie nicht ordnungsgemäß konfiguriert sind Ohne zusätzliches Monitoring: Wenig Kontrolle über tatsächlich angezeigte Inhalte Performance Monitoring-Tools für WordPress Es gibt zahlreiche Anbieter im Bereich Website-Monitoring, die eine kontinuierliche Überwachung der Performance-Metriken ermöglichen. Diese Dienste bieten eine 24/7-Überwachung einer Webseite, indem sie in regelmäßigen Abständen Pings und Seitenaufrufe durchführen und dabei Antwort- und Ladezeiten messen. Allerdings sind solche Dienstleistungen häufig kostenintensiv. Auch Web-Analyse-Software wie Google Analytics oder Matomo, die primär zur Messung des Traffics eingesetzt werden, kann wichtige Performance-Metriken liefern. Matomo erfasst etwa standardmäßig viele Metriken, die die Webseiten-Performance betreffen. Core Web Vitals Core Web Vitals sind eine Sammlung von Performance-Metriken, die Google eingeführt hat, um die Qualität der Benutzererfahrung auf Webseiten zu bewerten. Sie sind Teil der Suchmaschinenoptimierung (SEO), da sie das Ranking von Webseiten in den Google-Suchergebnissen (SERP) beeinflussen können. Die Core Web Vitals bestehen aus drei Hauptmetriken: Largest Contentful Paint (LCP): LCP misst die Ladezeit des größten sichtbaren Inhalts auf einer Seite. Es gibt Aufschluss darüber, wie schnell eine Seite für den Benutzer zugänglich ist. Eine gute LCP-Bewertung liegt unter 2,5 Sekunden. First Input Delay (FID): FID misst die Zeit, die benötigt wird, um auf die erste Benutzerinteraktion (etwa Klicken, Tippen oder Tastendruck) auf einer Seite zu reagieren. Eine gute FID-Bewertung liegt unter 100 Millisekunden und zeigt an, wie schnell eine Seite interaktiv wird. Cumulative Layout Shift (CLS): CLS misst die visuelle Stabilität einer Seite, indem es unerwartete Layout-Verschiebungen während des Ladens quantifiziert. Eine gute CLS-Bewertung liegt unter 0,10 und hilft sicherzustellen, dass Inhalte nicht plötzlich auf der Seite verschoben werden, was die Benutzererfahrung beeinträchtigt. Die Core Web Vitals werden von realen Nutzer:innen erhoben und für Desktop und Mobile getrennt ausgewiesen. Zusammen bieten diese Metriken Einblicke in die Geschwindigkeit, Reaktionsfähigkeit und Stabilität einer Webseite. Die Erfüllung der Core Web Vitals verbessert das Benutzererlebnis, erhöht die Wahrscheinlichkeit, dass Nutzende auf der Seite bleiben, und kann zu höheren Rankings in den Suchergebnissen führen. Vorbereitung des Performance-Audits Damit du möglichst zuverlässige Ergebnisse erhältst, stelle sicher, dass dein Computer mit dem LAN verbunden ist und die Internetverbindung stabil über DSL erfolgt. Während des Performance-Audits ist es wichtig, die Webseite aus der Perspektive von Besuchenden zu betrachten, um die Ergebnisse nicht zu verfälschen. Du solltest im WordPress-Backend ausgeloggt sein, da sich die Ausgabe zwischen eingeloggten und ausgeloggten User:innen unterscheiden kann. Am besten verwendest du ein privates Browserfenster oder den Inkognito-Modus. Wenn du bisher noch kein Caching-Plugin wie Borlabs Cache oder WP Rocket verwendest, solltest du spätestens jetzt eines installieren und einrichten. Ein solches Plugin hilft, das grundlegende Performance-Potenzial der Webseite auszuschöpfen. Während des Performance-Audits solltest du den Ist-Zustand der Ladezeiten dokumentieren und kontinuierlich Tests durchführen, um Verbesserungen oder Verschlechterungen der Performance nach Änderungen quantifizieren und validieren zu können. Die Archivierung der Ergebnisse ermöglicht es dir, eigene Referenzwerte für zukünftige Vergleiche und die Evaluierung verschiedener Optimierungsmaßnahmen (etwa Ausprobieren unterschiedlicher Caching-Plugins) zu erstellen. Durchführung des Performance-Audits Synthetische Überprüfung Für die synthetische Überprüfung nutzen wir kostenlose Tools. Im Gegensatz zur manuellen Überprüfung erhalten wir Bewertungen und Empfehlungen durch den jeweiligen Dienst selbst. Das gibt einen guten Überblick über den Ist-Zustand der Webseite. Wir stellen im späteren Verlauf, mit der manuellen Überprüfung, eine Lösung vor, die tiefere Einblicke zulässt. Google Search Console Falls die Webseite mit der Google Search Console verknüpft ist, sollten vorab die dort verfügbaren Performance-Metriken geprüft werden. Die Search Console sammelt Daten über einen langen Zeitraum, bietet wichtige Informationen über die Leistung der Webseite und kann auf Probleme hinsichtlich der Nutzererfahrung und technischen Aspekten hinweisen. Der Reiter „Nutzerfreundlichkeit“ in der Google Search Console Durchführung: Navigiere in der Search Console zum Reiter „Nutzerfreundlichkeit“. Überprüfe und bewerte die Metriken und Hinweise der Menüpunkte „Verhalten von Seiten“, „Core Web Vitals“ sowie „Nutzerfreundlichkeit auf Mobilgeräten“. PageSpeed Insights PageSpeed Insights ist ein Tool von Google, das die Leistung einer Webseite auf Mobilgeräten und Desktops getrennt analysiert und Optimierungsvorschläge liefert. Die Ergebnisse werden in zwei Kategorien unterteilt: Felddaten (Core Web Vitals): Felddaten sind reale Nutzerdaten, die aus dem Chrome User Experience Report (CrUX) stammen. Sie beinhalten die Core Web Vitals – Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS) – die für eine gute Nutzererfahrung entscheidend sind. Felddaten können nur erhoben werden, wenn genügend Traffic auf der Webseite vorhanden ist. Die Core Web Vitals einer Webseite sind für Mobile nicht erfüllt Labormessungen: Labormessungen sind synthetische Tests, die in einer kontrollierten Umgebung durchgeführt werden. Sie dienen zur Identifizierung von Performance-Problemen und zur Bewertung der Optimierungsmöglichkeiten. Der resultierende Score (0-100) gibt einen Anhaltspunkt für die Leistung der Webseite, sollte jedoch nur zur Orientierung verwendet werden und ist keine abschließende Beurteilung, da er durch fragwürdige Gewichtungen verzerrt werden kann. Viel wichtiger sind die einzelnen Messwerte, Empfehlungen und Diagnose-Ausweisungen. Durchführung: Überprüfe die Webseite mit Hilfe von PageSpeed Insights. Werte die Metriken und Hinweise für Felddaten (falls verfügbar) und Labormessung aus. Pingdom Website Speed Test Pingdom Website Speed Test ist ein weiteres Tool zur synthetischen Performance-Überprüfung, das Ladezeiten analysiert und Leistungsmetriken bereitstellt. Es bietet eine detaillierte Wasserfall-Analyse der geladenen Ressourcen, zeigt die Gesamtgröße der Seite und die Anzahl der Requests an. Der Pingdom-Score (0-100) dient ebenfalls nur zur Orientierung und erlaubt keine abschließende Beurteilung. Durchführung: Überprüfe die Webseite mit Hilfe von Pingdom Website Speed Test. Werte die Metriken und Hinweise aus. Auswertung der Ergebnisse Bei der Auswertung und Interpretation der Ergebnisse aus PageSpeed Insights und Pingdom Website Speed Test ist folgendes zu beachten: Vergleiche die Ergebnisse aus beiden Tools, um ein umfassendes Bild der Webseiten-Performance zu erhalten. Achte auf wiederkehrende Muster oder Probleme, die in beiden Tools identifiziert werden. Konzentriere dich auf die Optimierungsvorschläge, die den größten Einfluss auf die Leistung haben, und priorisiere sie entsprechend. Nicht jede Empfehlung lässt sich für dein Projekt umsetzen. Beachte, dass die synthetischen Testergebnisse nur zur Orientierung dienen und keine abschließende Beurteilung der tatsächlichen Leistung ermöglichen. Manuelle Messungen, reale Nutzerdaten bzw. Felddaten sind für eine umfassende Beurteilung der Webseiten-Performance entscheidend. Mögliche Empfehlungen aus PageSpeed Insights und Pingdom Website Speed Test können beispielsweise sein: Reduzierung der Serverantwortzeit (Time To First Byte, TTFB): Eine lange Serverantwortzeit kann zu einer verzögerten Darstellung der Seite führen. Optimiere die Serverkonfiguration, reduziere Datenbankabfragen und verwende Caching, um die Antwortzeit zu verkürzen. Ressourcen beseitigen, die das Rendering blockieren: JavaScript- und CSS-Ressourcen können das Laden der Seite verzögern. Reduziere Ressourcen oder lade sie asynchron, um die Seitendarstellung zu beschleunigen. Optimierung von Bildern: Große Bilder können die Ladezeit der Seite erheblich verlängern. Empfehlungen können sein, Bilder zu komprimieren, ein weboptimiertes Format zu wählen (etwa WebP statt JPEG oder PNG) oder Lazy-Loading-Techniken anzuwenden, um Bilder erst dann zu laden, wenn sie tatsächlich benötigt werden. Priorisierung von sichtbarem Inhalt: Lange Seiten mit viel Inhalt benötigen mehr Zeit zum Laden. Priorisiere den sichtbaren Inhalt, um den Benutzern schnellstmöglich wichtige Informationen anzuzeigen, während der restliche Inhalt im Hintergrund geladen wird. Empfehlungen von Google PageSpeed Insights für eine Webseite KeyCDN Tools KeyCDN stellt weitere hilfreiche Tools zur Verfügung. Analysiere und vergleiche die Ergebnisse mit anderen Webseiten. Der Performance Test ermöglicht, ausgehend von 10 Standorten weltweit, die Messung von vier wichtigen Metriken: DNS gibt die Zeit für die Domain Name System-Abfrage an. Connect misst die Zeit misst, die benötigt wird, um eine Verbindung zum Server herzustellen. TLS zeigt die zusätzliche Zeit, die für die TLS-Verbindung der einzelnen Ressource anfällt. Schließlich misst TTFB die Zeit, die vergeht, wenn ein Client eine HTTP-Anfrage stellt, bis er das erste Byte an Daten vom Server empfängt. Mit Hilfe des HTTP Header Checker können wir überprüfen, ob bestimmte Funktionen, beispielsweise DNS Prefetch und Caching, aktiv sind und welche Serverkonfiguration zum Einsatz kommt. Der Traceroute Test (tracert) wird eingesetzt, um die Route eines Computers zum Server zu verfolgen. Hierzu wird eine Liste von Netzwerkgeräten angezeigt, über die das Datenpaket auf dem Weg zum Server durchläuft. Dadurch kann man herausfinden, an welchen Stellen Verzögerungen verursacht werden oder ob Engpässe und Blockaden im Netzwerk auftreten. Manuelle Überprüfung Öffne Google Chrome im Inkognito-Modus, um sicherzustellen, dass keine Browserdaten die Ergebnisse verfälschen. Drücke F12, um die Chrome DevTools zu öffnen, und navigiere zum Reiter „Network“. Aktiviere die Option „Disable cache“, um das clientseitige Caching temporär zu deaktivieren. Besuche die Homepage der zu analysierenden Webseite und analysiere auch stichprobenartig Unterseiten wie Blogbeiträge, wie nachfolgend beschrieben. Durch das Deaktivieren des Cache simulierst du den erstmaligen Aufruf der Webseite aus der Nutzerperspektive. Um Schwankungen und Abweichungen in den Messergebnissen auszugleichen, solltest du mehrere Testdurchläufe durchführen (Strg + F5) und nur diejenigen Ergebnisse verwenden, die keine offensichtlichen Abweichungen aufweisen. In der Fußzeile des „Network“-Reiters werden wichtige Messwerte zur Netzwerkanalyse angezeigt. Bitte beachte, dass die nachfolgenden Referenzwerte und Empfehlungen nur als Anhaltspunkte dienen und je nach Art und Umfang der Webseite variieren können. Es ist wichtig, die Performance deiner Webseite individuell zu analysieren und gezielte Optimierungsmaßnahmen entsprechend der spezifischen Anforderungen und Ziele umzusetzen. Der „Network“-Reiter in Chrome DevTools mit deaktiviertem Client-Cache Die folgenden Messwerte (siehe untere Markierung im Screenshot) solltest du prüfen: Requests: Die Gesamtzahl der Netzwerkanfragen, die während des Ladens einer Seite getätigt wurden. Das umfasst alle Dateien, Bilder, Skripte und sonstige Ressourcen, die von der Seite angefordert werden. Referenzwert: Unter 80 Anfragen Empfehlung: Reduziere die Anzahl der Netzwerkanfragen, indem du Ressourcen zusammenfasst, unnötige Anfragen entfernst und ggf. Lazy Loading für Bilder und Videos implementierst. MB transferred (over network): Dieser Wert zeigt die tatsächliche Menge an Daten in Megabyte an, die über das Netzwerk übertragen wurden, um die Webseite und alle ihre Ressourcen zu laden. Dabei wird auch die Kompression (etwa Gzip) berücksichtigt, die bei der Übertragung der Ressourcen angewendet wird. Referenzwert: Unter 4 MB Empfehlung: Reduziere die Datenmenge, indem du Ressourcen komprimierst, Bilder und Videos optimierst und ggf. Gzip-Kompression verwendest. MB resources: Dieser Wert zeigt die Gesamtgröße der Ressourcen an, die während des Ladens der Seite angefordert wurden, in Megabyte. Das bezieht sich auf die Größe aller heruntergeladenen Ressourcen (Dokumente, Skripte, Stylesheets, Bilder usw.) ohne Berücksichtigung von Header, Cookies und anderen Metadaten. Er zeigt die tatsächliche Größe der Ressourcen an, nachdem sie auf dem Client (etwa im Browser) dekomprimiert wurden. Referenzwert: Unter 5 MB Empfehlung: Minimiere die Größe der Ressourcen, indem du ungenutzte Skripte und Stylesheets entfernst, Code optimierst und Ressourcen komprimierst. Finish: Die Zeit, die benötigt wurde, um alle Netzwerkanfragen abzuschließen und alle Ressourcen vollständig herunterzuladen. Dieser Wert wird in Sekunden angegeben und endet, wenn die letzte Ressource empfangen wurde. Werden Ressourcen asynchron nachgeladen, beispielsweise beim Abspielen eines Videos, läuft die Finish-Zeit weiter, auch wenn die Webseite bereits fertig geladen wurde. Referenzwert: Unter 3 Sekunden (ohne Nachladen von Ressourcen) Empfehlung: Beschleunige die Ladezeit, indem du Ressourcen optimierst, auf ein performanteres Hosting wechselst oder CDN-Lösungen verwendest. DOMContentLoaded: Die Zeit, die benötigt wurde, um das DOM (Document Object Model) der Seite aufzubauen und bereit für die Verarbeitung durch Skripte zu sein. Diese Zeit wird in Sekunden gemessen und endet, sobald das Browserfenster das "DOMContentLoaded"-Ereignis ausgelöst hat. Referenzwert: Unter 2 Sekunden Empfehlung: Verbessere die DOM-Bereitschaft, indem du kritische Ressourcen priorisierst, Render-Blocking-Ressourcen vermeidest und Skripte asynchron lädst. Load: Die Zeit, die benötigt wurde, um die Seite vollständig zu laden, einschließlich aller Ressourcen, Bilder und Skripte. Dieser Wert wird in Sekunden angegeben und endet, wenn das Browserfenster das "load"-Ereignis ausgelöst hat, das anzeigt, dass alle Ressourcen und Skripte verarbeitet wurden und die Seite vollständig geladen ist. Referenzwert: Unter 2,5 Sekunden Empfehlung: Verringere die Gesamtladezeit, indem du die oben genannten Optimierungsmaßnahmen umsetzt und kontinuierlich die Performance deiner Webseite überwachst und anpasst. Wasserfalldiagramm Der Reiter „Network“ bietet zudem ein Wasserfalldiagramm (rechts neben der Time-Spalte, siehe Screenshot oben), das die Ladezeiten der einzelnen Ressourcen sowie die Reihenfolge und Parallelität der Anfragen visualisiert. Mithilfe dieses Diagramms kannst du erkennen, ob Performanceprobleme aufgrund vieler einzelner Ressourcen oder aufgrund von Verarbeitungs- und Netzwerkverzögerungen vorliegen. Die Time to First Byte (TTFB) ist dabei von besonderer Bedeutung. Kategorisierung Der „Network“-Reiter in Chrome DevTools gefiltert nach CSS-Dateien Du kannst die geladenen Ressourcen nach verschiedenen Kategorien filtern. Dies erleichtert die Analyse und ermöglicht es, spezifische Ressourcentypen zu untersuchen. Die Kategorien umfassen: Fetch/XHR: Hier werden Fetch-Anfragen und XMLHttpRequests (XHR) angezeigt. Das sind in der Regel API-Aufrufe oder asynchrone Anfragen, die von JavaScript getätigt werden, um Daten vom Server abzurufen oder zu übermitteln. JS: Diese Kategorie zeigt alle JavaScript-Dateien, die von der Webseite geladen wurden. CSS: Zeigt alle geladenen Cascading Style Sheets (CSS)-Dateien an. Media: Hier werden alle geladenen Medienressourcen wie Bilder, Videos und Audiodateien aufgelistet. Font: Diese Kategorie zeigt alle geladenen Schriftarten (Webfonts) an, die für die Textdarstellung auf der Webseite verwendet werden. Doc: Hier werden alle HTML-Dokumente aufgelistet, einschließlich der Hauptseite und möglicherweise eingebetteter iframes. WS: Zeigt WebSocket-Verbindungen an. WebSockets ermöglichen eine bidirektionale Kommunikation zwischen dem Client (Browser) und dem Server in Echtzeit. Wasm: Hier werden WebAssembly-Module angezeigt. WebAssembly ist eine binäre Code-Form, die von modernen Browsern ausgeführt werden kann und eine schnelle Leistung für Webanwendungen bietet. Manifest: Diese Kategorie zeigt das Web App Manifest, das von Progressive Web Apps (PWA) verwendet wird. Other: Zeigt alle Ressourcen, die nicht in die oben genannten Kategorien fallen. Dazu können beispielsweise Text- oder JSON-Dateien gehören. Drosselung simulieren Die Drosselungsfunktion in den Chrome DevTools ermöglicht es dir, die Netzwerk- und CPU-Geschwindigkeit zu simulieren, die Nutzenden mit einer langsameren Verbindung oder einem weniger leistungsfähigen Gerät zur Verfügung steht. Diese Funktion vermittelt ein realistisches Bild davon, wie deine Webseite für Nutzende mit unterschiedlichen Verbindungsgeschwindigkeiten und Geräteleistungen abseits von leistungsstarken Desktop-PCs und DSL-Verbindungen lädt. Die Drosselungsfunktion in Chrome DevTools Durchführung: Um die Drosselung zu aktivieren, öffne die Chrome DevTools, klicke auf den Reiter "Network" und wähle in der Dropdown-Liste für "Throttling" eine der verfügbaren Presets (z.B. "Fast 3G" oder "Slow 3G"). Du kannst auch eine benutzerdefinierte Drosselungsrate erstellen, indem du auf "Add..." klickst und die gewünschten Werte eingibst. Die CPU-Drosselung kann im Reiter "Performance" eingestellt werden, indem du auf das Zahnrad-Symbol klickst und die gewünschte CPU-Drosselungsrate auswählst. Geräteauflösungen simulieren Die Device Toolbar in den Chrome DevTools ermöglicht es, deine Webseite auf verschiedenen Geräten und Bildschirmgrößen zu simulieren. Das hilft dabei, mögliche Performance- oder Darstellungsprobleme auf mobilen Geräten oder Tablets zu identifizieren und anzugehen. Die Device Toolbar in Chrome DevTools Durchführung: Um die Device Toolbar zu aktivieren, öffne die Chrome DevTools und klicke auf das Geräte-Symbol (ein kleines Smartphone- und Tablet-Symbol) in der oberen linken Ecke. Anschließend erscheint eine Toolbar am oberen Rand des Browserfensters, in der du verschiedene Geräte aus einer Dropdown-Liste auswählen kannst (z.B. "iPhone 12 Pro" oder "Pixel 5"). Du kannst auch benutzerdefinierte Geräte und Bildschirmgrößen hinzufügen, indem du auf "Edit..." klickst und die gewünschten Werte eingibst. Während der Simulation kannst du die Ausrichtung des Geräts ändern (Hoch- oder Querformat), die Zoomstufe anpassen und gegebenenfalls die Netzwerk- und CPU-Drosselung verwenden, um realistischere Testbedingungen zu schaffen. Medieninhalte Bilder und Videos sind entscheidende Elemente einer ansprechenden Webseite, können aber auch erhebliche Auswirkungen auf die Performance haben. Da sie oft den größten Teil der Ressourcen ausmachen, ist ihre gesonderte Betrachtung und Optimierung wichtig. Während Videos in der Regel asynchron nachgeladen werden, werden Bilder meist beim Seitenaufruf vollständig geladen, was zu unnötigen Ladeverzögerungen führen kann. Eine effektive Methode zur Verbesserung der Ladezeit von Bildern ist Lazy Loading. Dabei werden Bilder erst geladen, wenn sie tatsächlich im sichtbaren Bereich des Nutzers erscheinen. Für eine optimale Performance sollten Bilder auch komprimiert und im richtigen Format bereitgestellt werden. Stelle sicher, dass deine Webseite für Desktop-Ansichten größere Bilder verwendet und für mobile Ansichten entsprechend kleinere. Beachte die Empfehlungen zu Bildern, die PageSpeed Insights zurückmeldet. Ein weiterer wichtiger Aspekt ist die Komprimierung von Bildern. Durch die Reduzierung der Dateigröße, ohne die Bildqualität merklich zu beeinträchtigen, kann die Ladezeit erheblich verkürzt werden. In WordPress gibt es verschiedene Plugins und Dienste, die bei der Bildoptimierung helfen können. Sie komprimieren Bilder automatisch und bieten oft zusätzliche Funktionen, wie das automatische Generieren von WebP-Bildern oder das Anpassen der Bildgröße für verschiedene Geräte und Auflösungen. Ressourcen von Drittanbietern (Third-Party) Wenn du eine WordPress-Webseite betreibst, die keine Einbettungen von Drittanbietern verwendet, kannst du mit einem guten Caching-Plugin (etwa Borlabs Cache) bereits hervorragende Performance-Ergebnisse erzielen. Schwieriger wird es, wenn Ressourcen von Drittanbietern eingebunden sind und von externen Servern geladen werden müssen. In solchen Fällen sind die Optimierungsmöglichkeiten begrenzt, da du externe Ressourcen nicht direkt optimieren kannst. Beispiele für Drittanbieter-Einbindungen sind YouTube-Videos, Fonts und Google Analytics. Der Reiter „Sources“ in Chrome DevTools Durchführung: Um Drittanbieter-Verbindungen zu identifizieren, verwende wieder die Chrome DevTools. Navigiere dieses Mal zum Reiter "Sources". Hier siehst du eine Liste aller Verbindungen und geladenen Ressourcen, einschließlich derjenigen, die von Drittanbietern stammen. Du kannst die Ladezeiten und weitere Informationen zu jeder Ressource über den Reiter „Network“ genauer analysieren. Auch wenn die Möglichkeiten bei externen Ressourcen allgemein begrenzt sind, gibt es einige Optimierungsmöglichkeiten, die du in Betracht ziehen kannst, um die Performance von Drittanbieter-Inhalten zu verbessern: Prüfe, ob die Einbindungen wirklich benötigt werden oder ob sie reduziert werden können, indem du lokale Lösungen einsetzt. Wenn möglich, lade externe Ressourcen wie Schriftarten oder Skripte lokal auf deinem Server und bette sie von dort aus ein, um die Abhängigkeit von externen Servern zu reduzieren. Priorisierung externer Ressourcen: Beurteile die Wichtigkeit jeder externen Ressource und ordne sie entsprechend ihrer Priorität ein. Bei Ressourcen mit niedriger Priorität, die für die initiale Darstellung der Seite nicht unbedingt benötigt werden, kannst du die Einbindung beispielsweise in den Footer verschieben. Bei Ressourcen mit hoher Priorität, beispielsweise Fonts, kannst du das "preload"-Attribut verwenden, um den Browser anzuweisen, diese im Voraus herunterzuladen und zu speichern, damit sie schneller verfügbar sind, wenn sie tatsächlich benötigt werden. Die Umsetzung kann auch mit Hilfe eines selbstentwickelten WordPress-Plugins erfolgen. Externe Ressourcen über einen Cookie-Banner blocken: Wenn externe Ressourcen wie Social-Media-Plugins oder Analyse-Tools Cookies setzen, kannst du deren Ausführung über ein Consent Plugin verzögern, bis der Benutzer seine Einwilligung gegeben hat. Das reduziert die Anzahl der initial geladenen Ressourcen und verbessert somit die Performance. DNS-Prefetch: Beim DNS-Prefetching führt der Browser im Voraus DNS-Anfragen für externe Ressourcen durch, bevor sie tatsächlich benötigt werden. Dies kann die Verzögerung reduzieren, die normalerweise bei der DNS-Auflösung entsteht, und somit die Ladezeit der eingebundenen Ressourcen verkürzen. Borlabs Cache unterstützt DNS-Prefetching. Backend optimieren Bis hierhin haben wir uns vor allem auf die Analyse und Optimierung des Frontends konzentriert. In diesem Kapitel wenden wir uns dem WordPress-Backend zu. Aktualisierungen Entferne regelmäßig unnötige Plugins und halte sowohl WordPress als auch die verbleibenden Plugins auf dem neuesten Stand. Überflüssige oder veraltete Plugins können Sicherheitslücken und Performance-Probleme verursachen. Stelle sicher, dass du eine aktuelle PHP-Version auf deinem Server verwendest. Datenbank-Optimierung Im Laufe der Zeit können Datenbanktabellen unordentlich und ineffizient werden, insbesondere wenn viele Plugins installiert und deinstalliert wurden oder häufig Änderungen an der Webseite erfolgen. Durch das Entfernen von überflüssigen und veralteten Daten kann die Datenbank effizienter arbeiten. Du kannst ein Plugin wie Borlabs Cache verwenden, das den Prozess automatisiert. Borlabs Cache kann deine Datenbank aufräumen und reduzieren und so das System performanter machen. WP Cronjobs Cronjobs sind zeitgesteuerte Aufgaben, die automatisch im Hintergrund ausgeführt werden, um wiederkehrende Aktionen wie das Veröffentlichen geplanter Beiträge, das Aktualisieren von Feeds oder das Ausführen von regelmäßigen Backups durchzuführen. WordPress verfügt über ein eingebautes System namens WP-Cron, das Cronjob-ähnliche Funktionen bereitstellt. WP-Cron wird jedoch bei jedem Seitenaufruf ausgelöst, was zu Performance-Problemen führen kann, insbesondere bei hohem Traffic oder rechenintensiven Aufgaben. Der Vorteil der Verwendung eines echten Cronjobs (also systemgesteuerter Cronjobs) besteht darin, dass die zeitgesteuerten Aufgaben unabhängig von Seitenaufrufen ausgeführt werden, wodurch die Leistung und Zuverlässigkeit verbessert wird. Um einen echten Cronjob unter WordPress zu implementieren, muss WP-Cron durch einen Eintrag in der wp-config.php deaktiviert werden und anschließend durch einen systemgesteuerten Cronjob über das Control Panel des Webhosters ersetzt werden. Serverseitiges Caching Serverseitige Caching-Lösungen wie LiteSpeed, Varnish und Redis bieten eine effiziente Methode, um die Performance von Webseiten zu verbessern, indem sie häufig angeforderte Daten im Server-Cache speichern. Im Vergleich zu Caching-Plugins für WordPress, die auf Anwendungsebene arbeiten, können serverseitige Caching-Lösungen eine schnellere und effizientere Bereitstellung von Inhalten ermöglichen, da sie näher an der Quelle (dem Webserver) arbeiten. Das führt zu einer Reduzierung der Serverlast und einer besseren Skalierbarkeit bei hohem Traffic. Darüber hinaus sind serverseitige Caching-Lösungen oft besser in der Lage, dynamische Inhalte effizient zu verarbeiten, was insbesondere für komplexe WordPress-Webseiten von Vorteil sein kann. Wie hat dir der Artikel gefallen? Vielen Dank für dein Feedback!

Netz: Borlabs - Premium Plugins für WordPress
Aktualisiert: 10.7.2024

zum Artikel gehen

WordPress Performance-Audit: So führst du es durch

Checkliste WordPress-Wartung: WordPress Wartung vom Profi!

erfolgreiches Qualitätsmanagement Audit durch TÜV

Mehr Performance für Deine WordPress Seite

Jetpack: Das Schweizer-Taschenmesser für WordPress

KritisV- Audit in Düsseldorf