SEO-Leitfaden zur Verbesserung der Seitengeschwindigkeit und Ladezeiten

Die Seitengeschwindigkeit ist seit langem ein Rankingfaktor für Google. Beginnend mit der ersten Ankündigung im Jahr 2010, gefolgt von einem weiteren Update im Jahr 2018 und schließlich der Einführung von Core Web Vitals im Jahr 2020, ist es nun klar, dass die Ladezeit der Website für Suchmaschinen höchste Priorität hat. In diesem Artikel werden wir untersuchen, was Seitengeschwindigkeit heute bedeutet, wie man sie misst und vor allem, wie man die Seitengeschwindigkeitswerte für Ihre Website verbessern kann.

Die Core Web Vitals von Google verstehen

Lange Zeit hatte Google selbst Schwierigkeiten damit, die Seitengeschwindigkeit zu messen. Was sind die richtigen Metriken? Felddaten oder Labordaten? Die ganze Seite messen oder nur den oberen Teil? Es gibt Dutzende von Metriken, die bei der Seitengeschwindigkeit eine Rolle spielen, und es war ein langer Weg, um herauszufinden, welche davon wirklich wichtig für den Benutzer sind.

Schließlich konzentrierte sich Google auf einen Satz von drei Metriken, die als die wichtigsten für die Seitengeschwindigkeit gelten: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Zusammenfassend als Core Web Vitals bekannt, sollen diese Metriken die wahrgenommene Geschwindigkeit und nicht die tatsächliche Geschwindigkeit messen.

Largest Contentful Paint (LCP)

Der Largest Contentful Paint ist die Zeit, die benötigt wird, bis das größte Element innerhalb des Viewports vollständig geladen ist. Die Benchmarks für diese Metrik sind wie folgt:

• Gut: weniger als 2,5 Sekunden
• Verbesserungsbedürftig: 2,5 bis 4 Sekunden
• Schlecht: mehr als 4 Sekunden

Da es üblich ist, dass das größte Element ein Bild ist, ist die Bildoptimierung der wichtigste Beitrag zu dieser Metrik. Darüber hinaus hängt LCP von Server-Antwortzeiten, renderblockierendem Code und clientseitigem Rendering ab.

First Input Delay (FID)

Der First Input Delay ist die Verzögerung zwischen dem Zeitpunkt, an dem ein interaktives Element gezeichnet wird, und dem Zeitpunkt, an dem es funktionsfähig wird. Zum Beispiel wird ein Knopf auf der Seite gezeichnet, man klickt ihn an, aber er reagiert noch nicht. Die Benchmarks für diese Metrik sind wie folgt:

• Gut: weniger als 100 Millisekunden
• Verbesserungsbedürftig: 100 bis 300 Millisekunden
• Schlecht: mehr als 300 Millisekunden

FID kann durch Code-Splitting und die Verwendung von weniger JavaScript optimiert werden.

Cumulative Layout Shift (CLS)

Der Cumulative Layout Shift misst, ob sich Elemente auf der Seite während des Ladevorgangs verschieben. Zum Beispiel sieht eine Seite bereit zur Verwendung aus, aber dann erscheint ein neues Bild oben und der Rest des Inhalts wird nach unten verschoben: das ist ein Layout Shift. Die Benchmarks für diese Metrik sind wie folgt:

• Gut: weniger als 0,1
• Verbesserungsbedürftig: 0,1 bis 0,25
• Schlecht: mehr als 0,25

CLS hängt von korrekt eingestellten Elementabmessungen und dem Laden von Ressourcen in einer bestimmten Reihenfolge von oben nach unten ab.

Tools zur Messung der Seitengeschwindigkeit

Es gibt viele von Google bereitgestellte Tools, die die Core Web Vitals als Teil ihrer Seitenüberprüfung anbieten:

• Google PageSpeed Insights
• Google Search Console
• Chrome Lighthouse
• GTmetrix

Einige dieser Tools verwenden jedoch Labordaten anstelle von Felddaten, während Google Ihre Seiten ausschließlich basierend auf Felddaten bewertet. Darüber hinaus können die meisten Tools nur eine Seite gleichzeitig bewerten, was kein praktischer Ansatz zur Optimierung der gesamten Website ist.

