Leitfaden: Seitenladegeschwindigkeit optimieren

Wenn es um die Geschwindigkeit einer Webseite geht, zählt jede Sekunde. In diesem Beitrag geben wir Ihnen einen vollständigen Leitfaden zur Webseitengeschwindigkeit zur Hand – von der Messung der Geschwindigkeit bis hin zu Tipps, wie sie verbessert werden kann.

Zum Inhalt:

1. Warum technisches SEO und Seitenladegeschwindigkeit wichtig sind
2. Erster Schritt: Überprüfen Sie Ihre Webseitengeschwindigkeit
   1. PageSpeed Insights von Google erklärt
3. Wie Sie die Seitenladezeit beschleunigen können
   1. Nichttechnische Dinge, die Sie tun können, um die Webseitengeschwindigkeit zu verbessern (Dateigrößen, Bilder, Schriftarten usw.)
   2. Technische Dinge, die Sie tun können, um die Webseitengeschwindigkeit zu verbessern (Verkleinerung, JavaScript-Dateien usw.)
4. Andere Faktoren der Seitenladegeschwindigkeit

PageSpeed Insights von Google ist ein Werkzeug, das vor allem mit Blick auf erfahrene Entwickler eingeführt wurde. Abgesehen von der Geschwindigkeitsbewertung, die berechnet wird, ist die Analyse der Ursachen möglicherweise schwieriger zu verstehen.

Lassen Sie uns das Ganze ein wenig aufschlüsseln und den Sinn der wichtigsten Teile herausarbeiten.

Zunächst einmal prüft das Werkzeug die Web-Performance in 2 verschiedenen Registerkarten, eine mobile Geräte und eine für den Desktop. Ihre Ergebnisse auf einer dieser Registerkarten, können sich von den Ergebnissen auf der anderen sehr unterscheiden. Aber die Bewertungsskala ist die gleiche.

Auf der Grundlage von 6 verschiedenen Kriterien, generiert es eine Punktzahl von 0 bis 100 für die Geschwindigkeit der Webseite. Ergebnisse zwischen 0-49 liegen im "roten" Bereich. 50-89 ist ein Durchschnittsergebnis. 90-100 liegt im "grünen" Bereich, was der Webseite eine perfekte Bewertung in Bezug auf die Ladegeschwindigkeit der Seite gibt.

Bitte beachten Sie, dass verschiedene Seiten auf derselben Webseite sehr unterschiedliche Punktzahlen haben können. Außerdem kann selbst eine identische Seite im Laufe eines Tages sehr unterschiedlich bewertet werden, was auf mehrere Faktoren zurückzuführen ist, die Sie möglicherweise nicht vollständig kontrollieren können.

Über die Bewertung hinaus, gibt es unten einige weitere detailliertere Informationen zu diesem Themenkomplex.

Felddaten: Dieser Abschnitt enthält einige wichtige Metriken, die genau aufschlüsseln, wie viel Zeit es für das Laden der ersten sowie die größten Elemente eines Shops braucht. Er misst auch die Reaktionszeit des Browsers und die Fähigkeit zur Interaktion. Dies wird auf der Grundlage der durchschnittlichen Ladezeiten Ihrer Webseite innerhalb der letzten 28 Tage errechnet.

Darunter verfügt der Abschnitt Lab Data über einige ähnliche Metriken. Diese basieren jedoch auf Testbesuchen, die vor Ort durchgeführt wurden, nachdem Sie die URL zum Testen eingereicht haben. Wenn sich die Geschwindigkeit Ihrer Webseite in letzter Zeit verbessert hat, dann können Sie erwarten, dass die Ergebnisse unter "Labordaten" besser sind als jene im Bereich "Felddaten". Bei allen Metriken in diesem Abschnitt sollten Sie sich bemühen, in den grünen Bereichen oder zumindest in deren Nähe zu bleiben.

Die wahrscheinlich wichtigsten (und am einfachsten zu verstehenden) Metriken sind der "FCP" und die Zeit bis zur Interaktion.

First Contentful Paint (FCP) ist die Zeit, die vergeht, bis Ihre Seite irgendeinen Inhalt (Text, Bild oder jedes andere Element, das der Benutzer ansehen kann) geladen hat. Wenn dies unter 3 Sekunden liegt, sollte es in Ordnung sein. Die besten Seiten haben einen FCP von unter einer Sekunde.

Die Zeit bis zur Interaktivität ist die Zeit von dem Moment an, in dem die Seite zu laden beginnt, bis der Benutzer mit ihr interagieren kann. Bestenfalls liegt auch dieser Wert unter 3 Sekunden.

