Google Page Speed Insights oder wie schnell ist Ihre Website wirklich?
Schnell, schneller, am schnellsten – Der Google Page Speed ist ein wichtiger Rankingfaktor in Bezug auf die Suchmaschinenoptimierung. Erfahren Sie jetzt, wie Sie Ihrer Website den nötigen Drive verleihen.
Nicht nur für Sie als Internetnutzer, sondern auch für Suchmaschinen ist der Google Page Speed sehr wichtig. Daher straft Google Websites, die sehr langsam laden, ab. Das Resultat: Die betroffenen Websitebetreiber finden sich dann auf Seite 5 der Suchresultate oder noch weiter hinten wieder. Denn schließlich gehört zu einem exzellenten Nutzererlebnis auch, dass die Zielseite in einer vernünftigen Zeit zur Verfügung steht.
Stellen Sie sich folgende Situation vor, die Sie selbst bestimmt schon erlebt haben: Sie suchen im Internet nach einem Produkt oder nach einer Dienstleistung, haben bei Google nach langem Suchen endlich die Website gefunden, die sich vielversprechend anhört, klicken auf den Link zur Website und die Seite lädt – *loading* – Das Display ist noch immer weiss und Sie bemerken, dass Sie mal wieder Ihren Bildschirm reinigen könnten – *loading* – Nach diesem Gedankenspiel lädt die Seite noch immer. Wie lange warten Sie, bis Sie genervt wegklicken und sich weiter auf die Suche begeben? Gemäss Statistik klicken die meisten Nutzer nach 3-4 Sekunden weg.
Betreiben Sie selbst eine Website, die unter einem langsamen Google Page Speed leidet? Nicht nur, dass Sie damit Ihre Besucher nerven, Sie verlieren dadurch auch jede Menge Conversions und Leads und somit Umsatz. Bestimmt fragen Sie sich jetzt, wie Sie Ihre Website schneller machen können. Aus diesem Grund lesen Sie gerade diesen Artikel. Und wir haben gute News für Sie: glücklicherweise gibt es einige Methoden, mit denen Sie Ihre Website aus dem Schneckenhaus holen können. Um den tatsächlichen Page Speed Ihrer Website zu testen, gibt es verschiedene Tools, welche wir Ihnen jetzt vorstellen.
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 Sie mit Ihrer Website in den Suchergebnissen bei Google möglichst weit vorne stehen möchten, müssen Sie kein Prophet sein, um zu erkennen, weshalb dieses Tool in Sachen Page Speed das relevanteste ist.
Das Tool selbst funktioniert äußerst einfach. Geben Sie einfach Ihre URL in die Maske ein und klicken auf “Analysieren”. Das Tool untersucht nun Ihre Website, aber nur diese Website, nicht die Unterseiten, welche separat eingegeben werden müssen. Nach ein paar Sekunden erhalten Sie auch Ihr Resultat. Google Pagespeed Insights teilt das Resultat sogar noch in “Mobil” und “Computer” auf. So sehen Sie, 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, sehen Sie sofort, ob Handlungsbedarf besteht oder nicht.
Falls Sie mit Ihrer Website sowohl bei der mobilen als auch bei der Desktop-Variante nicht gleich 100 Punkte erzielen, müssen Sie sich 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 Ihnen die wichtigsten Messwerte wie “First Contentful Paint” und “Time to Interactive”, usw. gezeigt. Anschließend gibt Ihnen Google Pagespeed Insights Empfehlungen ab, wie Sie Ihre Website optimieren können. Auch in diesem Bereich arbeitet das Tool übersichtlich mit den Farben rot und gelb. Ein rotes Dreieck bedeutet, dass Sie sich zügig um dieses Problem kümmern sollten. Die Empfehlungen mit einem gelben Quadrat befolgen Sie, wenn Sie das Letzte aus Ihrem Google Page Speed herausholen möchten.
Hier sehen Sie eine Website, die bei der Leistung nur gerade 17 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 und seine Empfehlungen für eine schnellere Website
Hier erfahren Sie wie Sie mittels Google Page Speed Ihre Website schneller machen.
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 Ihre Website auch komplett zerstören, jedenfalls was die Geschwindigkeit Ihrer 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 Sie das hinbekommen und mit welchen Tricks wir dabei arbeiten, zeigen wir Ihnen im Artikel “Das richtige Bildformat im Web”.
Reduzieren Sie nicht verwendetes JavaScript
Den Begriff “JavaScript” haben Sie 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, können Sie dadurch massiv an Page Speed gewinnen.
Wenn Sie mehr über das Zusammenspiel “HTML, CSS und JavaScript” erfahren möchten, lesen Sie unseren Artikel “HTML, CSS und JavaScript – Who is Who?”.
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 können Sie 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 Sie nicht noch ein weiteres Plugin in Ihrem CMS verwenden müssen.
Ressourcen beseitigen, die das Rendering blockieren
Wenn ein Nutzer Ihre 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 Sie beim Test auf Google Pagespeed Insights also die Empfehlung bekommen, Ressourcen zu beseitigen, die das Rendering blockieren, heißt das nichts anderes, als dass Sie keine unnötigen Ressourcen am Anfang des Codes Ihrer Website laden sollen, weil es dann einfach länger dauert, bis der Browser des Besuchers den sichtbaren Teil des Inhalts herunterlädt.
Sie fragen sich jetzt, wie Sie dieses Problem lösen? Auch dafür gibt es bei WordPress Plugins, die Ihnen diese Arbeit abnehmen. Auch hier können wir das Premium-Plugin von WP-Rocket wärmstens empfehlen. Möchten Sie lieber eine kostenlose Variante, dann versuchen Sie es mit dem Plugin Autoptimize und Async JavaScript zusammen.
Reduzieren Sie nicht verwendete CSS
CSS wird verwendet, um das Erscheinungsbild Ihrer Website zu gestalten. Mehr über CSS erfahren Sie in unserem Artikel “HTML, CSS und JavaScript – Who is Who?”. Ihr CMS-Theme enthält CSS, wobei das meiste in einer einzelnen Datei abgelegt ist. Ihre Plugins / Extensions laden jedoch ebenfalls ihre eigene CSS-Datei hoch. Haben Sie 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 Ihre 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 Ihrer 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) können Sie nicht verwendetes CSS reduzieren.
Zusammenfassung Google Pagespeed Insights
Sobald Sie auf alle oben beschriebenen Empfehlungen eingegangen sind und die Probleme beseitigt haben, werden Sie eine deutliche Verbesserung Ihres Google Page Speed spüren. Weitere Optimierungen können Sie zwar vornehmen, versuchen Sie aber, Ihre Website nicht zu “Tode zu optimieren”. Wie eingangs erwähnt, müssen es nicht zwangsläufig 100 Punkte sein. Sobald Sie im grünen Bereich sind, sind Sie gut mit dabei.
GTmetrix und Pingdom Website Speed Test
Bei diesen beiden externen Tools handelt es sich ebenfalls um Analysetools betreffend die Geschwindigkeit Ihrer 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 Pagespeed, ist aber bei den Empfehlungen etwas unübersichtlicher.
Das Tool von Pingdom nutzen wir wenig, 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.