Unter den Google-Tools ist die Google Search Console wahrscheinlich das beste. Dort können Sie unter Erfahrung > Core Web Vitals den Bericht für alle Ihre Seiten gleichzeitig sehen. Obwohl der Bericht auf hoher Ebene als Block bereitgestellt wird, kann es ein mühsamer Prozess sein, herauszufinden, welche Seiten von welchen Problemen betroffen sind.

Eine bessere Möglichkeit, die Seitengeschwindigkeit zu messen, könnte die Verwendung von WebSite Auditor sein. Dort können Sie unter Seitenstruktur > Seitenprüfung einen Bericht zur Seitengeschwindigkeit für die gesamte Website erhalten sowie alle betroffenen Seiten von einem einzigen Dashboard aus anzeigen. Oder Sie können zu Seitenprüfung > Seiten > Seitengeschwindigkeit wechseln und eine Liste von Seiten mit ihren Geschwindigkeitsproblemen anzeigen. Wenn Sie auf eine Seite klicken, erhalten Sie auch eine Liste der Seitenelemente, die optimiert werden können, um deren Leistung zu verbessern.

Seitengeschwindigkeit optimieren

Nun, da Sie eine Liste der betroffenen Seiten haben, ist es an der Zeit, an der Verbesserung Ihrer Seitengeschwindigkeit zu arbeiten. Im Folgenden sind einige der häufigsten Optimierungsmöglichkeiten und einige Ratschläge zur Nutzung aufgeführt.

Bildabmessungen festlegen

Wenn Sie die Bildabmessungen aus Ihrem Code weglassen, kann es einige Zeit dauern, bis der Browser sie korrekt skaliert. Dies bedeutet, dass der Inhalt Ihrer Seite springt und Ihren CLS-Score negativ beeinflusst.

Um dieses Problem zu vermeiden, stellen Sie immer die Eigenschaften Breite und Höhe für Ihre Bilder ein, wie folgt:

<img src="kissen.jpg" width="640" Height="360" alt="lila Kissen mit Blumenmuster" />

Moderne Bildformate verwenden

Nicht alle Bildformate sind gleich. Unsere vertrauten JPEG- und PNG-Formate haben jetzt schlechtere Komprimierungs- und Qualitätseigenschaften als AVIF, JPEG 2000, JPEG XR und WebP.

Unter den aufgelisteten Formaten ist WebP wahrscheinlich dasjenige, das zuerst in Betracht gezogen werden sollte. Es unterstützt sowohl verlustfreie als auch verlustbehaftete Kompression sowie Transparenz und Animation. Darüber hinaus sind WebP-Dateien in der Regel 25% bis 35% leichter als PNG und JPEG gleicher Qualität. Und obwohl es in der Vergangenheit eine häufige Besorgnis war, dass das WebP-Format von einigen Browsern nicht unterstützt wurde, hat Safari kürzlich in Version 14 Unterstützung für WebP hinzugefügt, sodass die Gesamtunterstützung für das Format unter den Browsern jetzt über 90% liegt.

Bilder komprimieren

Unabhängig davon, ob Sie Bildformate der nächsten Generation verwenden oder nicht, ist das Komprimieren Ihrer Bilder immer noch eine gute Möglichkeit, die Gesamtgröße der Seite zu reduzieren. Wenn Ihre Website auf WordPress basiert, können Sie Ihre Bilder mit Bildoptimierungs-Plugins wie WP Smush in großen Mengen komprimieren. Sie können auch Online-Kompressoren verwenden, wenn Sie nicht zu viele Plugins installieren und riskieren möchten, Ihre Website zu verlangsamen. Als letzten Ausweg verwenden Sie Grafikeditoren, um Bilder vor dem Hochladen auf Ihre Website zu komprimieren.

Lazy Loading für Bilder implementieren

Bilder außerhalb des Bildschirms sind solche, die unterhalb des Falzes erscheinen, was bedeutet, dass der Benutzer sie erst sehen würde, wenn er über den anfänglichen Bildschirm hinaus scrollt. Und dies wird ein wiederkehrendes Thema für den Rest des Artikels sein: Alles, was sich unterhalb des Falzes befindet, sollte erst geladen werden, wenn die Elemente über dem Falz vollständig geladen sind. Der Bereich über dem Falz ist der, den Google verwendet, um die Geschwindigkeit Ihrer Seite zu messen, daher sollte hier der größte Optimierungsaufwand konzentriert werden.