Wenn diese Metriken nicht gut aussehen, dann sollten Sie weiter nach unten scrollen, um zu sehen, warum. Es gibt einen Abschnitt Diagnose und darunter einen Abschnitt bestandene Audits. Der erste Abschnitt hebt Maßnahmen hervor, die Ihre Leistung verbessern könnten. Suchen Sie nach denjenigen mit einem roten Dreieck.

Einige davon sind eher technischer Natur.
Einige Beispiele:

• Eliminieren Sie Render-Blockier-Ressourcen - dies bedeutet im Grunde genommen, dass Prozesse vor Ihrem FCP geladen werden. Dazu könnten Anwendungen oder Plugins gehören, die JavaScript verwenden. Der Browser versucht, diese Prozesse zu laden, bevor der eigentliche Inhalt angezeigt wird. Dies kann die Webseite stark verlangsamen. Lesen Sie weiter unten, um zu erfahren, was Sie dagegen tun können.
• Minify CSS oder Minify JavaScript - die Art und Weise, wie Ihre Webseite aussieht und sich verhält, wird von diesen Dateien diktiert. In den CSS-Dateien werden Details wie Schriftgrößen, Farben, Positionierung usw. festgelegt. CSS- und JS-Dateien sehen wie Textdateien mit wenigen Zeichen pro Zeile aus. Dadurch bleiben in diesen Dateien viele Leerzeichen übrig. Leerzeichen führen zu größeren Dateien, die länger zum Laden brauchen. Ob Sie es glauben oder nicht, Sie könnten einen sehr kleinen Geschwindigkeitsschub erhalten, wenn Sie diese Leerzeichen einfach löschen. Das ist es, was "minify" bedeutet. Im nächsten Abschnitt werden wir Ihnen erklären, wie Sie das machen können.
• Minimieren Sie die Nutzung durch Dritte - manchmal kann es vorkommen, dass Ihre Vorlage, oder die von Ihnen installierten Anwendungen oder Plugins, externe Ressourcen laden. Es kann Anbieter von Diensten geben, für die Sie ein Skript in den Header Ihrer Webseite gesetzt haben (Analysetools sind keine Ausnahme). Versuchen Sie, die Anzahl der Drittanbieter auf diejenigen zu beschränken, die Sie unbedingt benötigen. Andernfalls kann die Geschwindigkeit der Webseite beeinträchtigt werden.

Andere Probleme, die sich auf die Seitengeschwindigkeit auswirken, sind weniger technischer Natur und jeder Webseitenbesitzer, unabhängig von seinen Fähigkeiten, kann sie leicht verbessern. Diese behandeln wir als nächstes.

3.1 Nichttechnische Dinge, die Sie tun können, um die Geschwindigkeit der Webseite zu verbessern (Dateigrößen, Bilder, Schriftarten usw.)

Dies sind die Dinge, die Sie angehen können, unabhängig von der Art Ihrer Webseite und unabhängig von Ihren technischen Fähigkeiten.

3.1.1 Reduzieren Sie die Größe Ihrer Bilder: je größer die Webseite, desto mehr Zeit benötigt sie zum Laden. Ein großer Teil davon hat mit Bildern zu tun. Halten Sie die Bildgrößen so klein wie möglich. Kleinere Bilder werden schneller geladen. Auch wenn Sie in einigen Fällen größere Bilder benötigen, sollten Sie nicht wertvolle Kilobyte und Sekunden durch unnötig große Bilder verschwenden. In diesem Beispiel wird dieses Bild auf unserer Webseite in einer maximalen Breite von 400-500 Pixel angezeigt, auch auf breiteren Bildschirmen. Das ist einfach der Platz, den wir dafür in unserem Design haben.

Somit benötigen Sie kein Bild, das nativ 1200 Pixel breit ist, das größer und langsamer zu laden ist und vom Browser bei jedem Laden der Seite in der Größe angepasst werden muss. Ein Bild mit einer Breite, die halb so groß ist, würde in dieser Situation genau gleich aussehen. Bei den meisten Bildern können Sie also die Größe verringern und gewinnen dadurch zusätzliche Geschwindigkeit. Seien Sie jedoch vorsichtig bei Coverbildern und größeren Bildern in Ihrem Entwurf. Ändern Sie die Größe nicht, wenn sie größer angezeigt werden. Dadurch wird die Qualität beeinträchtigt.

3.1.2 Verwenden Sie neue Bildformate, die effizienter sind: ".webp" ist ein Beispiel für ein Bilddateiformat, das speziell entwickelt wurde, um auf Webseiten die gleiche Bildqualität bei geringerer Dateigröße zu erhalten. Versuchen Sie, Ihre Bilder in dieses Format zu konvertieren und gewinnen Sie zusätzliche Ladegeschwindigkeit.

