100er Google Lighthouse Score Case Study

Die User Experience auf Webseiten wird immer wichtiger: Du kannst gleich doppelt profitieren von einem besseren Ranking in den Suchergebnissen und einer langfristig gesteigerten Conversion Rate. Tools wie Google Lighthouse und PageSpeed Insights helfen dir dabei, die Qualität deiner Homepage zu verbessern. Erfahre in dieser Case Study wie wir es geschafft haben, den 100er Lighthouse Score für mobile Endgeräte zu knacken.

Die Ladegeschwindigkeit (PageSpeed) ist ein wichtiger Faktor, um die Conversion Rate deiner Homepage zu beeinflussen: Studien zeigen, dass ca. 65% der Kunden ihren Kaufvorgang abbrechen, wenn die Homepage nicht innerhalb von 3 Sekunden lädt.[1] Bereits 2006 hat Amazon eine Studie mit der Kernaussage veröffentlicht: „Every 100 ms delay cost 1% of sales”.[2]

Zusammengefasst: Speed matters!

Dabei ist es unabhängig, ob es sich bei deiner Homepage um einen Online-Shop, Landingpage für ein Produkt / Dienstleistung oder ein Kontaktformular handelt. Die Ladegeschwindigkeit deiner Seite ist ein wichtiger Faktor für die User Experience und auch für Vertrauen.

Die Bedeutung der PageExperience & PageSpeed für Suchmaschinen

Bereits im Mai 2020 hat Google angekündigt[3], die Page Experience als einen weiteren Rankingfaktor zu verwenden. Google misst hierzu die „Core Web Vitals“ – Faktoren die salopp gesagt Kunden bei dem Besuch deiner Seite stören:

  • Loading – Largest Content Paint (LCP)
    Die Dauer bis das größte Bild oder Textblock auf der Seite im Sichtbereich angezeigt wird. Typischerweise sind das die Elemente, die du als Erstes siehst, wenn du eine Homepage besuchst.
  • Interactivity – First Input Delay (FID)
    Die Dauer bis die Seite einen „sinnvollen Inhalt“ anzeigt (LCP) und auf eine Benutzer-Interaktion innerhalb von 50 ms reagiert.
  • Visual Stability – Comulative Layout Shift (CLS)
    Die Ansicht der Homepage verschiebt sich plötzlich, weil einzelne Elemente nachgeladen wurden – super frustrierend.

Wie du den PageSpeed deiner Seite testen kannst

Wenn du deine eigene Seite testen möchtest, kannst du Google PageSpeed Insights oder Google Lighthouse im Chrome Browser verwenden. Die Werte werden nach jedem Test etwas schwanken, das ist normal. Wichtig: Führe die Tests in einem neuen Inkognito-Fenster aus, damit die Add-Ons deines Browser das Ergebnis nicht beeinflussen.

Die Challenge: Der 100er Google Lighthouse Score

Einen 100er Score – sowohl bei Google Page Speed als auch bei Lighthouse zu bekommen ist gar nicht so einfach. Wenn du schon einmal versucht hast auf einen Score über 90 zu kommen, wirst du das sicher bestätigen können. Aussagen wie „100er Score geht gar nicht“ oder „Auf meinem Handy lädt es schnell genug – was interessiert mich der Score?“ kann ich nur entgegnen: Ich denke Google misst den PageSpeed nicht ohne Grund …

Die Herausforderung lag also darin eine Homepage zu entwickeln, die den 100er Score im mobilen Lighthouse Test knackt. Hierzu habe ich mich mit Chris von Cansmith zusammengesetzt, um nicht nur eine schnelle, sondern auch eine optisch gelungene Homepage hochzuziehen. Das Ergebnis unserer Kooperation ist übrigens die Seite, auf der du gerade bist: „seo-analytica.de“.

Die Umsetzung – Schritt für Schritt

Als Grundlage verwendeten wir WordPress. Mit ca. 27 Millionen Live-Websites ist es das meist genutzte CMS[4] und somit auf jeden Fall repräsentativ für den Versuch. Die Seite sollte neben einem modernen Designs über normale Funktionalität verfügen: Ein Kontaktformular, das etwas mehr kann als Namen und E-Mail Adresse zu verarbeiten sowie einige Grafiken und Bilder, animierte Buttons und paar Schatteneffekte.

