Google Page Speed - Wie schnell ist deine Website wirklich?

Schnell, schneller, am schnellsten – Der Google Page Speed ist ein wichtiger Rankingfaktor im SEO. Wir zeigen dir, wie du deine Website beschleunigen kannst.

Ladezeit im Fokus

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.

Google Page Speed Insights

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 bei Google Page Speed

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.

Google-Page-Speed-Resultat

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.

Screenshot-PageSpeed-von-Google

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.

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”.

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.

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.

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.

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.

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.

Weitere Beiträge, die dich interessieren könnten

Das neue Datenschutzgesetz in der Schweiz ab September 2023

Neues Datenschutzgesetz Schweiz

Im September 2023 tritt das neue Datenschutzgesetz in der Schweiz in Kraft. Wir zeigen dir, wie du dich auf die Veränderung vorbereiten kannst und worauf du achten musst.

Weiterlesen »

Möchtest du uns kennenlernen?

Du bist an unserem Angebot interessiert? Dann lass uns in einem unverbindlichen und kostenlosen Erstgespräch herausfinden, wie wir dir helfen können. Buche jetzt ganz einfach hier deinen Termin – wir freuen uns auf dich!

Termin buchen

Deine Angaben

Dein Erstgespräch - Wie & Wo

Wie und wo soll das Erstgespräch stattfinden? Wenn du aus den Kantonen BS, BL, AG, SO, BE, LU oder ZH bist, kommen wir auch gerne bei dir persönlich vorbei.

Dein Erstgespräch

Bitte gib hier mindestens zwei Terminvorschläge an, die dir am besten passen würden.

Worum geht es genau?

Damit wir uns auf das Gespräch vorbereiten können, bitten wir dich, uns kurz von deinem Projekt zu erzählen. Bitte gib an, worum es bei deinem Projekt geht. (Mehrfachauswahl möglich).