Google Page Speed – Oder wie schnell ist deine Website?

Schnell, schneller, am schnellsten – Der Google Page Speed ist ein wichtiger Rankingfaktor in Bezug auf die Suchmaschinenoptimierung. Erfahre jetzt wie du deiner Website den nötigen Drive verleihen kannst.

Ladezeit im Fokus: Schneller Erfolg für deine Website

Nicht nur für dich als Internetnutzer, sondern auch für Suchmaschinen ist der Google Page Speed entscheidend. Deshalb bestraft Google langsame Websites. Das Ergebnis: Du findest dich auf Seite 5 der Suchergebnisse oder noch weiter hinten wieder. Ein exzellentes Nutzererlebnis beinhaltet auch, dass die Zielseite in angemessener Zeit geladen wird.

Stell dir folgende Situation vor, die du sicherlich schon erlebt hast: Du suchst im Internet nach einem Produkt oder einer Dienstleistung, findest nach langem Suchen endlich eine vielversprechende Website bei Google. Du klickst auf den Link zur Website und die Seite lädt – loading – Das Display bleibt leer und du bemerkst, dass du deinen Bildschirm mal wieder reinigen könntest – loading – Die Seite lädt immer noch. Wie lange wartest du, bevor du genervt wegklickst und weitersuchst? Laut Statistik klicken die meisten Nutzer nach 3-4 Sekunden weg.

Lange Wartezeit deiner Website mit Google Page Speed Insights

Bist du frustriert von der langsamen Ladezeit deiner Website? Keine Sorge, wir haben die Lösung! In diesem Artikel erfährst du, wie du deine Website auf Hochtouren bringst und Conversions sowie Umsatz steigerst. Wir stellen dir die besten Tools vor, mit denen du den tatsächlichen Page Speed testen kannst.

Google Page Speed Insights

Beginnen wir gleich mit dem wichtigsten Tool – dem Google PageSpeed Insights. Wir selbst arbeiten hauptsächlich mit diesem Tool, da es von Google selbst kostenlos zur Verfügung gestellt wird. Und da du mit deiner Website in den Suchergebnissen bei Google möglichst weit vorne stehen möchtest, musst du kein Prophet sein, um zu erkennen, weshalb dieses Tool in Sachen Page Speed das relevanteste ist.
Das Tool selbst funktioniert äußerst einfach. Gib einfach deine URL in die Maske ein und klick auf “Analysieren”. Das Tool untersucht nun deine Website, aber nur diese Website, nicht die Unterseiten, welche separat eingegeben werden müssen. Nach ein paar Sekunden erhältst du auch dein Resultat. Google Page Speed Insights teilt das Resultat sogar noch in “Mobil” und “Computer” auf. So siehst du, wie es um die Website-Geschwindigkeit auf mobilen Endgeräten und auf dem Computer steht. Mittels der Farben rot, gelb und grün inkl. einer Rankingzahl zwischen 0 und 100, siehst du sofort, ob Handlungsbedarf besteht oder nicht.

Ergebnis eines Tests bei Google Page Speed Insights

Wie du deine Website anhand des Resultats optimieren kannst

Falls du mit deiner Website sowohl bei der mobilen als auch bei der Desktop-Variante nicht gleich 100 Punkte erzielst, musst du dir keine Sorgen machen. Werte ab 90 Punkten sind im grünen Bereich. Werte im gelben Bereich (zwischen 50 und 89 – zugegeben, das ist eine sehr große Marge) sollten optimiert werden und Werte unter 50 (roter Bereich) müssen dringend überarbeitet werden.

Nach dieser kurzen aber viel aussagenden Übersicht werden dir die wichtigsten Messwerte wie “First Contentful Paint” und “Time to Interactive”, usw. gezeigt. Anschließend gibt dir Google Page Speed Insights Empfehlungen ab, wie du deine Website optimieren kannst. Auch in diesem Bereich arbeitet das Tool übersichtlich mit den Farben rot und gelb. Ein rotes Dreieck bedeutet, dass du dich zügig um dieses Problem kümmern solltest. Die Empfehlungen mit einem gelben Quadrat befolgst du, wenn du das Letzte aus deinem Google Page Speed herausholen möchtest.