3.1.3 Begrenzen Sie die Anzahl der Schriftarten, die Sie auf einer Seite verwenden: Jede Schriftart lädt eine externe Ressource, was die Webseite verlangsamt. Wenn Sie weniger Schriftarten verwenden, wird die Seite auch optisch kohärenter. Im Vergleich dazu spart dies jedoch weniger Ladezeit als andere Maßnahmen.

3.1.4 Verwenden Sie Videos und Spezialeffekte oder Animationen nur unterhalb des Seitenumbruchs: oberhalb des Seitenumbruchs befindet sich der erste Abschnitt der Seite, den Ihre Besucher sehen. Es ist auch der erste Abschnitt, der geladen wird, also sollten Sie ihn sauber halten. Wenn Sie ein großes Video ganz oben auf der Seite anzeigen, führt dies zu langsameren Ladezeiten und weniger Zufriedenheit der Benutzer. Wenn es sich jedoch weiter unten befindet, hat es Zeit zu laden, wenn die Benutzer anfangen zu scrollen, und die allgemeine Geschwindigkeitsbewertung wird dadurch nicht beeinträchtigt.

3.1.5 Inhalts Caching: Caching ist ein Prozess, der Datenspeicherschichten mit hoher Geschwindigkeit verwendet, um schneller auf den Inhalt einer Seite zugreifen zu können. Der Inhalt Ihrer Webseite kann als statischer Inhalt in einem Cache gespeichert werden. Dies bedeutet auch, dass die Benutzer je nach Einstellung des Caches, die im Cache gespeicherte Version Ihrer Seite sehen können, anstatt der Live-Version. Wenn Sie häufig Aktualisierungen und Änderungen an einer Seite vornehmen, ist eine übermäßige Nutzung des Caches riskant, da Besucher möglicherweise eine veraltete Version der Seite sehen, die aus dem Cache geladen wurde. Aber besonders für Seiten, die sich nicht allzu oft ändern, ist der Cache ein großer Geschwindigkeitsgewinn. Der im Cache gespeicherte Inhalt bleibt nicht auf immer derselbe. Er kann in jedem Fall in vorgegebenen Zeiträumen zurückgesetzt oder aktualisiert werden.

Je nach Art der Plattform, auf der Ihre Webseite aufgebaut ist, ist das Caching nicht schwierig durchzuführen.

Wie man eine Wix-Webseite zwischenspeichert:

So aktivieren Sie das Caching:

1. Gehen Sie zu Ihrem Editor.
2. Klicken Sie auf Menüs & Seiten.
3. Fahren Sie mit der Maus über die Seite, die Sie zwischenspeichern möchten, und klicken Sie auf das Symbol Mehr anzeigen.
4. Klicken Sie auf Einstellungen.
5. Klicken Sie auf Erweiterte Einstellungen.
6. Gehen Sie zu "Caching für diese Seite manuell steuern" und ändern Sie den Schalter, um es zu aktivieren.
7. Sie sollten jetzt folgendes sehen: Aktiviert - die Seite wird im Cache gespeichert.
8. Anschließend können Sie auswählen, wie oft Sie den Cache für die Seite zurücksetzen möchten: jede Stunde, alle 24 Stunden usw.

Wie man eine WordPress-Webseite zwischenspeichert:

Gehen Sie zum Abschnitt Plugins in Ihrem Dashboard und suchen Sie nach einem Cache-Plugin wie z.B. WP Fastest Cache. Installieren Sie es und wechseln Sie dann zu den Einstellungen. Stellen Sie im Fenster sicher, dass Cache aktiviert ist.

Sie erhalten auch weitere Optionen, um Ihre Webseite mit demselben Plugin zu beschleunigen, wie z.B. Dateiverkleinerung und die Möglichkeit, CSS-, sowie JavaScript-Dateien zu kombinieren. Wir besprechen diese im nächsten Abschnitt.

Wenn Sie eine andere Art von Webseite haben, gibt es in der Regel Anwendungen und Plugins, die Ihnen dabei helfen. Für fortgeschrittene Benutzer und Entwickler gibt es Open-Source-Caching-Werkzeuge, die online verfügbar sind.

3.1.6 Halten Sie Ihre Webseite im Allgemeinen sauber: Bewahren Sie keine unnötigen Dateien, Elemente oder Anwendungen  auf, wenn Sie diese nicht aktiv nutzen. Halten Sie die Dinge einfach und verkomplizieren Sie die Struktur Ihrer Webseite nicht zu sehr, damit sie schneller geladen wird.