Die Technik zur Handhabung von Bildern außerhalb des Bildschirms wird als Lazy Loading bezeichnet. Im Grunde werden die Bilder über dem Falz zuerst geladen, und die Bilder außerhalb des Bildschirms werden erst geladen, wenn der Benutzer auf der Seite nach unten scrollt.

GIFs in Videos konvertieren

Es mag kontraintuitiv erscheinen, aber GIFs haben oft eine größere Dateigröße als Videos. Ich weiß nicht, wie es dazu kam, aber das Konvertieren eines großen GIFs in ein Video führt zu einer Größenreduzierung von bis zu 500% oder sogar mehr. Wenn Ihr Seitengeschwindigkeitsbericht Ihnen also sagt, dass Sie Videoformate für animierte Inhalte verwenden sollen, sollten Sie dies ernst nehmen.

Um GIFs in Videos zu konvertieren, können Sie jeden Online-Konverter verwenden oder ein Tool wie FFmpeg herunterladen. Google empfiehlt tatsächlich, zwei Videoformate zu erstellen: WebM und mp4. WebM ähnelt WebP darin, dass es leichter ist, aber noch nicht von allen Browsern unterstützt wird. Wenn Sie also Ihr Video zur Seite hinzufügen, sollten Sie zuerst die WebM-Version und dann die mp4-Version als Backup auflisten.

<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>

Beachten Sie, dass das Videoelement auch vier zusätzliche Attribute hat: autoplay, loop, muted und playsinline. Diese Attribute sorgen dafür, dass sich Ihr Video wie ein GIF verhält: Es wird automatisch abgespielt, wiederholt sich, ist stummgeschaltet und wird inline abgespielt.

Ungenutztes CSS entfernen

Ungenutztes CSS kann den Aufbau des Renderbaums durch den Browser verlangsamen. Der Browser muss den gesamten DOM-Baum durchlaufen und prüfen, welche CSS-Regeln für jeden Knoten gelten. Je mehr ungenutztes CSS vorhanden ist, desto länger dauert es, bis ein Browser die Stile für jeden Knoten berechnet hat.

Das Ziel hier ist es, ungenutzte oder nicht kritische CSS-Teile zu identifizieren und sie entweder vollständig zu entfernen oder die Reihenfolge, in der sie geladen werden, zu ändern. Konsultieren Sie diesen Leitfaden zum Aufschieben von ungenutztem CSS.

CSS-, JS- und HTML-Code minimieren

JS- und CSS-Dateien können oft Kommentare, Leerzeichen, Zeilenumbrüche und unnötige Codefragmente enthalten. Das Entfernen dieser kann Ihre Dateien bis zu 50% leichter machen, auch wenn der Durchschnitt der Minifizierung viel niedriger ist. Es ist jedoch ein marginaler Beitrag zur Geschwindigkeit Ihrer Seite und einen Versuch wert.

Wenn Sie eine kleine Website haben, können Sie den Code mit Online-Minifizierern wie CSS Minifier, JavaScript Minifier und HTML Compressor minimieren. Oder, wenn Ihre Website auf einer CMS-Plattform wie WordPress aufgebaut ist, gibt es sicherlich einige Plugins, die die Arbeit für Sie erledigen können. Für eine benutzerdefinierte Website konsultieren Sie diesen Leitfaden zur CSS-Minifizierung und diesen zur JS-Minifizierung.

Kritisches CSS extrahieren

Standardmäßig ist CSS eine renderblockierende Ressource. Ihre Seite wird erst gerendert, wenn der Browser die CSS-Dateien abgerufen und analysiert hat, was viel Zeit in Anspruch nehmen kann.

Um dies zu beheben, können Sie nur die Stile extrahieren, die für den Above-the-Fold-Bereich Ihrer Seite benötigt werden, und diese zum -Element Ihres HTML-Dokuments hinzufügen. Der Rest Ihrer CSS-Dateien kann asynchron geladen werden. Dies wird Ihre LCP-Scores erheblich verbessern und Ihre Seiten für Benutzer schneller machen.

Server-Antwortzeiten optimieren

Das Unangenehmste an Verzögerungen bei der Serverantwort ist, dass es eine Vielzahl von Gründen gibt, die diese verursachen können. Zum Beispiel kann es sich um langsame Weiterleitungen, langsame Anwendungslogik, CPU-Ressourcenmangel, langsame Datenbankabfragen, Speichermangel, langsame Frameworks usw. handeln.