Empfehlungen für die Optimierung deiner Ladezeit

Hier siehst du eine Website, die bei der Leistung nur gerade 17 von 100 Punkte erreicht und dringend optimiert werden muss. Wir haben uns für dieses Beispiel entschieden, da es die häufigsten Schwachstellen auf einen Blick zeigt.

Google Page Speed Insights - Die häufigsten Schwachstellen

Wie du die häufigsten Schwachstellen mit Google Page Speed Insights erkennst du diese lösen kannst.

Bilder in modernen Formaten bereitstellen

Bilder machen eine Website wertvoll. Nicht zu Unrecht kommt der Ausdruck “Bilder sagen mehr als 1000 Worte”. Aber Bilder können deine Website auch komplett zerstören, jedenfalls was die Geschwindigkeit deiner Website angeht. Mit modernen Smartphones oder auch anderen Kameras erreichen die Bilder unbearbeitet nicht selten eine Dateigröße von 3-4 MB. Die Kunst liegt nun darin, das Bild auf eine Dateigröße von maximal 150 KB (ja Kilobytes und nicht Megabytes) zu bekommen und das ohne größeren Qualitätsverlust. Schließlich sollen die Bilder im Internet trotzdem gestochen scharf und unverpixelt daherkommen. Wie du das hinbekommst und mit welchen Tricks wir dabei arbeiten, zeigen wir dir im Artikel “Das richtige Bildformat im Web”.

Reduziere nicht verwendetes JavaScript

Den Begriff “JavaScript” hast du vielleicht schon einmal gehört, aber was ist das genau? Im modernen Webdesign sind die Technologien HTML, CSS und JavaScript eng miteinander verknüpft. JavaScript sorgt dafür, dass die Seite dynamisch auf Ereignisse reagieren kann. Nur ein kleines Beispiel: JavaScript prüft, ob ein Nutzer, während dieser ein Kontaktformular ausfüllt, die Vorgaben erfüllt hat. Hat er die Vorgaben nicht erfüllt, erhält der Nutzer einen Warnhinweis oder eine Fehlermeldung.

Während die Website nach dem Klick aufgebaut wird, ist es nicht unbedingt erforderlich, dass gleich sämtliche JavaScripts, die sich auf der entsprechenden Seite befinden, geladen werden müssen. Es reicht, diese zu laden, wenn sie benötigt werden. Wird für den Seitenaufbau nämlich nur das Nötigste geladen, kannst du dadurch massiv an Page Speed gewinnen.

Bilder effizient codieren