Mit folgenden Schritten erreichten wir bereits einen 90er Score:

  1. Wahl des richtigen Hosters
    Es muss nicht gleich der teuerste Anbieter sein. Jedoch unterscheiden sich viele Anbieter sehr in der Performance und den Kosten. Hier findet ihr eine gute Übersicht.
  2. Verwenden eines „sauber“ entwickelten Themes
    Bevor ihr euch für ein Theme entscheidet und dieses kauft, testet es mit Google PageSpeed Insights und überprüft die Ergebnisse. Bilder lassen sich oftmals optimieren, ungenutzte JavaScripts und CSS meistens nicht. Die Verwendung von Page Buildern sehe ich hier eher kritisch, da sie sich meist negativ auf die Ladezeit und somit auf das PageSpeed Ergebnis auswirken.
  3. Reduzierung auf wirklich notwendige Plug-ins
    Das tolle an WordPress ist, dass du die Funktionalität durch Plug-ins erweitern kannst. Du möchtest einen Slider in deinem Header? – Plug-in! Du benötigst einen nicen Effekt in deiner Galerie? – Plug-in!
    Ja, Plug-ins sind toll, erhöhen aber die Ladezeit deiner Seite und machen dir später deutlich mehr Sorgen bei der Wartung. Überlege, welche Plug-ins du wirklich brauchst und was du eventuell selbst mit HTML & CSS lösen kannst.
  4. Animationen und Effekte via CSS anstatt JavaScript
    Mittlerweile lassen sich Effekte für Buttons und „Bildbearbeitung“ mit sehr wenig CSS lösen. JavaScript ist per se nicht schlimm. Wenn es jedoch unnötig groß und zusätzlich von externen Server geladen werden muss, wird es zu einer echten Geschwindigkeitsbremse.
  5. Bereitstellen von Bildern im WebP-Format und mit LazyLoad
    Du solltest Bilder in modernen Formaten wie WebP und mit LazyLoad (das Bild wird erst geladen, wenn es im sichtbaren Bereich ist) einbinden. Diese Optimierung ist mein absoluter Geheimtipp, um den PageSpeed anzuheben. Ein Plug-in mit dem ich gerne arbeite ist EWWW.

Um den 100er Score zu knacken, wurde es etwas kniffeliger:

  1. Nutzung lokal gehosteter Fonts
    Die meisten Homepages verwenden Google Fonts. Damit diese bei dem Besucher angezeigt werden, müssen diese vorab vom Google-Server geladen werden. Je mehr unterschiedliche Fonts du hast, desto länger dauert das. Und es vergehen jedes Mal einige Millisekunden bis sich dein Browser mit den zusätzlichen Servern verbindet. Die Lösung: Verwende möglichst wenig unterschiedliche Fonts und Hoste diese auf deinem eigenen Server.
  2. Prefetch“ & „Preconnect“ für Ressourcen von externen Servern
    Das Verbinden mit anderen Servern ist also ein Bereich, der optimiert werden sollte. Kannst du Ressourcen nicht lokal auf dem eigenen Server hosten, solltest du sie soweit möglich mittels preconnect/prefetch-Tag einbinden.
  3. Optimieren der Skripte & CSS und das Cachen der Seite
    Skripte und CSS beinhalten in der Regel neben dem eigentlichen Code jede menge Zeichen (Leerzeichen, Umbrüche und Kommentare), die es dem Entwickler einfacher machen ihn zu schreiben und zu lesen. Mit Plug-ins oder Tools können diese – für den Server irrelevanten – Zeichen entfernt werden. Durch zusätzliches Cachen der geänderten Seite können so einige Millisekunden an Ladezeit gespart und der PageSpeed erhöht werden. Aus eigener Erfahrung: Hier könnt ihr sehr schnell sehr viel kaputt machen – bitte nicht ohne Backups herumspielen …
  4. Überarbeiten des Designs und des Codes für eine bessere Accessibility und einen höheren SEO Score
    Anhand der Empfehlungen des Lighthouse Tests haben wir uns nochmals dem Design gewidmet: mehr Kontrast zwischen Text und Hintergrund, größeren Abstand zwischen Links und Alternativbeschreibungen aller Bilder .

Das Ergebnis: Der 100er Lighthouse Score

Trotz vieler Bilder auf der Landingpage, einem dynamischen Kontaktformular und dem Tracking haben wir mit der Seite der 100er Lighthouse Score geknackt: in den Bereichen Accessibility, Best Practices und SEO – Mobile und auf dem Desktop.

Lighthouse Score 100 Mobile
Erreichen des 100er Lighthouse Scores für die Seite seo-analytica.de für mobile Endgeräte. Der Test wurde in einem neuen Inkognito-Fenster im Browser Chrome durchgeführt.

Fazit

Den 100er Score zu knacken, ist nicht unmöglich wie diese Case Study zeigt. Den überwiegenden Vorteil sehe ich jedoch an einer viel wichtigeren Stelle: Du hast die Möglichkeit deinen Besuchern eine bessere User Experience zu bieten. Den Besuch in deinem Online-Shop oder auf deiner Landingpage als positives Erlebnis zu gestalten und somit langfristig den Mehrwert für deine Kunden sowie deine Conversion Rate zu steigern.

Welche Erfahrungen hast du bereits bei der Optimierung deiner Homepage gemacht und was waren dabei die größten Hürden für dich? Ich freue mich auf deine Kommentare!

Quellen:

Über den Autor

Fabian Schröder ist Gründer von SEO Analytica. Als Blogger, Lean-Startup Enthusiast und studierter Ingenieur unterstützt er Start-ups und KMUs der Tech-Branche. Neben SEO ist sein Steckenpferd die datengetriebene Entscheidungsfindung, um den Kundennutzen stetig zu verbessern. Dabei schaut er ständig über den Tellerrand und erprobt anhand eigener Tests neue Methoden unterschiedlichster Disziplinen.

Schreibe einen Kommentar