Wenn wir bei Website Reviews die Seiten von Kunden überprüfen, führt der erste Schritt immer zu den Google PageSpeed Insights. Die einfach aufgebaute Analyse des Tools zeigt uns genau, wo wir ansetzen müssen, um eine Website zum Erfolg zu führen.
Was ist das Google PageSpeed Tool?
Mit den Google PageSpeed Insights werden die Ladezeit und die technische Umsetzung einer Website gemessen und analysiert. Dabei kommt es auf eine möglichst fehlerfreie Programmierung und die Benutzerfreundlichkeit auf Desktop und mobilen Geräten an.
Wie wichtig ist Google PageSpeed?
Ladezeiten sind einer der wichtigsten Rankingfaktoren für Google. Je schneller deine Website lädt, desto besser für dich. Und das hat gleich zwei Gründe:
- Mobile Geräte.
Google legt großen Wert darauf, dass Websites für mobile Geräte optimiert sind. Dafür gibt es mittlerweile AMP Pages und so genannte PWAs. Auf mobilen Geräten sind die Ladezeiten in der Regel automatisch höher, weil sie über mobile Datenverbindungen laufen. - Niedrigere Absprungraten.
Mit längeren Ladezeiten kommen auch höhere Absprungraten. Die Besucher haben kein Interesse auf das Laden einer Website zu warten und wandern ab. Um zu ermitteln, wie interessant eine Website für die Besucher ist, misst Google aber genau diese Absprünge und stuft gegebenenfalls deine Website als „nicht besonders interessant“ ein.
Eine Website für Google PageSpeed optimieren
Damit wir uns nicht falsch verstehen: wir optimieren eine Website nicht für Google PageSpeed, sondern für eine fehlerfreie und möglichst suchmaschinenfreundliche Darstellung. Den Fokus legen wir immer auf eine optimale Besuchererfahrung.
Je positiver der Besucher deine Website empfindet, desto länger wird er auf der Seite bleiben, Unterseiten aufrufen und später noch einmal zurückkehren.
Um diese Ziele zu erreichen, ist Google PageSpeed Insights ein optimales Tool zur Auswertung von Verbesserungspotenzial. Je besser dein Score bei den PageSpeed Insights, desto besser ist auch die Darstellung der Seite beim User.
Die Ladezeiten sind ein so entscheidender Faktor, dass ich dir hier meine besten Tipps an die Hand gebe, um deine Website schneller machen zu können.
Bilder optimieren für Google PageSpeed
Websites leben nicht nur von Text, sondern auch von Bildern. Die Zeiten, in denen ein Matt Cutts von Google verkündet hat, dass 200 Wörter das Minimum für einen guten Online-Text sind, sind lange vorbei.
SEOs und Content Marketer arbeiten mittlerweile kaum noch mit Texten unter 1.500 bis 2.000 Wörtern.
Wer möchte, dass die Texte dann auch noch gelesen werden, muss sie schon interessant gestalten. Und am einfachsten geht das mit jeder Menge Bildern, die den Textfluss auflockern.
Bilder steigern generell aber auch die Ladezeiten einer Website. Deshalb kommt es beim Google Pagespeed Check auch auf jedes einzelne Kilobyte Datenvolumen an.
Gewöhn dir an, jedes (und auch wirklich jedes) Bild, dass du auf deine Website lädst, zu optimieren, bzw. zu komprimieren. Musst du nicht mit dem Kartoffelstampfer machen – dafür gibt es reichlich gute Tools, die dir den Job erleichtern.
Ich verrate dir mal meinen Workflow, der sich durch 20 Jahre Onlineerfahrung etabliert hat:
- Die richtige Bildgröße wählen.
Das Optimieren von Bildern für den PageSpeed macht keinen Sinn, wenn das Bild von vornherein schon zu groß ist. Ich verwende eine Weite von maximal 1.100px. Das sieht selbst auf Retina Displays passabel aus. - Den Export einstellen.
Ein JPG Bild wird in Photoshop oder jedem anderen Tool mit einer Kompressionsstärke von maximal 80 exportiert. Bei Photoshop ist das die Exportvoreinstellung „Hoch“. - Die erste Komprimierungsstufe.
Nach dem Export empfehle ich dir die erste Komprimierung über ein Onlinetool. Gibt es zahlreich, aber das effektivste Tool für die Bildoptimierung ist in meinen Augen Compressor.io. Bild hochladen, Einstellung Lossy wählen und fertiges Bild runterladen. - Upload auf die Website.
Mit dem optimierten Bild bist du bei Google PageSpeed schon etwas weiter. Noch mehr Bonuspunkte hole ich mir aber durch ein Komprimierungsplugin, dass ich in meinen WordPress Installationen einsetze. Der Smush Image Compressor leistet sehr gute zusätzliche Arbeit und holt noch einmal ein paar Kilobyte raus. Bei Joomla bist du übrigens mit ImageRecycle und bei Typo3 mit dem ImageOptimizer gut dabei.
Google PageSpeed mit einem Cache verbessern
Das so genannte Caching ist einer der besten Wege, Ladezeiten extrem zu verringern. Der Trick dahinter ist ganz einfach:
Mit jedem Aufruf einer Seite werden sämtliche Inhalte neu berechnet. Dazu gehören Datenbankabfragen zu den Texten der Seite und zum verwendeten Bildmaterial. Aber auch technische Abfragen und Berechnungen zu JavaScripten, CSS Dateien und mehr. Das kostet jedes Mal ordentlich Zeit.
Beim Verwenden eines Cache werden all diese Abfragen nur einmal ausgeführt und dann vom Server oder dem Browser des Users gespeichert. Ruft ein Besucher eine Seite dann auf, muss nichts mehr berechnet werden und die Seite ist nahezu in Echtzeit verfügbar.
Google PageSpeed Insights erkennt, ob ein Cache eingesetzt wird und setzt dir einen dicken Minuspunkt auf die Liste, wenn er nicht vorhanden ist.
Welche Möglichkeiten die besten für WordPress Websites sind, beschreibe ich dir weiter unten.
Minimiere HTML und CSS
HTML und CSS-Dateien müssen für den Entwickler beim Aufbau deiner Website lesbar sein. Deshalb gibt es in diesem Code auch unendlich viele Leerzeichen, Leerzeilen und Tab-Stops. All diese leeren Bereiche sind für den Browser aber absolut irrelevant. Er kann den Code auch lesen, wenn diese Zeichen fehlen. Zusätzlich steigern sie die Ladezeiten einer Website und wirken sich auf deinen Google PageSpeed Insights Score aus.
Aus diesem Grund minimiert man HTML und CSS wenn man mit der eigentlichen Entwicklung fertig ist. Beim Minimieren werden all diese Leerzeichen und Zeilen aus der Datei entfernt und der komplette Code hintereinander geschrieben.
In der Regel ändert man dann auch die Dateiendung etwas ab. Aus einer .css Datei wird dann beispielsweise eine .min.css Datei.
Musst du wieder alles nicht selber machen, weil es auch dafür Tools gibt. Für CSS empfiehlt sich z. B. der CSS Minifier. Du kopierst deinen CSS Code in ein Textfeld und das Tool schrumpft dir den Code vollautomatisch zusammen.
Für WordPress gibt es da wieder einfachere Lösungen, die du weiter unten in diesem Artikel findest.
Man kann natürlich auch JavaScript minimieren. Da dies aber meistens dafür sorgt, dass die Website nicht mehr richtig funktioniert, lasse ich die Erklärung dazu mal weg. JavaScript zu cachen und zu minimieren ist etwas für absolute Vollprofis. Wenn du keinen absolut fähigen Webentwickler an deiner Seite hast, lass lieber die Finger davon.
Google PageSpeed Insights Score durch ein CDN verbessern
CD-Was? CDN ist keine neue Partei, sondern die Abkürzung für Content Delivery Network. Ein Begriff, mit dem man bei der nächsten Party durchaus glänzen kann.
Ein Content Delivery Network besteht aus Hochleistungsservern, die CSS Dateien, Bilder und Skripte (wie JavaScripts) mit hoher Geschwindigkeit ausliefern.
Nutzt du ein CDN, werden die oben genannten Dateiarten nicht von deinem Server ausgeliefert, sondern vom CDN Server. Damit man den Sinn dahinter versteht, muss man wissen, dass ein Browser wie Firefox, Chrome und Co. eine ziemlich lahme Ente ist.
Ein Browser arbeitet stur eine Internetseite Stück für Stück ab. Erst das HTML mit den Datenbankabfragen und dann nach und nach den Rest. Zwei Dinge gleichzeitig ruft er nicht ab. Es sei denn, diese zwei Dinge kommen von zwei verschiedenen Servern.
Und hier kommt das CDN in’s Spiel. Während der Browser das HTML und die Textinhalte deiner Website abruft, ruft er gleichzeitig Inhalte vom CDN ab. Und genau das beschleunigt die Ladezeiten deiner Website und somit deinen Google PageSpeed Insights Score.
Nutze Google Fonts lokal
Google Fonts sind eine super praktische Lösung, deine Website mit tollen Schriftarten kostenlos zu stylen. Wenn deine Website aber ein Zielpublikum innerhalb der Europäischen Union hat, verstößt du mit Google Fonts gegen die Regeln der DSGVO.
Hier der Workaround:
Google Fonts lassen sich auch runterladen und auf deinen Server schieben. Werden die Schriftarten von deinem Server geladen, ist dies wieder DSGVO konform und du kannst beruhigt schlafen. Alles legal, kostenlos und Google hat auch kein Problem damit.
Die weitaus beste Anleitung, die du dazu im Netz finden kannst, kommt vom Hoster Mittwald. Wenn dich das Thema interessiert, solltest du hier mal reinlesen.
Bereits vor dem Runterladen einer Google Schriftart, solltest du einen besonderen Blick auf die Ladezeiten der Schrift werfen und davon deine Entscheidung abhängig machen.
Praktischerweise zeigt Google dir die Auswirkungen auf die Ladezeit direkt an. Das Laden von Schriftarten ist nämlich ein wichtiger Faktor für die Gesamtgröße der Website und deinen Score bei den Google PageSpeed Insights.
Stell deine Website auf http/2 um
http/2 ist aktuell das heißeste Ding bei den Optimierern. Das neuere Protokoll macht vereinfacht beschrieben das Gleiche, wie die Auslieferung über ein CDN. Statt für jeden Part einer Website eine separate TCP Verbindung aufzubauen und das Ganze so nacheinander abzuarbeiten, werden mehrere Teile gleichzeitig über nur eine Verbindung übertragen.
Das beschleunigt die Ladezeiten deiner Website extrem und verbessert natürlich auch deinen Google PageSpeed Score.
Der Nachteil ist, dass du in der Regel mit deinem Hoster über das Thema sprechen musst. Viele Hoster bieten http/2 schon an und helfen dir gerne bei der Umstellung weiter.
Google PageSpeed Insights – WordPress optimieren
Kommen wir mal zu WordPress, dem meistverwendeten Content Management System der Welt. Setzt du WordPress für deine Website ein, kannst du eine Fülle von Plugins nutzen, um deine Ladezeiten zu verbessern und deinen Score bei den Google PageSpeed Insights nach oben zu schieben.
Und weil viele Plugins deine Website extrem verlangsamen, habe ich hier meine 1. Wahl für die Optimierung deiner WordPress Website:
WP Rocket
Wenn du die Ladezeiten deiner Website ernst nimmst, führt an WP Rocket kein Weg vorbei.
Bei WP Rocket handelt es sich um ein Caching Plugin, dass deine Website nicht nur optimal zwischenspeichert, sondern auch noch viele weitere Aufgaben erledigt.
Der größte Vorteil im Vergleich zu den ganzen anderen Plugins auf dem Markt ist aber das Handling. WP Rocket ist innerhalb weniger Minuten auch von einem Laien installiert und konfiguriert. Zusätzlich lässt es dem Profi aber noch genug Raum für Optimierungsspielereien.
Die Auswirkungen auf den Google PageSpeed Insights Score sind beeindruckend.
Hier ein kurzer Funktionsüberblick von WP Rocket:
- Page Caching auf deinem Server
Schnellere Ladezeiten, weil der Server nicht erst rechnen muss um auszuliefern. - Browser Caching im Browser des Besuchers
Einige Ressourcen werden im Browser des Besuchers gespeichert um auch hier die Rechenzeit zu verkürzen. - Datenbank Optimierung
Mit der Zeit füllt sich deine Datenbank mit nicht-benötigten Einträgen, was sie langsam und träge macht. Das Plugin optimiert die Datenbank nach einem festen Zeitplan. - Lazy Load
Inhalte und Bilder, die beim Besuch der Seite nicht sichtbar sind, werden erst beim Scrollen geladen. Da der Besucher nicht gleich die ganze Seite lädt, verringert sich die Ladezeit merklich. - Minimierung von CSS, HTML und Javascript
WP Rocket minimiert die oben genannten Dateitypen nahezu vollautomatisch für dich. Wann immer du eine Änderung an einer Datei vornehmen musst, musst du dich um die Komprimierung nicht mehr kümmern. Warum du das für JavaScript ausschalten solltest, habe ich oben schon erklärt. - Einfache Einbindung in ein CDN
WP Rocket unterstützt die einfache Einbindung in Content Delivery Networks wie CloudFlare. Damit wird das Thema CDN selbsterklärend.
Mehr will man eigentlich nicht, oder? Wenn du dich über die zahlreichen Funktionen von WP Rocket schlau machen möchtest, empfehle ich dir diese Seite.
Google PageSpeed Alternative
Die Google Lighthouse Chrome Extension
Google Lighthouse empfehle ich mittlerweile eigentlich lieber als die normalen PageSpeed Insights.
Bei der Google Lighthouse Chrome Extension handelt es sich um ein Browser Plugin für Chrome, mit dem du nicht nur die Ladezeiten, sondern die komplette Performance deiner Website prüfen kannst.
Das Tool ist schnell installiert und spuckt wesentlich mehr Werte aus, die nicht nur für deine Ladezeiten interessant sind:
- Ein umfassender Ladezeiten-Check, der dir alle Schwachstellen aufzeigt.
- Eine Überprüfung der Zugänglichkeit (Accessibility) deiner Website. Wie gut können Besucher deine Website aufrufen, wo sind Fallstricke?
- Technische und sicherheitsrelevante Probleme deckt die Google Lighthouse Chrome Extension ebenfalls ab.
- Und natürlich wird auch dein SEO bewertet. Wie gut ist die Seite optimiert, wo gibt es Überarbeitungsbedarf?
Hervorragender Artikel. Ein informativer Artikel. Die Google-Schriftarten mit der Verbindung von GDPR sind für mich etwas Neues. Aber dank dir, dass ich das gelernt habe.