Um die Datenmenge einer Bilddatei noch weiter zu verkleinern, werden Bilder häufig komprimiert. Dabei unterscheidet man zwischen einer verlustbehafteten und einer verlustfreien Komprimierung.
Bei der verlustbehafteten Komprimierung werden diverse Informationen aus dem Bild zusammengefasst oder sogar entfernt. Je nach Stärke der Kompression kann das zu einem deutlichen Qualitätsverlust führen, dafür ist die Bilddatenmenge deutlich geringer geworden. Bei der verlustfreien Komprimierung wird versucht, die Bilddatenmenge so klein wie möglich zu halten, dies aber mit gleichbleibender Bildqualität. Beispielsweise werden gewisse Redundanzen wie gleiche Farbtöne einzelner Pixel zusammengefasst. Auch mit der verlustfreien Komprimierung können Bilddatenmengen deutlich geringer gehalten werden.
Die Bildkomprimierung kannst du entweder vor dem Hochladen ins CMS vornehmen oder mittels eines Plugin nach dem Hochladen. Wir empfehlen die Bilder jeweils vor dem Hochladen mit einem externen Tool (z.B. https://www.iloveimg.com/de/bild-komprimieren) zu komprimieren, so dass du nicht noch ein weiteres Plugin in deinem CMS verwenden musst.

Ressourcen beseitigen, die das Rendering blockieren

Wenn ein Nutzer deine Website besucht, beginnt sein Browser den HTML-Code von oben nach unten zu lesen. Wenn der Browser beim Lesen auf eine CSS- oder JavaScript-Datei trifft, muss er quasi aufhören zu lesen und warten, bis er diese Datei heruntergeladen und verarbeitet hat. Das ist dann besonders ärgerlich, wenn diese Datei gar nicht benötigt wird, um die Seite above-the-fold dem Nutzer anzuzeigen. Das Ergebnis findet sich in einer längeren Ladezeit, bis der eigentliche Inhalt angezeigt werden kann.

Wenn du beim Test auf Google Page Speed Insights also die Empfehlung bekommst, Ressourcen zu beseitigen, die das Rendering blockieren, heißt das nichts anderes, als dass du keine unnötigen Ressourcen am Anfang des Codes deiner Website laden solltest, weil es dann einfach länger dauert, bis der Browser des Besuchers den sichtbaren Teil des Inhalts herunterlädt.

Du fragst dich jetzt bestimmt, wie du dieses Problem lösen kannst? Auch dafür gibt es bei WordPress Plugins, die dir diese Arbeit abnehmen. Auch hier können wir das Premium-Plugin von WP-Rocket wärmstens empfehlen. Möchtest du lieber eine kostenlose Variante, dann versuch es mit dem Plugin Autoptimize und Async JavaScript zusammen.

Reduziere nicht verwendetes CSS

CSS wird verwendet, um das Erscheinungsbild deiner Website zu gestalten. Dein CMS-Theme enthält CSS, wobei das meiste in einer einzelnen Datei abgelegt ist. Deine Plugins / Extensions laden jedoch ebenfalls ihre eigene CSS-Datei hoch. Hast du beispielsweise noch einen Shop mit WooCommerce angebunden, lädt dieses Plugin eine CSS-Datei für die Anzeige von Produkten. Ein Plugin für die Formularerstellung lädt seine CSS-Datei dann noch dazu.

Im Normalfall sind diese CSS-Dateien eher klein, aber wenn deine Website sehr viele davon enthält, kann dies zu längeren Ladezeiten und zu einem schlechteren Google Page Speed führen. Durch diese Vielzahl an CSS-Dateien kann es sein, dass ungenutzter CSS-Code entsteht, der auf deine Website geladen, aber eigentlich gar nicht benötigt wird, um die Seite richtig anzuzeigen.

Mit einem WordPress-Plugin wie “WP-Rocket” (sehr wirkungsvoll und auch für Anfänger geeignet) oder “Asset Cleanup-Plugin” (eher für Fortgeschrittene) kannst du nicht verwendetes CSS reduzieren.

Zusammenfassung Google Page Speed Insights

Sobald du auf alle oben beschriebenen Empfehlungen eingegangen bist und die Probleme beseitigt hast, wirst du eine deutliche Verbesserung deines Google Page Speeds spüren. Weitere Optimierungen kannst du zwar vornehmen, versuch aber, deine Website nicht zu “Tode zu optimieren”. Wie eingangs erwähnt, müssen es nicht zwangsläufig 100 Punkte sein. Sobald du im grünen Bereich bist, bist du gut mit dabei.

GTmetrix und Pingdom Website Speed Test

Bei diesen beiden externen Tools handelt es sich ebenfalls um Analysetools betreffend die Geschwindigkeit deiner Website. Wie auch das Tool von Google Pagespeed Insights sind GTmetrix und Pingdom kostenlos nutzbar. Selbstverständlich haben wir beide Programme getestet und benötigen sie auch ab und zu für Kundenprojekte.

GTmetrix liefert uns in den meisten Fällen die exakt gleichen Daten wie Google Page Speed, ist aber bei den Empfehlungen etwas unübersichtlicher.

Das Tool von Pingdom nutzen wir weniger, da es oftmals sich widersprechende Daten liefert. Beispielsweise kann der “Performance Grade-Wert” bei über 90 Punkten und einem A-Ranking liegen, obwohl die “Load-Time” bei über 5 Sekunden liegt. Dennoch sind die Empfehlungen (alle auf Englisch wie auch bei GTmetrix) doch recht hilfreich.

Ähnliche Blog-Artikel für dich

Richtiges Bildformat im Web - Übersicht

Das richtige Bildformat fürs Web

Abschied von den Pixelverwischern! Entdecke, warum das passende Bildformat der Schlüssel zu einer beeindruckenden Website ist. Vergiss unscharfe Bilder und lange Ladezeiten – hier erfährst du, wie du deine Website zum Glänzen bringst. Bereit? Let’s pixel!

Die 12 must-have WordPress Plugins

Die 12 „must-have“ WordPress Plugins

Erkunde das faszinierende Universum der 12 essenziellen WordPress-Plugins! Nach gründlichen Tests sind wir vollkommen begeistert von ihren beeindruckenden Funktionen. Entdecke diese kraftvollen Werkzeuge und verleihe deiner Website im Handumdrehen den Feinschliff.

Deine neue Website

Du möchtest eine professionelle Website erstellen lassen, die bei deinen Kunden einen bleibenden Eindruck hinterlässt?

Dein neuer Webshop

Du möchtest einen Onlineshop erstellen lassen, Produkte im Internet erfolgreich verkaufen & mehr Umsatz generieren?

Landingpage

Du möchtest von uns eine Landingpage erstellen lassen, welche deine Besucher fesselt und zur Handlung motiviert?

CMS WordPress

Wir haben uns auf das CMS von WordPress spezialisiert. Mit diesem CMS sind dir keine Grenzen gesetzt.

Wartung & Pflege

Du möchtest deine Website von uns warten und pflegen lassen? Weiter zum Rundum-Sorglos-Paket.

Website-Leasing

Du möchtest deine Website / deinen Webshop in monatlichen Raten bezahlen? Bei uns, kein Problem.

Deine eigene Website – individuell, professionell und nachhaltig!

Möchtest du endlich von deiner Zielgruppe gefunden werden?

Blog – Webdesign

Du möchtest in der Welt des Webdesigns auf dem Laufenden bleiben und wertvolle Tipps & Tricks erhalten? Dann schau dich in unserem Webdesign-Blog genauer um!

Blog – Google Ads

SEA & Google Ads ist für dich wie ein Buch mit 7 Siegeln? Das ist überhaupt kein Problem. Mit unseren wertvollen Tipps & Tricks im Bereich Google Ads wirst auch du zum Profi.

Glossar

Das Onlinemarketing ist gespickt mit vielen Begrifflichkeiten. In unserer Bibliothek erklären wir dir die häufigsten Begriffe ausführlich und mit vielen praktischen Beispielen.

Nice to know – Möchtest du mehr über Onlinemarketing wissen?

Unser Team

Lerne jetzt das Team der Webagentur Forster kennen. Wir verraten dir unsere Visionen und was du alles von uns erwarten darfst.

Weiterempfehlung

Du möchtest die Webagentur Forster weiterempfehlen? Bei jeder Empfehlung erhältst du nach Projektabschluss eine Provision von ca. 10%.

Jobs

Du möchtest bei der Webagentur Forster arbeiten oder bist an einem Co-Working interessiert? Wir freuen uns, dich kennenzulernen.

Anfrage Offerte

Du möchtest eine Offerte einholen? Dann füll bitte unseren Fragebogen aus, damit wir dir eine detaillierte Offerte zustellen können.

Offerte gefällig? Worauf wartest du denn noch?