Eine einfache nicht-technische Lösung für diese Probleme ist der Wechsel zu besserem Hosting, was in vielen Fällen bedeutet, von gemeinsamem Hosting zu verwaltetem Hosting zu wechseln. Verwaltetes Hosting umfasst in der Regel CDN-Netzwerke und andere Tricks zur Inhaltsverteilung, die einen positiven Einfluss auf die Seitengeschwindigkeit haben werden. Aber wenn Sie sich die Hände schmutzig machen wollen, finden Sie hier einen detaillierten Leitfaden zur Behebung eines überlasteten Servers.

Für diejenigen, die eine schnelle Verbesserung ohne tiefgreifende technische Details suchen, kann der Wechsel zu einem hochwertigen Hosting-Anbieter einen erheblichen Unterschied machen. SiteGround zum Beispiel bietet schnelles und sicheres Hosting, das speziell für kleine bis mittlere Websites und Unternehmen entwickelt wurde. Ihre Dienstleistungen umfassen ein kostenloses CDN, erweiterten Cache und eine optimierte PHP-Implementierung, die alle zu schnelleren Ladezeiten und einer insgesamt reaktionsschnelleren Website beitragen.

Drittanbieter-Ressourcen effizient verwalten

Drittanbieter-Ressourcen, wie z.B. Social-Sharing-Buttons und Video-Player-Embeds, neigen dazu, viele Ressourcen zu verbrauchen. Außerdem unterbricht der Browser jedes Mal, wenn er einen JS-Codeblock findet, die Ausführung des HTML, bis er diesen verarbeitet hat. All dies trägt zu einem messbaren Rückgang der Seitengeschwindigkeit bei.

Wenn eine Ihrer Drittanbieter-Ressourcen nicht wesentlich ist, d.h. sie nicht für das Aussehen oder die Funktion des Above-the-Fold-Bereichs zählt, sollten Sie sie aus dem kritischen Rendering-Pfad entfernen. Um Drittanbieter-Ressourcen effizienter zu laden, können Sie das Attribut async oder defer verwenden. Das Attribut async ist milder: Es ermöglicht das gleichzeitige Herunterladen von HTML und JS, unterbricht aber weiterhin das HTML, um JS auszuführen. Das Attribut defer ist strenger: Es unterbricht das HTML nicht, um JS auszuführen, das erst am Ende ausgeführt wird.

Pre-Connect für Verbindungen nutzen

Der Aufbau von Verbindungen, insbesondere sicheren, nimmt viel Zeit in Anspruch. Es erfordert DNS-Lookups, SSL-Handshakes, den Austausch von Geheimsätzen und einige RTT (Round Trip Times) zum Endserver, der für die Benutzeranfrage verantwortlich ist. Um diese wertvolle Zeit zu sparen, können Sie Ihre Website im Voraus mit den erforderlichen Ursprüngen verbinden.

Um Ihre Website mit einer Drittanbieterquelle zu verbinden, müssen Sie lediglich ein Link-Tag zu Ihrer Seite hinzufügen.

<link rel="preconnect" href="https://beispiel.com">

Lang dauernde JavaScript-Aufgaben identifizieren und optimieren

Immer wenn ein JavaScript-Block mehr als 50 ms zur Ausführung benötigt, kann Ihre Seite für den Benutzer nicht reagieren. Um dies zu beheben, ist es ratsam, diese langen Aufgaben zu identifizieren, sie in kleinere Segmente aufzuteilen und sie asynchron laden zu lassen. Auf diese Weise gibt es kurze Reaktionsfenster, die in den Ladevorgang Ihrer Seite integriert sind. Sie können Chrome DevTools verwenden, um übermäßig lange Aufgaben zu identifizieren – diese sind mit roten Markierungen versehen:

Sobald Sie lange Aufgaben auf Ihren Seiten identifiziert haben, können Sie sie in kleinere Aufgaben aufteilen, ihre Ausführung verzögern oder sie sogar über einen Web Worker vom Hauptthread verschieben.

Kritische Ressourcen vorladen

