Google PageSpeed Insights ist zweifellos ein nützliches Tool für Webmaster, Entwickler und Webseiten-Besitzer aller Art. Wir haben jedoch festgestellt, dass viele Menschen stundenlang damit beschäftigt sind, ihre Webseiten zu optimieren, um bei diesem Test 100/100 zu erreichen.
Die Wahrheit ist, dass Google PageSpeed Insights so nicht genutzt werden soll und dass es sich auch nicht lohnt, dieses Ziel zu erreichen. Wenn man sich darauf konzentriert, die Empfehlungen der Plattform umzusetzen, anstatt sich auf die Zahl oben auf der Seite zu konzentrieren, wird man viel mehr Vorteile für seine Webseite schaffen.
Dieser Beitrag ist ein umfassender Leitfaden, um Google PageSpeed Insights zu deinem besten Nutzen zu nutzen. Es wird behandelt, wie Google deine Bewertung verwendet und wie die erhaltenen Empfehlungen integriert werden können.
Fangen wir an!
Eine Einführung in Google PageSpeed Insights
Wenn du noch nicht mit Google PageSpeed Insights vertraut bist, ist es ein Tool zum Testen der Webseiten-Performance. Du kannst jede beliebige URL eingeben und analysieren lassen:
Google gibt dann eine Gesamtpunktzahl von 100 für die getestete Webseite an, die auf mehreren Best Practices zur Leistungsoptimierung basiert:
Zusammen mit diesem Ergebnis sieht man auch mehrere Empfehlungen von Google, wie man seine Leistung (und damit auch die PageSpeed Insights-Punktzahl) verbessern kann:
Ab 2018 werden die PageSpeed Insights-Punktzahlen über Lighthouse, Googles Open-Source-Tool zur automatischen Verbesserung der Gesamtqualität von Webseiten, berechnet. Diese Plattform kann alle Arten von Faktoren bewerten, einschließlich Leistung, Zugänglichkeit, progressive Webanwendungen und mehr.
Um die umfassende Bewertung deiner Webseite durch Lighthouse zu sehen, kannst du Googles Measure-Tool verwenden:
Zusätzlich zur Durchführung eines Leistungsaudits, das dem von Google PageSpeed Insights ähnelt, bekommt man Bewertungen für Zugänglichkeit, bewährte Verfahren und Suchmaschinenoptimierung (SEO).
Die Wahrheit über das Erreichen von 100/100 Punkten in Google PageSpeed Insights
Wie wir zu Beginn dieses Beitrags erwähnt haben, sehen wir viele Webseiten-Besitzer und -Entwickler, die davon besessen sind, eine perfekte PageSpeed Insights-Punktzahl zu erreichen. Leider neigen diese Leute dazu, den wichtigeren Aspekt der Testergebnisse zu übersehen: die Empfehlungen.
Während man sicher bestrebt sein sollte, die Ladezeiten seiner Webseite so weit wie möglich zu verbessern, ist eine 100/100 in Google PageSpeed Insights eigentlich gar nicht so wichtig. Für den Anfang ist es nicht einmal der ultimative Test für die Leistung.
Im Gegensatz zu PageSpeed Insights erlaubt dir Pingdom Tools, die Leistung deiner Webseite von verschiedenen Orten aus zu testen:
Du kannst auch Tests auf Plattformen wie GTmetrix (das deine Ergebnisse aus PageSpeed Insights und YSlow kombiniert) und WebPageTest durchführen. Es ist sehr wahrscheinlich, dass die Werte dieser verschiedenen Tools nicht genau übereinstimmen, was zeigt, wie willkürlich diese Zahlen sein können.
Was wirklich zählt, ist die tatsächliche Geschwindigkeit der Webseite. Um es ins rechte Licht zu rücken: Wir haben Seiten mit durchschnittlichen Ladezeiten von weniger als 500 Millisekunden (was extrem schnell ist!) gesehen, die keine 100/100-Punktzahl bei PageSpeed Insights haben.
Der andere Faktor, der den Ansatz zur Geschwindigkeitsoptimierung beeinflussen sollte, ist die wahrgenommene Leistung der Webseite. Deine Besucher interessiert es nicht, wie dein Google PageSpeed Insights-Ergebnis aussieht. Sie wollen nur so schnell wie möglich deinen Content sehen.
Der eigentliche Zweck des Testens der Leistung deiner Webseite mit Google PageSpeed Insights besteht nicht darin, eine hohe Punktzahl zu erreichen. Vielmehr geht es darum, problematische Stellen auf deiner Webseite zu finden, so dass du sie optimieren und sowohl deine tatsächliche als auch deine wahrgenommene Ladezeit verringern kannst.
Wie Google die PageSpeed Insights nutzt
Neben der Beeinflussung der User Experience (UX) deiner Webseite spielt auch die Leistung eine Rolle für die SEO. Da PageSpeed Insights von der größten und beliebtesten Suchmaschine der Welt betrieben wird, liegt es nahe, dass dein Ergebnis einen gewissen Einfluss auf die Platzierung in den Suchmaschinenergebnissen (SERP) haben könnte (zumindest bei Google selbst).
Die Realität ist, dass Google PageSpeed Insights zur Bestimmung der Rankings verwendet – sozusagen. Die Geschwindigkeit der Webseite ist ein Ranking-Faktor, schlicht und einfach. Dein Testergebnis kann dir eine ziemlich gute Vorstellung davon geben, wo du an dieser Front stehst.
Google berücksichtigt jedoch mehr als nur die Zahl im Kreis an der Spitze deiner PageSpeed-Ergebnisse. Wenn du einen 100/100-Wert erreichst, garantiert dir das noch lange nicht einen Spitzenplatz in den SERPs.
Trotzdem kannst du deine PageSpeed Insights-Ergebnisse bei der Verbesserung deines SEOs einsetzen. Seit 2018 ist beispielsweise die mobile Seitengeschwindigkeit ein Ranking-Faktor für Google. Du wirst feststellen, dass dein Leistungstest Daten sowohl für die Desktop- als auch für die mobile Version deiner Webseite liefert:
Da mehr als 73 Prozent der mobilen Internetnutzer angeben, dass sie auf eine Webseite gestoßen sind, deren Laden zu lange dauert, sind die Informationen auf der Registerkarte Google PageSpeed Insights Mobile von unschätzbarem Wert. Wenn man die Empfehlungen hier nutzt, um die Ladezeiten auf Smartphones und anderen Geräten zu verringern, sollte man einen Wettbewerbsvorteil haben.
Google PageSpeed Insights Empfehlungen (24 Wege zur Leistungsverbesserung)
Wir haben in diesem Beitrag viel über die Empfehlungen von Google PageSpeed Insights gesprochen. Sie sind der wahre Kern deiner Leistungstestergebnisse und weitaus wertvoller als dein tatsächliches Ergebnis. Deshalb haben wir ihnen den Rest dieses Postings gewidmet.
Bevor wir jedoch auf die einzelnen Vorschläge eingehen, muss der Unterschied zwischen den Feld- und Labordaten verstanden werden. Erstere vergleicht deine Seite mit anderen im Chrome User Experience Report der letzten 30 Tage.
Es gibt auch zwei Diagramme, die zeigen, wo dein durchschnittlicher First Contentful Paint (FCP) und First Input Delay (FID) liegt:
In der obigen Abbildung entspricht der FCP unserer Webseite etwa 45 Prozent der Webseiten im 75. Perzentil und unser FID etwa 9 Prozent des 95.
Die Labordaten zeigen spezifische Daten für eine simulierte Seitenlast:
Du wirst feststellen, dass unsere Felddaten und Labordaten nicht genau übereinstimmen. Das ist völlig normal. Die Labordaten werden unter festen Bedingungen erstellt, während die Felddaten die tatsächlichen Ladegeschwindigkeiten verwenden, die im Laufe der Zeit gesammelt wurden.
In Kombination betrachtet, sollten die Feld- und Labordaten eine Vorstellung von den tatsächlichen Ladezeiten deiner Webseite geben. Wie wir bereits erwähnt haben, ist dies sogar noch wichtiger als dein PageSpeed-Gesamtergebnis, daher sollte man auf diese Zahlen achten.
Nachdem du diese Informationen berücksichtigt hast, ist es an der Zeit, die Leistung deiner Webseite mit den Empfehlungen von Google PageSpeed zu verbessern.
1. Render-Blocking Ressourcen eliminieren
Eine der häufigeren Empfehlungen von Google PageSpeed Insights ist die Eliminierung von Rendering-blockierenden Ressourcen:
Damit sind JavaScript- und CSS-Skripte gemeint, die das schnelle Laden deiner Seite verhindern. Der Browser des Besuchers muss diese Dateien erst herunterladen und verarbeiten, bevor er den Rest der Seite anzeigen kann, viele von ihnen „above the fold“ können sich negativ auf die Geschwindigkeit deiner Seite auswirken.
Mehr über dieses Problem steht in unserem Leitfaden zur Beseitigung von Render-Blocking-Skripten. Was Google betrifft, gibt es zwei Lösungen, die man in Betracht ziehen sollte:
- Wenn du nicht viel JavaScript oder CSS hast, kannst du sie inlinen, um diese Warnung zu beseitigen. Dieser Prozess bezieht sich auf das Einbinden deines JavaScript und/oder CSS in deine HTML-Datei. Du kannst dies mit einem Plugin wie Autoptimize Dies gilt jedoch nur für sehr kleine Webseiten. Die meisten WordPress-Seiten verfügen über genügend JavaScript, so dass diese Methode die Seite tatsächlich verlangsamen könnte.
- Die andere Möglichkeit ist, dein JavaScript aufzuschieben. Dieses Attribut lädt deine JavaScript-Datei während des HTML-Parsings herunter, führt sie aber erst aus, wenn das Parsing abgeschlossen ist. Außerdem werden Skripte mit diesem Attribut in der Reihenfolge ihres Erscheinens auf der Seite ausgeführt.
Du findest eine Liste der Ressourcen, die von diesem Problem am meisten betroffen sind, unterhalb der Empfehlung in deinen PageSpeed-Ergebnissen.
In diesem Video erfährst du mehr darüber, wie du Ressourcen, die das Rendern blockieren, eliminieren kannst:
2. Verkettung kritischer Anfragen vermeiden
Das Konzept der Verkettung kritischer Anfragen hat mit dem Critical Rendering Path (CRP) zu tun und damit, wie die Browser deine Seiten laden. Bestimmte Elemente – wie das oben besprochene JavaScript und CSS – müssen vollständig geladen werden, bevor deine Seite sichtbar wird.
Als Teil dieses Vorschlags zeigt dir Google PageSpeed Insights die Anforderungsketten auf der zu analysierenden Seite an:
Dieses Diagramm zeigt dir die Reihe von abhängigen Anforderungen, die erfüllt sein müssen, bevor deine Seite sichtbar wird. Es zeigt auch, wie groß die einzelnen Ressourcen sind. Im Idealfall solltest du die Anzahl der abhängigen Anforderungen sowie deren Größe minimieren.
Mehrere Methoden zur Erreichung dieser Ziele werden durch andere Empfehlungen abgedeckt, die in diesem Beitrag besprochen werden, darunter
- Eliminierung von Render-Blocking-Ressourcen.
- Verschieben von Offscreen-Bildern
- Minifizieren von CSS und JavaScript
Zusätzlich kann die Reihenfolge, in der die Assets geladen werden, optimiert werden, um den CRP zu verkürzen. Dies bedeutet, dass der above the fold hinausgehende Inhalt an den Anfang deiner HTML-Datei verschoben wird. Mehr über die Optimierung des CRP gibt es in unserem Beitrag „Wie man den kritischen Rendering-Pfad in WordPress optimiert„.
Es ist wichtig zu beachten, dass es nicht eine magische Anzahl von kritischen Anfrageketten gibt, an denen man arbeiten muss. Google PageSpeed Insights zählt diese Prüfung im Gegensatz zu vielen anderen Empfehlungen nicht als „bestanden“ oder „nicht bestanden“. Diese Informationen werden lediglich zur Verfügung gestellt, um die Ladezeiten zu verbessern.
3. Die Anzahl der Anfragen niedrig halten und die Übertragungsgrößen klein halten
Je mehr Anfragen die Browser zum Laden deiner Seiten stellen müssen und je größer die Ressourcen sind, die dein Server als Antwort zurückgibt, desto länger dauert das Laden deiner Webseite. Daher ist es sinnvoll, dass Google dir empfiehlt, die Anzahl der erforderlichen Anfragen zu minimieren und die Größe der Ressourcen zu verringern.
Wie die Empfehlung Vermeidung der Verkettung kritischer Anfragen führt auch diese Empfehlung nicht zu einem „Pass“ oder „Fail“. Stattdessen wird lediglich eine Liste mit der Anzahl und Größe der Anfragen angezeigt:
Es gibt keine ideale Anzahl von Anfragen oder maximale Größen, die man beachten muss. Stattdessen empfiehlt Google, dass man diese Standards für sich selbst festlegt, indem man ein Leistungsbudget erstellt. Dabei handelt es sich um eine Reihe von definierten Zielen, die sich auf folgende Aspekte beziehen können:
- Maximale Bildgrößen
- Die Anzahl der verwendeten Web-Schriftarten
- Wie viele externe Ressourcen aufgerufen werden
- Die Größe der Skripte und Frameworks
Die Erstellung eines Leistungsbudgets gibt dir eine Reihe von Standards, denen gegenüber du Rechenschaft ablegen musst. Wenn du dein Budget überschreitest, kannst du dann Entscheidungen darüber treffen, ob du Ressourcen eliminieren oder optimieren willst, um deine vorgegebenen Richtlinien einzuhalten. Weitere Informationen zur Erstellung eines solchen Budgets gibt es im eigenen Leitfaden von Google.
4. CSS verkleinern
CSS-Dateien sind oft größer als nötig, um sie für Menschen leichter lesbar zu machen. Manchmal enthalten sie verschiedene Zeilenumbrüche und Leerzeichen, die für den Computer nicht notwendig sind, um ihren Inhalt zu verstehen.
Die Verkleinerung des CSS ist der Prozess der Verdichtung der Dateien durch die Beseitigung unnötiger Zeichen, Leerzeichen und Duplikate. Google empfiehlt diese Vorgehensweise, da sie die Größe der CSS-Dateien reduziert und somit die Ladegeschwindigkeit verbessern kann:
Diese Geschwindigkeitsvorteile sind der Grund, warum Kinsta eine Funktion zur Code-Minifizierung in das MyKinsta-Dashboard integriert hat. Kunden können wählen, ob sie ihre CSS- und JavaScript-Dateien automatisch minifizieren lassen wollen, um ihre Seiten ohne manuellen Aufwand zu beschleunigen.
Wenn du kein Kinsta-Kunde bist, empfehlen wir dir, ein Plugin wie Autoptimize oder WP Rocket zu verwenden, um deine CSS-Dateien zu minifizieren.
5. JavaScript verkleinern
Genauso wie die Größe von CSS-Dateien durch die Verkleinerung reduziert werden kann, gilt dies auch für die Größe von JavaScript-Dateien:
Autoptimize oder WP Rocket können diese Aufgabe auch für deine WordPress-Seite übernehmen.
6. Ungenutztes CSS entfernen
Jeder Code in deinem Stylesheet ist Inhalt, der geladen werden muss, damit deine Seite für die Benutzer sichtbar wird. Wenn es auf deiner Webseite CSS gibt, das nicht wirklich nützlich ist, belastet es deine Leistung unnötig.
Aus diesem Grund empfiehlt Google, alle nicht verwendeten CSS Dateien zu entfernen:
Die Lösung ist hier im Wesentlichen die gleiche wie bei der Beseitigung von Render-Blocking-CSS. Du kannst Stile auf die für deine Seiten sinnvollste Art und Weise einfügen oder verschieben. Außerdem kann man ein Tool wie Chrome DevTools verwenden, um nicht verwendetes CSS zu finden, die optimiert werden müssen.
7. Minimierung der Main-Thread Work
Der „Main-Thread“ ist das Hauptelement des Browsers eines Benutzers, das dafür verantwortlich ist, den Code in eine Webseite zu verwandeln, mit der Besucher interagieren können. Er parst und führt HTML, CSS und JavaScript aus. Außerdem ist er für die Handhabung von Benutzerinteraktionen zuständig.
Das bedeutet, dass der Haupt-Thread, wenn er den Code deiner Webseite durcharbeitet, nicht auch Benutzeranfragen bearbeiten kann. Wenn die Arbeit des Main-Threads zu lange dauert, kann dies zu schlechter UX und langsamen Seitenladezeiten führen.
Google PageSpeed kennzeichnet Seiten, die länger als vier Sekunden benötigen, um die Arbeit des Main-Threads abzuschließen und eine brauchbare Webseite zu präsentieren:
Einige der Methoden zur Reduzierung der Main-Thread-Work wurden bereits in anderen Abschnitten dieses Beitrags behandelt, darunter auch:
- Das Verkleinern deines Codes
- Entfernen von unbenutztem Code
- Caching implementieren
Möglicherweise sollte jedoch auch eine Codeaufteilung in Betracht gezogen werden. Bei diesem Prozess wird das JavaScript in Bündel aufgeteilt, die bei Bedarf ausgeführt werden, anstatt dass die Browser sie alle laden muss, bevor die Seite interaktiv wird.
Webpack wird häufig zur Implementierung von Code-Splitting verwendet. Beachte, dass es sich hierbei um eine ziemlich fortgeschrittene Technik handelt, die Anfänger in der Regel nicht alleine durchführen sollten.
8. Reduziere die Ausführungszeit von JavaScript
Die Ausführung von JavaScript ist oft der wichtigste Beitrag zur Arbeit am Main-Thread. PageSpeed Insights hat eine gesonderte Empfehlung, um dich zu warnen, wenn diese Aufgabe einen signifikanten Einfluss auf die Leistung deiner Webseite hat:
Die oben vorgeschlagenen Methoden zur Reduzierung der Arbeit des Main-Threads sollten auch diese Warnung in deinen PageSpeed-Ergebnissen auflösen.
9. Server-Antwortzeiten reduzieren (TTFB)
Die Zeit bis zum ersten Byte (TTFB) ist ein Maß dafür, wie lange es dauert, bis ein Browser nach einer Anfrage das erste Byte Daten vom Server deiner Webseite zurückerhält. Dies ist zwar nicht dasselbe wie die Gesamtgeschwindigkeit der Seite, aber ein niedriger TTFB-Wert ist verständlicherweise gut für die Leistung deiner Seite.
Daher gehört die Reduzierung der Server-Antwortzeiten zu den Empfehlungen von Google PageSpeed Insights. Wenn du in der Lage bist, einen niedrigen TTFB zu erreichen, wird diese Meldung unter Bestandene Prüfungen angezeigt:
Es gibt mehrere Faktoren, die den TTFB beeinflussen können. Einige Strategien zur Senkung des TTFB sind unter anderem:
- Wähle einen hochwertigen Hosting-Anbieter, der sich auf die Geschwindigkeit konzentriert
- Verwendung von leichtgewichtigen Themes und Plugins
- Reduzierung der Anzahl der auf deiner Webseite installierten Plugins
- Nutzung eines Content-Delivery-Netzwerks (CDN)
- Implementierung von Browser-Caching
- Auswahl eines soliden Domain Name System (DNS)-Anbieters
Unser Beitrag über TTFB ist eine ausgezeichnete Quelle für weitere Details zur Optimierung in diesem Bereich.
10. Die richtige Bildgröße wählen
Mediendateien wie Bilder können die Leistung der Webseite wirklich beeinträchtigen. Die richtige Größenbestimmung ist eine einfache Möglichkeit, die Ladezeiten zu reduzieren:
Wenn deine Seite Bilder enthält, die größer als nötig sind, wird CSS verwendet, um die Größe entsprechend anzupassen. Dies dauert länger, als einfach nur die Bilder in der richtigen Größe zu laden, was sich auf die Leistung deiner Seite auswirkt.
Um dies zu beheben, kannst du entweder Bilder in der richtigen Größe hochladen oder ‚responsive images‘ verwenden. Dazu muss man für verschiedene Geräte unterschiedlich große Bilder erstellen.
Dazu eignet sich das srcset-Attribut, das den <img>-Tags hinzugefügt wird, um alternative Bilddateien in verschiedenen Größen anzugeben. Browser können diese Liste lesen, bestimmen, welche Option für den aktuellen Bildschirm am besten geeignet ist, und diese Version des Bildes liefern.
Nehmen wir zum Beispiel an, dass du ein Header-Bild hast und es ansprechend gestalten möchtest. Du könntest drei Versionen davon mit einer Breite von 800, 480 und 320 Pixeln hochladen. Dann würdest du das srcset-Attribut wie folgt anwenden:
<img srcset="header-image-800w.jpg 880w,
Header-image-480w.jpg 480w,
Header-image-320w.jpg 320w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="header-image-800w.jpg">Das srcset-Attribut gibt die verschiedenen verfügbaren Dateien an, und das sizes-Attribut teilt den Browsern mit, welche auf der Grundlage der aktuellen Bildschirmgröße verwendet werden soll.
11. Offscreen Bilder aufschieben
Der Prozess des Aufschiebens von Bildern im Offscreen-Bereich wird allgemein als „lazy loading“ bezeichnet. Das bedeutet, dass der Browser nicht jedes Bild auf einer Seite lädt, bevor er den oben genannten Inhalt anzeigt, sondern nur die Bilder, die sofort sichtbar sind.
Weniger Laden, bevor die Seite sichtbar wird, bedeutet eine bessere Leistung, weshalb Google diese Methode empfiehlt:
Es gibt mehrere WordPress-Plugins, die speziell für das Lazy-Load-Verfahren entwickelt wurden, darunter a3 Lazy Load und Lazy Load von WP Rocket. Verschiedene Bild- und Leistungsoptimierungs-Plugins wie z.B. Autoptimize haben auch Lazy-Loading-Funktionen. Schau dir unseren vollständigen Leitfaden über Lazy Loading für Bilder und Videos auf WordPress an.
12. Bilder effizient encoden.
Wie wir bereits in diesem Beitrag erwähnt haben, haben Bilder einen erheblichen Einfluss auf die Leistung deiner Webseite. Eines der grundlegendsten Optimierungsverfahren, das du vielleicht in Betracht ziehen sollten, ist die Komprimierung, die dazu beitragen kann, die Dateigrößen zu reduzieren, damit sie schneller geladen werden. Dies ist auch die wichtigste Methode, um Googles Empfehlung zum effizienten encoding von Bildern zu befolgen:
Der Schlüssel ist das Erreichen der kleinstmöglichen Dateigrößen, ohne die Qualität der Bilder selbst zu beeinträchtigen. Plugins wie Imagify und Smush können bei dieser Aufgabe helfen. Du kannst mehr über sie in unserem Leitfaden zur Bildoptimierung erfahren.
Weitere Empfehlungen, die Einfluss darauf haben, ob du die Prüfung „Effiziente Bildkodierung“ bestehst oder nicht, sind
- Bilder in der richtigen Größe bereitstellen
- Implementierung von Lazy Loading (Verschieben von Offscreen-Bildern)
- Konvertieren von Bildern in Dateiformate der nächsten Generation, wie z.B. WebP
- Verwendung von Videoformaten für animierte Inhalte, wie z.B. GIFs
Zusätzlich zur Komprimierung deiner Bilder kannst du die Schritte zur Erfüllung dieser Vorschläge befolgen, wie an anderer Stelle in diesem Beitrag beschrieben.
13. Bild in Formaten der nächsten Generation bereitstellen.
Es gibt einige Bilddateiformate, die schneller geladen werden als andere. Leider handelt es sich dabei nicht um die üblicherweise verwendeten PNG- oder JPEG-Formate. WebP-Bilder werden zum neuen Standard, und Google PageSpeed wird dich informieren, wenn deine Bilder nicht dem Standard entsprechen:
Dies mag als eine schwer zu erfüllende Empfehlung erscheinen, da du wahrscheinlich bereits viele Bilder auf deiner WordPress-Seite hast. Glücklicherweise gibt es Plugins, die helfen können. Zum Beispiel bieten Imagify und Smush beide eine WebP-Konvertierungsfunktion.
14. Videoformate für animierte Inhalte verwenden
GIFs können eine effektive Form von visuellen Inhalten in einer Vielzahl von Situationen sein. Durchführungen von Tutorials, Feature-Rezensionen und sogar humorvolle Animationen können die Beiträge aufwerten und sie für die Leser angenehmer und wertvoller machen.
Leider haben diese Vorteile Nachteile für deine Leistung. GIFs sind anspruchsvoll zu laden, weshalb PageSpeed Insights empfiehlt, stattdessen Video-Inhalte anzubieten:
Leider ist die Konvertierung von GIFs in Videoformate nicht der einfachste Prozess. Zuerst muss man sich entscheiden, welche Art von Video man verwenden möchte:
- MP4: Produziert etwas größere Dateien, ist aber mit den meisten gängigen Browsern kompatibel.
- WebM: Das am höchsten optimierte Videoformat, obwohl es nur begrenzt mit den meisten Browsern kompatibel ist.
Wenn du die Wahl getroffen hast, die für deine Webseite am sinnvollsten ist, musst du die Dateiformate konvertieren. Dies geschieht am besten über die Befehlszeile. Installiere zunächst FFmpeg. Dies ist ein Open-Source-Tool zur Konvertierung von Dateiformaten:
Öffne dann die Befehlszeilenschnittstelle und führe den folgenden Befehl aus:
ffmpeg -i input.gif output.mp4Dadurch wird das GIF mit dem Dateinamen input.gif in ein MP4-Video mit dem Dateinamen output.mp4 konvertiert. Die Änderung des Formats ist jedoch nur der Anfang. Nun muss das resultierende Video auf deiner WordPress-Seite so eingebettet werden, dass es wie ein animiertes GIF aussieht.
Einbetten von Videoinhalten für Animationen
Wie du wahrscheinlich schon bemerkt hast, wenn du schon einmal ein GIF gesehen hast, unterscheiden sie sich leicht von normalen Videos. Sie werden normalerweise automatisch abgespielt und laufen in einer Schleife, und sie sind immer ohne Ton. Das Einbetten der neuen MP4- oder WebM-Datei in deine WordPress-Webseite führt nicht zu diesen Funktionen.
Du kannst sie jedoch mit einem sehr einfachen Code neu erstellen. Lade dein Video in deine Medienbibliothek hoch und füge dann das Folgende zu der Seite oder dem Beitrag hinzu, in die du dein GIF einbinden möchtest:
<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>
Dadurch werden die angegebenen Attribute auf dein Video angewendet, so dass es mehr „GIF-ähnlich“ erscheint. Passe einfach den Dateinamen und -typ an den deiner Ressource an. Für weitere Einzelheiten zu diesem Thema empfehlen wir dir, den Google-Leitfaden zur Konvertierung von GIFs in Videos zu lesen.
15. Sicherstellen, dass der Text während des Webfontladens sichtbar bleibt
Wie Bilder sind Schriften in der Regel große Dateien, die lange zum Laden benötigen. In einigen Fällen kann es vorkommen, dass Browser den Text ausblenden, bis die von dir verwendete Schriftart vollständig geladen ist, was zu dieser Empfehlung von Google PageSpeed Insights führt:
Google rät dazu, dieses Problem zu lösen, indem man die Font Display API Swap-Direktive in deinen @font-face-Stil anwendet. Greife dazu auf dein Stylesheet (style.css) zu und füge Folgendes nach dem src-Attribut unter @font-face hinzu:
font-display: swap
Mehr über die Optimierung von Web-Schriften kann man in unserem Beitrag „Wie man Schriftarten in WordPress ändert“ und unserem ausführlichen Leitfaden zum Hosting lokaler Schriften erfahren.
16. Textkomprimierung aktivieren
Die Empfehlung von Google PageSpeed Insights „Textkomprimierung aktivieren“ bezieht sich auf die Verwendung der GZIP-Komprimierung:
In einigen Fällen (wie du in der obigen Abbildung sehen kannst) wird die Textkompression auf deinem Server automatisch aktiviert. Wenn dies für deine Seite nicht der Fall ist, hast du einige Möglichkeiten, dieser Empfehlung zu folgen.
Die erste ist die Installation eines Plugins mit einer GZIP-Komprimierungsfunktion. WP Rocket ist eine praktikable Lösung, wenn du bereit bist, dafür zu bezahlen.
Du kannst deinen Text auch manuell komprimieren. Dazu musst du deine .htaccess-Datei editieren, was riskant sein kann, also stell sicher, dass du eine aktuelle Sicherungskopie zur Hand hast.
Die meisten WordPress-Seiten laufen auf Apache-Servern. Der Code zum Aktivieren der GZIP-Komprimierung sieht folgendermaßen aus:
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Du solltest sie nach #END in deiner .htaccess-Datei hinzufügen. Wenn du deine WordPress-Seite auf einem Nginx-Server hast, solltest du stattdessen den folgenden Code zu deiner nginx.conf-Datei hinzufügen:
36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;Wenn du die Textkomprimierung deiner Webseite überprüfen möchtest, empfehlen wir dir die Verwendung eines Tools wie GiftOfSpeed:
Auf diese Weise erfährt man, ob die GZIP-Komprimierung erfolgreich implementiert wurde, auf welchem Servertyp deine Webseite läuft und einige andere wichtige Details.
17. Vorabverbindung zu erforderlichen Quellen
Die Chancen sind hoch, dass du wahrscheinlich mindestens eine Drittpartei-Ressource auf deiner Webseite hast – Google Analytics ist ein gängiges Beispiel. Es kann einige Zeit dauern, bis die Browser eine Verbindung zu diesen Ressourcen herstellen, wodurch sich deine Ladegeschwindigkeit verlangsamt.
Durch die Verwendung von Preconnect-Attributen können die Browser sofort erkennen, dass sich auf deiner Seite Skripte von Drittanbietern befinden, die geladen werden müssen. Der Prozess der Anforderung dieser Skripte kann dann so schnell wie möglich eingeleitet werden, was die Leistung verbessert.
Wenn Google der Meinung ist, dass deine Seite von dieser Technik profitieren könnte, siehst du den Vorschlag Preconnect to required origins:
Es gibt einige Möglichkeiten, diese Optimierungsstrategie zu implementieren. Wenn du mit der Bearbeitung deiner WordPress-Theme-Dateien vertraut bist, kannst du einen Link-Tag zu deiner header.php-Datei hinzufügen. Hier ist ein Beispiel:
<link rel=“preconnect” href=“example.com”>In diesem Fall teilt das Tag den Browsern mit, dass sie so schnell wie möglich eine Verbindung zu example.com herstellen müssen. Google PageSpeed Insights listet alle relevanten Ressourcen auf, für die man Linktags mit Preconnect-Attributen hinzufügen sollte.
Die andere Möglichkeit ist die Verwendung eines Plugins, um den gleichen Effekt zu erzielen. Perfmatters enthält eine Preconnect-Funktion (Haftungsausschluss: Ich bin einer der Gründer von Perfmatters). WP Rocket und Pre* Party Resource Hints enthalten eine ähnliche Funktionalität.
18. Vorladen von Key Requests
Ähnlich wie bei der Empfehlung Preconnect to required origins hilft dir die Befolgung dieses Vorschlags, die Anzahl der Anfragen, die Browser an den Server deiner Webseite stellen müssen, zu minimieren. Anstatt sich mit Ressourcen von Drittanbietern zu verbinden, bezieht sich Preload key requests jedoch auf das Laden kritischer Assets auf deinem eigenen Server:
Auch die Umsetzung dieser Technik ist der vorherigen Empfehlung sehr ähnlich. Die Datei header.php kann mit Link-Tags versehen werden, die die in PageSpeed Insights aufgeführten Ressourcen angeben:
<link rel=“preload” href=“example.com”>Du kannst diesen Tag auch mit Hilfe von Perfmatters, WP Rocket oder Pre* Party Resource Hints einbauen.
19. Vermeide mehrere Seiten Weiterleitungen
Weiterleitungen werden verwendet, wenn eine URL auf eine andere zeigen soll. Sie werden häufig verwendet, wenn man eine Seite auf der Webseite verschiebt oder löscht. Es ist zwar nichts gegen die Verwendung von Weiterleitungen im Allgemeinen einzuwenden, aber sie führen zu zusätzlichen Verzögerungen bei der Ladezeit.
Wenn du zu viele Weiterleitungen auf deiner Webseite hast, wird dir diese Empfehlung möglicherweise in Google PageSpeed Insights angezeigt:
Das Einzige, was du als Antwort auf diese Empfehlung tun kannst, ist sicherzustellen, dass du nur dann Weiterleitungen verwendest, wenn es unbedingt notwendig ist. Mehr über den Prozess der Erstellung dieser Weiterleitungen erfährt man in unserem Beitrag „WordPress Weiterleitung – Bewährte Methoden für eine bessere Leistung„.
20. Statische Assets mit einer effizienten Cache-Regelung bereitstellen
Wenn du Google PageSpeed Insights schon eine Weile benutzt, kennst du diese Empfehlung vielleicht besser als die Warnung „Leverage browser caching„. In Version 5 ist sie jetzt als „Statische Assets mit einer effizienten Cache-Regelung bereitstellen“ gekennzeichnet:
Dieser Vorschlag hat einige Schichten, die wir durcharbeiten müssen. Die erste ist, was „Caching“ bedeutet. Kurz gesagt, es ist ein Prozess, bei dem die Browser Kopien deiner Seiten speichern, damit sie bei zukünftigen Besuchen schneller geladen werden können.
Die häufigste Art und Weise, wie WordPress-Seiten das Caching implementieren, sind Plugins. WP Rocket und W3 Total Cache sind beliebte Optionen. Einige Hosting-Provider – darunter auch wir hier bei Kinsta – ermöglichen jedoch das Caching über ihre Server. Prüfe unbedingt, ob dies bei deinem Host der Fall ist, bevor du ein Caching-Plugin installierst.
Sobald du das Caching für deine Webseite aktiviert hast, kannst du dich um den zweiten Teil dieser Empfehlung kümmern, nämlich um die „Effizienz“ deiner Cache-Regeln. Die Browser löschen ihre Caches regelmäßig, um sie mit aktualisierten Kopien zu aktualisieren.
Im Idealfall willst du, dass dieser Zeitraum eher höher als niedriger ist. Wenn du deine Webseite alle paar Stunden aus den Browser-Caches löscht, wird der Zweck dieser Technik von vornherein verfehlt. Du kannst deine Cache-Verfallszeit mit Cache-Control und Expires-Headern optimieren.
Cache-Control Header hinzufügen
Verwende den folgenden Code, um Cache-Control-Header in Nginx hinzuzufügen:
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}Du solltest dies in die Konfigurationsdatei deines Servers aufnehmen. Im obigen Beispiel sind die angegebenen Dateitypen so eingestellt, dass sie nach 30 Tagen ablaufen.
Diejenigen mit Apache-Servern sollten dieses Snippet stattdessen in ihren .htaccess-Dateien verwenden:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
Füge diesen Code vor #BEGIN WordPress oder nach #END WordPress ein. In diesem Beispiel ist die Cache-Verfallszeit auf 84.600 Sekunden festgelegt.
Expires Header hinzufügen
Cache-Control-Header sind jetzt so ziemlich der Standard. Es gibt jedoch einige Tools (einschließlich GTMetrix), die immer noch nach Expires-Headern suchen.
Du kannst expires-Header zu einem Nginx-Server hinzufügen, indem du Folgendes in deinen Serverblock einbaust:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Du solltest unterschiedliche Ablaufzeiten basierend auf den Dateitypen festlegen. Apache-Server werden die gleichen Ergebnisse erzielen, wenn du diesen Code zu deiner .htaccess-Datei hinzufügst:
## EXPIRES HEADER CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES HEADER CACHING ##Noch einmal: Du solltest diesen Code entweder vor #BEGIN WordPress oder nach #END WordPress hinzufügen.
Google Analytics effizient cachen
Ironischerweise hat das Google Analytics-Skript, das du möglicherweise in den Header deiner Seiten eingefügt hast, um das Nutzerverhalten zu verfolgen, eine Cache-Verfallszeit von nur zwei Stunden. Dies ist wahrscheinlich, damit die Nutzer bei Aktualisierungen der Plattform schnell auf die Änderungen zugreifen können.
Dieses Skript erscheint in der Liste der Ressourcen, die deine Aufmerksamkeit erfordern, unter Statische Assets mit einer effizienten Cache-Regelung-bedienen Empfehlung. Da es einer dritten Partei gehört, lässt sich die Ablauffrist nicht mit Cache-Control oder Expires-Header ändern.
Wenn dies das einzige Skript ist, das unter dieser Empfehlung aufgeführt ist, kannst du die Prüfung trotzdem bestehen:
Wie wir jedoch in diesem Beitrag festgestellt haben, ist dein PageSpeed-Ergebnis weniger wichtig als deine tatsächliche und wahrgenommene Leistung. Um diese Ressource effizient zu nutzen, wird empfohlen, Google Analytics lokal zu hosten.
Plugins wie Complete Analytics Optimization Suite (CAOS) und Perfmatters ermöglichen dies. Du kannst mehr über den Prozess in unserer vollständigen Anleitung zu diesem PageSpeed-Vorschlag lesen.
21. Reduzieren die Auswirkungen von Drittanbieter Code
Wir haben jetzt einige verschiedene Möglichkeiten erwähnt, wie sich Skripte von Drittanbietern negativ auf deine Leistung auswirken und zu fehlgeschlagenen Prüfungen von PageSpeed Insights führen können. Im Idealfall ist es am besten, die Abhängigkeit von diesen Tools zu begrenzen, um negative Auswirkungen zu verhindern.
In einigen Fällen ist es jedoch die beste Lösung für einen Bedarf deiner Webseite, ein Skript eines Drittanbieters einzubinden. Google Analytics ist ein hervorragendes Beispiel. Andere umfassen:
- Buttons und Feeds für Social Media
- YouTube-Video-Einbettungen
- iFrames für Anzeigen und andere Inhalte
- Bibliotheken für JavaScript, Schriftarten und andere Elemente
In Fällen, in denen du die Verwendung eines Skripts eines Drittanbieters für notwendig erachtest, ist es wichtig, die Auswirkungen auf die Leistung deiner Webseite trotzdem zu reduzieren, wie dir die Ergebnisse deiner PageSpeed-Analyse zeigen werden:
Um den Code von Drittanbietern effizienter zu laden, kannst du eine der Techniken in Betracht ziehen, die wir bereits in diesem Beitrag erwähnt haben:
- Das Laden von JavaScript aufschieben
- Verwende Link-Tags mit Preconnect-Attributen
- Skripte von Drittanbietern, die selbst gehostet werden (wie wir oben mit Google Analytics beschrieben haben)
Diese Methoden sollten die Auswirkungen auf die Leistung deiner Webseite minimieren.
22. Enorme Netzwerknutzlasten vermeiden
Diese Empfehlung ist besonders für deine mobilen Besucher relevant. Große Nutzlasten können die Verwendung von mehr Mobilfunkdaten erfordern, was deine Benutzer Geld kostet. Die Minimierung der Anzahl der Netzwerkanfragen, die erforderlich sind, um deine Seiten zu erreichen, kann dies verhindern:
Google empfiehlt, die Gesamtgröße der Bytes auf 1.600 KB oder weniger zu beschränken. Die am häufigsten verwendeten Methoden zur Erreichung dieses Ziels findest du in diesem Beitrag, einschließlich:
- Verschieben von CSS, JavaScript und Bildern, die sich above the fold befinden
- Code verkleinern
- Komprimieren von Bilddateien
- Verwendung des WebP-Formats für Bilder
- Caching implementieren
Befolge die entsprechenden Schritte für diese Strategien, und du solltest diese Prüfung ohne zusätzlichen Aufwand bestehen.
23. Benutzer-Timing-Markierungen und Messungen
Diese Empfehlung ist nur dann relevant, wenn du die User-Timing-API verwendest. Dieses Tool erstellt Zeitstempel, die dir helfen, die Leistung deines JavaScript zu bewerten. Wenn du die API für deine Webseite eingerichtet hast, siehst du deine Markierungen und Maße unter dieser Überschrift in PageSpeed Insights:
Wie man sehen kann, ist dies ein weiterer Vorschlag von Google, der nicht zu einem ‚pass‘ oder ‚fail‘ führt. PageSpeed Insights macht diese Informationen einfach abrufbar, so dass du sie zur Bewertung von Bereichen verwenden kannst, die möglicherweise optimiert werden müssen.
Wenn du daran interessiert bist, die User Timing API in deine WordPress-Seite zu integrieren, kannst du im Mozilla-Leitfaden zu diesem Thema mehr erfahren.
24. Vermeide eine übermäßige Größe des Dokumentobjektmodells (DOM)
Vereinfacht ausgedrückt, ist das DOM die Art und Weise, wie Browser HTML in Objekte verwandeln. Dabei wird eine Baumstruktur verwendet, die aus einzelnen Knoten besteht, die jeweils ein Objekt repräsentieren. Je größer das DOM deiner Seite ist, desto länger dauert es natürlich, bis es geladen wird.
Wenn deine Seite bestimmte Standards bezüglich der DOM-Größe überschreitet, empfiehlt es sich, die Anzahl der Knoten sowie die Komplexität deines CSS-Stylings zu reduzieren:
Ein häufiger Übeltäter, wenn du bei dieser Prüfung in PageSpeed Insights „durchgefallen“ bist, ist dein WordPress-Theme. Schwere Themes fügen oft große Mengen an Elementen zum DOM hinzu und können auch ein verschachteltes Styling beinhalten, das deine Webseite verlangsamt. Wenn dies der Fall ist, musst du möglicherweise das Theme wechseln.
Zusammenfassung
Google PageSpeed Insights sollte ein fester Bestandteil deines Webmaster-Werkzeugkastens sein. Allerdings ist die Fixierung auf deinen Punktestand und die Besessenheit, die begehrten 100/100 zu erreichen, wahrscheinlich nicht die beste Nutzung deiner Zeit. Es könnte dich von anderen wichtigen Aufgaben ablenken, die dir größere Vorteile bringen könnten.
In diesem Beitrag haben wir die Art und Weise behandelt, wie dein Google PageSpeed-Score funktioniert und wie nicht. Wir haben auch einige kurze Richtlinien für die Umsetzung der Empfehlungen der Plattform auf deiner WordPress-Seite vorgestellt, um deren Leistung zu verbessern.
Hast du Fragen zu Google PageSpeed Insights oder zur Optimierung der Leistung deiner Webseite? Frage im Abschnitt Kommentare unten nach!
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar