Seitenladegeschwindigkeit: So einfach verwandelst du deine Site in eine echte Pagespeed-Rakete
Seitenladegeschwindigkeit – einfach erklärt
Fragst du dich, warum du überhaupt deine kostbare Zeit in das Thema Seitenladegeschwindigkeit investieren solltest? Ganz einfach: Zeit ist Geld – und lange Ladezeiten kosten dich in zweierlei Hinsicht ein beträchtliches Sümmchen.
Erstens nervt es deine User:innen schlicht, wenn deine Seite langsam ist – versetzt dich selbst in ihre Lage, wer will schon gerne warten und Däumchen drehen, bis eine Website lädt? Richtig, niemand. Die Absprungrate – und damit die Anzahl verlorener potenzieller Conversions, also von dir beabsichtigten Handlungen wie Käufe oder Anfragen,– wird massiv durch die Ladezeit beeinflusst.
Kleines Rechenbeispiel:
32 % Absprungrate bei Erhöhung der Seitenladezeit von 1 auf 3 Sekunden.
106 % Absprungrate bei Erhöhung der Seitenladezeit von 1 auf 6 Sekunden.
Zweitens: Google ist ebenso ein großer Fan von Geschwindigkeit, ein richtiger Speed-Junkie sozusagen. Weil Google Sitespeed unter anderen als Signal für die Nutzerfreundlichkeit einer Seite bewertet – und am liebsten möchte Google dir in den Suchergebnissen nur extrem nutzerfreundliche Seiten ausliefern –, werden schnelle Sites mit Sichtbarkeit belohnt, langsame abgestraft.
Überzeugt? Gut, dann lass und gemeinsam loslegen, um deine Seitenladezeit zu optimieren und dich in die Spitzenliga der Page-Speed zu befördern.
Her mit der Geschwindigkeit – so optimierst du deine Seitenladezeit in wenigen Schritten
Lass uns das Thema ganzheitlich angehen. Um das Beste aus deiner Page-Speed herauszuholen, solltest du vorab definieren, was deine Website alles können soll. Nur so hältst du sie schlank – und damit schnell.
Erste Hausaufgabe ist nun also: Seite durchgehen, Anforderungen definieren. Erledigt? Dann können wir loslegen, um deine Seite Schritt für Schritt im wahrsten Sinn des Wortes „flott“ zu machen.
But first: Wie schnell ist deine Seite eigentlich? Teste mit diesem Google-Tool deinen Pageload-Speed
Natürlich solltest du erst einmal wissen, wo du in Sachen Ladegeschwindigkeit stehst. Die Stoppuhr musst du hierfür nicht aus dem Schrank holen, denn dafür hat Google ein entsprechendes Tool entworfen.
Hier geht es zum Google PageSpeed Insight-Check.
Dieses Tool sollte dich bei deiner gesamten Optimierung begleiten, denn es zeigt dir die Problemstellen fürs Debugging auf.
Tipp: Gehe stets Schritt für Schritt vor und analysiere jeweils anhand des Tools, welche Optimierung die Seitenladegeschwindigkeit deiner Seite wie stark beeinflusst. So behältst du den Überblick und kannst die einzelnen Stepps einordnen.
Lernen am Beispiel: So wendest du den Google Pagespeed-Insight-Check clever an
Wir haben’s getan: In weniger als 20 Minuten hat Andy sich seine eigene WordPress-Seite vorgeknöpft und diese in Hinblick auf die Seitenladezeit optimiert. Sieh selbst, wie er es geschafft hat, durch clevere Webserver-Einstellungen, einem Pagespeed-Plugin sowie einer sauberen Analyse der Pagespeed-Insights unsere Website von schlechten Werten (mobil 35 | 76 Desktop) auf Top Werte zu trimmen (mobil 97 | 100 Desktop).
Mit diesen 5 Faktoren verleihst du deiner Seitenladezeit Flügel
Es klingt nicht nur verführerisch einfach, sondern ist es auch: In nahezu allen gängigen Content-Managementsystemen wie Joomla, WordPress, Drupal oder Typo3 lassen sich Plugins, also Erweiterungen, installieren, die deine Seitenladegeschwindigkeit optimieren. Beispielsweise cachen sie das Logo, Theme-Elemente oder Bildelemente in Zwischenspeichern, sodass diese nicht immer wieder neu geladen werden müssen oder komprimieren Inhalte wie Stylesheet- oder JavaScript-Dateien. Am besten wählst du deine Plugins so aus, dass sie zu deinem Theme passen – dann steht dem Geschwindigkeitsrausch nichts mehr im Wege.
Tipp: Für WordPress nutzen wir die Plugins „Autopimize“ und „WP Super Cache„, um die Page-Speed zu pushen.
Autsch. Den eigenen Seiten-Inhalt zu überprüfen, kann manchmal weh tun. Denn möglicherweise wirst du dich danach von heimlich geliebten, aber eigentlich redundanten Inhalten trennen. Doch: Diese Trennung bringt dich und deine Page-Speed deutlich nach vorn.
Pagespeed-Krücken: Diese Dinge solltest du beim Content-Check genau überprüfen
- Bildelemente: Wie steht es um die Auflösung deiner Bildelemente – sind sie für Web optimal komprimiert oder laden sie als dicke Brocken in Druckauflösung? Außerdem ist es wichtig, die Bilder nicht irgendwie hochzuladen, sondern als Webformat wie etwa JPGEG2000 oder SVG. Tipp: Tools wie tinyJPEG oder tinyPNG machen die Komprimierung deiner Bildelemente zum Kinderspiel. Einfach per Drag & Drop reinziehen, entsprechend komprimieren und optimiertes File auf deiner Seite platzieren.
- Videos: Idealerweise bindest du Videos über einen schnellen externen Anbieter wie beispielsweise YouTube ein. Tipp: Achtet darauf, dass die Video-Einbindung DSGVO-konform ist und keine Cookies setzt – so vermeidet ihr rechtliche Schwierigkeiten. Hierfür gibt es spezielle Plugins und auch in den Einstellungen der Videoplattformen Häkchen, die an der richtigen Stelle zu setzen sind.
- Schriftarten: Hach, was macht es Spaß, sich Design-technisch mit Schriftarten am eigenen Content auszuleben. Aber: Jede zusätzlich verwendete Schriftart muss geladen werden. Und das braucht Zeit, die sich letztlich hübsch aufsummiert. Lieber nicht übertreiben, übersichtlich bleiben und dafür mit einer schnellen Seitenladezeit punkten.
Augen auf bei der Serverwahl: Der physische Ort, an dem deine Seite hinterlegt – englisch gehostet – ist, ist der Server. Die Art und Weise, wie dein Serverbetreiber sein Hosting-Angebot gestaltet hat, wirkt sich stark auf die Lade-Geschwindigkeit deiner Seite aus. Das solltest du überprüfen – und in Erwägung ziehen, vielleicht hier etwas mehr Geld für das Hosting in Kauf zu nehmen, aber dadurch letztendlich deinen Umsatz durch eine schnelle Seite zu steigern.
Wir selbst haben unseren Hosting-Anbieter gewechselt und Mehrkosten von fünf Euro akzeptiert. Im Gegenzug haben wir nun eine Reihe Tuning-Tools zur Verfügung, die unsere Seite schneller laden lassen. Durch den Umzug holten wir unsere Seite mobil aus dem roten in den grünen Bereich – ein voller Erfolg.
Diese Server-Features machen deine Seite schneller
Webhoster können dir durch verschiedene Optionen und Werkzeuge ermöglichen, deine Seitenladegeschwindigkeit zu optimieren. Dazu zählt etwa die Möglichkeit, ein schnelleres Web-Protokoll wie HTTP2 zu nutzen. Stellst du auf das HTTP2-Protokoll um, bewirkt das eine optimierte und damit beschleunigte Datenübertragung. Ein weiterer Kniff wäre die Aktivierung von Caching-Optionen wie die PageSpeed Module von Google. Sie komprimieren deine Daten für die Übertragung – und machen damit deine Seite ein ganzes Stück schneller.
Verwendest du beispielsweise WordPress, kann es durchaus sinnvoll sein, einen auf WordPress-Seiten spezialisierten Host auszuwählen – häufig verfügst du so über mehr Stellschrauben für die Optimierung deiner Seitengeschwindigkeit.
Tipp: Testet eine Auswahl von etwa zwei bis drei Webhosting-Anbietern mit eurer realen Website und entscheidet euch erst dann, wem ihr den Zuschlag gebt. Nur durch reale Test-Bedingungen wird aus der Wahl des Servers eine fundierte Entscheidung. Dazu könnt ihr die Website beispielsweise auf eine Subdomain spiegeln – so läuft die tatsächliche Seite auch während der Testphase weiter und ihr habt keinen Druck, schnell zu wählen.
Zugegeben: Es gibt schon attraktive Spielereien, mit denen du deine Website schmücken kannst. Schicke Fonts, eine Umfrage hier, ein Anfrage-Formular da. Doch Vorsicht: Jedes externe Element, wie etwa reCaptchas, Chat-Dienste oder eine Google Map-Einbindung auf deiner Seite zählt auf deine Seitenladegeschwindigkeit. Denn für diese Inhalte müssen externe Server angefragt werden. Dieser muss wiederum reagieren und schließlich Content an deine Seite ausliefern – und das dauert. Darum gilt auch hier: Weniger ist mehr! Überprüfe genau, was du wirklich brauchst, und trenne dich von unnötigem Ballast. Deine Page-Speed wird es dir danken.
Tipp: Wenn du auf externe Schriftarten wie Google-Fonts nicht verzichten willst, lade diese zuvor auf deinen Server hoch – das spart Ladezeit. Wichtig: Checke vorher, ob die Lizenz der Schriftart zur Nutzung auf deiner Seite passt.
Es lohnt sich, von der optischen Erscheinung deiner Website mehr zu verlangen, als hip auszusehen – denn im Hintergrund spielt diese als wichtiger Faktor in die Seitenladenzeit deiner Seite hinein.
Definiert wird das Erscheinungsbild maßgeblich vom gewählten Theme – die Melange fixer grundlegender grafischer Elemente der Benutzeroberfläche, wie Beispielsweise das Farbschema, das Schriftbild, das Layout der Buttons oder der Look des Hintergrunds. Das Framework des Themes, also das Programmiergerüst oder der Ordnungsrahmen, setzt sich aus HTML-Code und Stylesheets (CSS) zusammen und ist ein für sich stehendes, austauschbares programmiertes Webdesign.
Wie hängen nun das Theme und deine Page-Speed zusammen – und noch wichtiger, wie kannst du dein Theme so optimieren, dass es deine Page-Speed beflügelt, anstatt sie zu verlangsamen? Ruft ein:e User:in deine Seite auf, werden sämtliche Elemente des Theme-Frameworks im Hintergrund geladen. Mit sämtlichen Elementen sind erstens Dinge wie die eingebetteten Schriftarten gemeint, mit deren Hilfe du das Aussehen von Überschriften und Fließtext festlegst. Jedoch zweitens auch im Theme enthaltene Ressourcen – etwa das vorgefertigte Design für einen Shop oder eine E-Learning-Plattform –, die in Form von JavaScript- und CSS-Bibliotheken hinterlegt sind. All diese Elemente blähen die Website in Puncto Ladezeit extrem auf, egal, ob ihr sie sichtbar verwendet oder nicht. Daher gilt hier: Abspecken.
Tipp: Die Anforderungs-Liste auf den Tisch packen und genau checken, welche Elemente sollte dein Theme beinhalten – und was ist überflüssig. Investiere die Zeit, um ein Theme zu finden, welches lediglich die Dinge beinhaltet, die auf deiner Website tatsächlich benötigt werden. Eure Nutzer:innen werden es lieben.
Wir haben uns selbst unser Theme vorgeknöpft – und konnten uns durch die Wahl des relativ schlanken Frameworks „Page Builder Framework“ um 20 bis 30 von 100 möglichen Punkten in Sachen Ladegeschwindigkeit verbessern.
Hast du schließlich ein schlankes Theme gefunden, das perfekt zu deinen Anforderungen passt, solltest du es nach der Installation ausgiebig testen – alle Inhalte gut untergebracht? Wunderbar, dann bist du in Sachen Page-Speed schon einen wichtigen Schritt weiter.
So wirst du in 11 Minuten zum Pageload-Geek
Andy macht‘s möglich: In diesem Video erklärt er, wie du einfach und schnell die Seitenladezeit deiner Website in weniger als 11 Minuten anhand von 5 Schritten optimieren kannst:
Elementar für deine Performance: Core Web Vitals
Core Web was? Der Mai 2021 lies viele Webcontent-Anbieter zittern – Google launchte ein Update seiner Core Web Vitals. Was genau das ist – und wie die Core Web Vitals mit der Seitenladegeschwindigkeit zusammenhängen, klären wir jetzt. Gemeinsam. Schön langsam in kleinen Scheibchen.
Was verbirgt sich hinter den Google Core Web Vitals
Weil Google nicht nur die beliebteste Suchmaschine ist, sondern auch bleiben will, arbeitet der Konzern permanent daran, möglichst attraktive Sucherergebnisse zu liefern. Attraktiv ist ein Ergebnis nach der Definition von Google unter anderem dann, wenn es eine gute Nutzererfahrung (englisch: User Experience) vorweisen kann: Websites, deren Besuch von Nutzer:innen positiv wahrgenommen wird, eine, mit der sie gerne interagieren.
Um dies zu gewährleisten, misst der Google-Algorithmus das Nutzerverhalten auf Webseiten und bewertet die Sites schließlich nach eigens definierten Maßstäben: den Core Web Vitals. Was der Core-Web-Vitals-Bericht demnach widerspiegelt, ist die Nutzerfreundlichkeit einer Website – die Page Experience Signals. Neben den Punkten Optimierung für Mobilgeräte, sicheres Surfen und HTTPS sind hierfür für die folgenden drei Faktoren entscheidend:
1. Largest Contentful Paint (LCP)
Unter dem Largest Contentful Paint (LCP) versteht die Webwelt die Zeitspanne in Sekunden, in der Nutzer:innen eine URL aufrufen bis der Inhalt komplett im Browser sichtbar ist. Genauer genommen wird hier gemessen, wie lange es dauert, bis das größte sichtbare Inhaltselements vollständig gerendert, zu deutsch wiedergegeben, ist. Das größte Element ist in der Regel ein Bild, ein Video oder ein großes Textelement auf Blockebene. Je nachdem, wie schnell oder langsam dieses lädt, erzielt eine Website gute oder schlechte LCP-Werte.
So kannst du LCP-Werte einordnen: Deine Ladezeit ist
- gut: weniger als 2,5 Sekunden
- verbesserungswürdig: bis zu 4 Sekunden
- schlecht: über 4 Sekunden
Mit dem First Input Delay (FID) ist jene Zeit gemeint, die der Browser braucht, bis Nutzer:innen mit der Website interagieren können. Klicken Nutzer:innen beispielsweise auf einen Link, scrollen oder tippen auf eine Schaltfläche, wird das als Interaktion gewertet.
So kannst du den FID-Score interpretieren: Ladezeiten sind
- gut: unter 0,1 Sekunden
- verbesserungswürdig: bis 0,3 Sekunden
- schlecht: über 0,3 Sekunden
3. Cumulative Layout Shift (CLS)
Mit dem Cumulative Layout Shift (CLS) wird gemessen, wie sehr sich das Seitenlayout während der Ladephase verschiebt. Wenn Nutzer:innen beispielsweise scrollen und dabei die Seite springt oder ein Video „hüpft“, sobald sie es ansehen wollen, gilt dies als Verschiebung. Bewertet wird hier auf einer Skala von 0 bis 1, wobei 0 für keine Verschiebung und 1 für die stärkste Verschiebung steht.
So liest du den CLS-Wert richtig: Deine Ladezeit bewertet Google als
- gut: unter 0,1 Sekunden
- verbesserungswürdig: bis 0,3 Sekunden
- schlecht: über 0,3 Sekunden
Guck dich schlau: Core Web Vitals clever aufbereitet
Andy erklärt im folgenden Video ausführlich die Core Web Vitals LCP, FID und CLS.
So testest du deine Seite auf ihre Core Web Vital-Werte
Google gibt die Werte vor – also hat Google auch eine Möglichkeit entworfen, deine Seite auf ihre Core Web Vitals zu überprüfen. Hierfür kannst du entweder wie oben beschrieben, die Labor-Daten in der Analyse des Google PageSpeed Insights heranziehen – oder den Core Web Vitals-Bericht* nutzen.
Google PageSpeed Insight vs. Core Web Vitals-Bericht: Wo liegt der Unterschied?
Same same, but different: Während die
- Labor-Daten (lab data) des Google PageSpeed Insights auf Messungen unter kontrollierten Umständen basieren – und demnach bei gleichbleibenden Umständen auch immer reproduzierbar sind –,
entstehen die
- Feld-Daten des Core Web Vitals-Berichts bei einer individuellen Messung per JavaScript-Einbindung oder Messung per Google Chrome – echte, nicht reproduzierbare Nutzerdaten.
Der Vorteil der Feld-Daten: Sie bilden die reale Nutzererfahrung ab. Und die kann je nach dem, ob deine Zielgruppe vermehrt mit Desktop-Geräten oder mehrheitlich mit den neuesten Smartphones surft, sehr unterschiedlich ausfallen. Ok, klingt doch bestens. Warum arbeiten dann nicht alle mit dem Core Web Vitals-Bericht? Jetzt kommt das Aber: Hierbei werden auch Faktoren berücksichtigt, die du als Betreiber deiner Website nicht beeinflussen kannst. Außerdem musst du es in Kauf nehmen, dass sich Verbesserungen deiner Core Web Vitals nur verzögert in den Werten abbilden, da sie nur monatlich ausgewertet werden – und die von Chrome ausgewerteten Daten eben nur für einen Teil deiner Nutzer:innen steht.
Für das tägliche Debugging und Optimieren deiner Website ist daher das Arbeiten mit den Labor-Daten von Vorteil. Du kannst sofort und beliebig oft messen und so deine Stellschrauben sehr fein justieren und einordnen. Verändern sich deine Labor-Werte zudem stark, hängt dies ziemlich sicher mit deiner Seite und nicht mit deren Nutzern zusammen. Hier liegt natürlich auch die Schwachstelle – du misst unter voreingestellten Laborbedingungen und erhältst keinen Einblick in die realen Nutzerdaten.
Tipp: Nutze die Labor-Daten für deine permanente Seitenoptimierung, wirf jedoch monatlich auch einen Blick auf die Field Data – so bleibst du mit deinen Nutzer:innen in Verbindung.
Schnellcheck Core Web Vitals-Bericht:
- indexierte URLs only: Den Core Web Vitals-Bericht gibt es nur für indexierte URLs. Will heißen: Diese Vorgehensweise funktioniert nur für URLs, die als Property bei Google hinterlegt wurden. Eine Property ist eine Art zentrale Sammelstelle für Google-Analysedaten deiner Website – lies hier nach, wie du diese einrichten kannst.
- drei Messwerte: LCD, FID und CLS stellen die Basis des Berichts dar.
- LCD = Largest Contentful Paint
- FID = First Input Delay
- CLS = Cumulative Layout Shift
- Ergebnisse nach Gerätetyp: Der Bericht spielt die Ergebnisse separat für mobile Endgeräte und Desktop-Nutzer:innen aus.
- allgemeine Übersicht = zeigt die URL-Leistung je nach Gerät (mobil | Desktop) und Status (langsam | Optimierung erforderlich | gut)
- Übersicht nach Gerätetyp = hier siehst du deinen Status und die vorhandenen Probleme deiner Seiten
Tipp: Der Status im Core Web Vitals-Bericht gibt dir die Prioritäten vor. Alle URLs, die als „langsam“ eingeordnet sind, solltest du zuerst bearbeiten. Anschließend solltest du die URLs mit den meisten Fehlern oder die in deinen Augen wichtigsten URLs optimieren.
Fazit
Google möchte seinen Nutzer:innen qualitativ hochwertige Suchergebnisse mit relevantem Content ausliefern. Nutzerfreundliche Websites werden dabei auf den Ergebnisseiten hervorgehoben, um den User:innen die Suche so angenehm und hilfreich wie möglich zu gestalten. Die Signale für Nutzerfreundlichkeit wie die Seitenladegeschwindigkeit und die Core Web Vitals betrachtet der Suchmaschinenbetreiber als besonders wichtige Kriterien. Um deine Website erfolgreich zu betreiben, solltest du diese Faktoren optimieren und ganz oben auf deine Prioritätenliste setzen. Sie beeinflussen dein Google-Ranking enorm – und damit deine Sichtbarkeit im Netz. Außerdem – mal ganz abgesehen von Google –, macht eine schnelle und nutzerfreundliche Website deine Seite ja auch für deine tatsächlichen User:innen attraktiv. Doppelt gut, hält besser.
Noch Fragen zum Thema Seitenladegeschwindigkeit oder Core Web Vitals-Optimierung?
Wende dich jederzeit gerne an einen unserer Expert:innen, wenn du Unterstützung brauchst.