Es liegt an den Browsern zu entscheiden, welche Ressourcen zuerst geladen werden sollen. Daher versuchen sie oft, die wichtigsten Ressourcen wie CSS vor Skripten und Bildern zu laden, zum Beispiel. Leider ist dies nicht immer der beste Weg. Durch das Vorladen von Ressourcen können Sie die Ladepriorität von Inhalten in modernen Browsern ändern, indem Sie sie darüber informieren, welche Ressourcen als Teil des Codes benötigt werden, der für das Rendering des Above-the-Fold-Inhalts verantwortlich ist.

Mit Hilfe des <link rel="preload">-Tags können Sie dem Browser mitteilen, dass eine Ressource als Teil des Codes benötigt wird, der für das Rendering des Above-the-Fold-Inhalts verantwortlich ist, und ihn so früh wie möglich abrufen lassen. Hier ist ein Beispiel, wie das Tag verwendet werden kann.

<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Beachten Sie, dass die Ressource mit der gleichen Priorität geladen wird. Der Unterschied besteht darin, dass der Download früher beginnt, da der Browser den Preload im Voraus kennt. Für detailliertere Anweisungen, lesen Sie diesen Leitfaden zum Vorladen kritischer Ressourcen.

Browser-Cache implementieren

Ohne Browser-Cache wird jedes Mal, wenn Sie dieselbe Seite besuchen, die gesamte Seite neu geladen. Mit dem Browser-Cache werden einige Elemente der Seite im Speicher des Browsers gespeichert, sodass nur ein Teil der Seite vom Server geladen werden muss. Natürlich lädt die Seite bei späteren Besuchen viel schneller, und Ihre Seitengeschwindigkeitswerte steigen.

Normalerweise ist das Ziel, so viele Seitenressourcen wie möglich so lange wie möglich zu cachen und sicherzustellen, dass aktualisierte Ressourcen zur Zwischenspeicherung revalidiert werden. Tatsächlich können Sie all diese Parameter mit speziellen HTTP-Headern steuern, die Anweisungen für den Cache enthalten. Ein guter Ausgangspunkt, um mehr über HTTP-Cache zu erfahren, ist dieser Google-Leitfaden.

DOM-Struktur optimieren

Ein zu großer DOM-Baum mit komplizierten Stilregeln kann die Geschwindigkeit, Laufzeit und Speicherleistung negativ beeinflussen. Die beste Praxis ist ein DOM-Baum mit weniger als 1500 Knoten insgesamt, einer maximalen Tiefe von 32 Knoten und keinen Elternknoten mit mehr als 60 Kindknoten.

Eine sehr gute Praxis ist es, DOM-Knoten zu entfernen, die Sie nicht mehr benötigen. Erwägen Sie dazu, Knoten zu entfernen, die derzeit nicht im geladenen Dokument angezeigt werden, und versuchen Sie, sie erst zu erstellen, nachdem ein Benutzer auf einer Seite nach unten scrollt oder eine Schaltfläche drückt.

Unnötige Weiterleitungen eliminieren

Das Entfernen aller unnötigen Weiterleitungen ist eines der besten Dinge, die Sie für die Geschwindigkeit Ihrer Website tun können. Jede zusätzliche Weiterleitung verlangsamt das Rendering der Seite und fügt einen oder mehrere HTTP-Anfrage-Antwort-Roundtrips hinzu.

Die beste Praxis ist es, überhaupt keine Weiterleitungen zu verwenden. Wenn Sie sie jedoch unbedingt benötigen, ist es entscheidend, den richtigen Weiterleitungstyp zu wählen. Es ist am besten, eine 301-Weiterleitung für permanente Weiterleitungen zu verwenden. Wenn Sie jedoch beispielsweise Benutzer auf kurzfristige Aktionsseiten oder gerätespezifische URLs umleiten möchten, sind temporäre 302-Weiterleitungen die beste Option.

Diese aufgeführten Probleme sind nicht alle Probleme, die die Seitengeschwindigkeit beeinflussen können, sondern eher die häufigsten und diejenigen mit dem größten Verbesserungspotenzial. Stellen Sie sicher, dass Sie Ihre Optimierungsstrategien an die Probleme anpassen, die in Ihrem Seitengeschwindigkeitsbericht aufgeführt sind. Beachten Sie, dass Probleme, die auf vielen Seiten Ihrer Website auftreten, oft durch websiteweite Änderungen umfassend gelöst werden können.