Damit eine Website unter den Top-Positionen bei Google angezeigt wird, ist heute großes
Fachwissen und Erfahrung in der Marketing-Disziplin SEO nötig. Abkürzungen oder "Cheat-Codes"
gibt es heute nicht mehr, vielmehr sind gute Rankings das Ergebnis zahlreicher sinnvoll
abgestimmter Einzelmaßnahmen. Allerdings gibt es Aspekte, die wir als Grundvoraussetzungen
einstufen und für fundamental wichtig halten. Wir erläutern daher für Sie in zwei Artikeln diese
Basis-Bausteine für gutes Ranking und geben Ihnen Beispiele an die Hand, damit Sie diese bei
Ihrer eigenen Website sofort überprüfen können.
In diesem Teil besprechen wir die Faktoren Mobile Friendliness und Ladezeiten, im nächsten Teil
dann die Faktoren Content und interne Verlinkung.
Wer sich in der Vergangenheit mit dem Thema Suchmaschinenoptimierung befasst hat weiß, dass eine
Website aus technischer, gestalterischer und inhaltlicher Sicht bestimmte Kriterien erfüllen muss.
Hintergrund und Ziel der Optimierung ist, die Sichtbarkeit dieser Website im Suchindex zu erhöhen.
Dabei legt Google, als Platzhirsch unter den Suchmaschinen, großen Wert auf das Nutzererlebnis.
Zur User Experience gelten aktuell vor allem Themen wie die Ladezeit einer Seite, sicheres Surfen,
die Core Web Vitals sowie die mobile Nutzerfreundlichkeit. Mit dem für Juni 2021 angekündigten Page
Experience-Update hat Google diese Punkte als offizielle Ranking-Faktoren eingeführt.
Worauf es hier genau ankommt und was das für Sie und Ihre Unternehmenswebsite bedeutet, wird im
Folgenden genauer veranschaulicht. Dabei zeigen wir anhand von Beispielen, zu welchen Verbesserungen
diese SEO-Arbeiten an unserer eigenen Unternehmenswebsite geführt haben.
Mobile Friendliness
Das Thema Mobile Friendliness wird heutzutage zu einem immer wichtigeren Optimierungspunkt. Vor
allem Unternehmen, die junge bis mittelalte Nutzer*innen als Zielgruppe ansprechen wollen,
wissen wie extrem die Internetnutzung über Smartphones in den letzten Jahren gestiegen ist. Hier
ist der Schlüssel zum Erfolg die Mobile First Programmierung. Dabei wird eine Seite zuerst für
mobile Geräte erstellt und erst im zweiten Schritt kommen Tablets und Desktopgeräte dazu. Bei
diesem Vorgehen wird von Anfang an ein größerer Fokus auf das mobile Design einer Website
gelegt. Da sich dieser Ansatz nicht überall etabliert hat, wird in vielen Projekten ein
responsives Design gewählt. Das responsive Design könnte somit als ein Art Mittelweg gesehen
werden. Ganz einfach erklärt ist die Struktur der Website dabei so angelegt, dass die
Content-Elemente sich bei größer und kleiner werdendem Seitenformat, verschieben. Das heißt,
wenn zum Beispiel auf einem Desktopformat zwei Elemente nebeneinander platziert sind, rutschen
sie auf der mobilen Variante automatisch untereinander und legen sich auf die volle Breite. So
wird es möglich, dass eine Websiteprogrammierung für alle Geräte gemeinsam erstellt wird.
Responsive Webdesign: Für eine optimale Darstellung ordnen sich
Elemente auf verschiedenen Endgeräten anders an.
Weiterhin sind die Anordnung und Abstände von Elementen auf einem mobilen Gerät gesondert zu
betrachten: Auf mobilen Geräten wird in der Regel der Finger verwendet um Touch-Elemente wie Buttons
zu klicken, während am Desktop eine filigranere Maus verwendet wird. Durch die Verwendung der Finger
benötigen klickbare Elemente mehr Platz, um einen eindeutigen Klick zu ermöglichen. Stellen Sie sich
vor, Sie tippen mit dem Finger auf einen Button und erwischen zusätzlich ein anderes Element, was
eine für Sie nicht nachvollziehbare Aktion auslöst. Solche Situationen lösen schnell ein schlechtes
Nutzererlebnis aus, was sich wiederum auf die Akzeptanz der Website auswirkt.
Das gleiche gilt hier mit der Anpassung von Texten: Auf mobilen Geräten sollte nicht automatisch die
Schrift verkleinert werden, nur weil weniger Platz vorhanden ist. Es muss immer ausgiebig getestet
werden, ob der Text auch gut lesbar ist. Um den Seitenbesuchern ein noch besseres Erlebnis zu
ermöglichen, kann hier noch mit einem scalable Viewport gearbeitet werden. Das heißt, dass Nutzer
bis hin zur 5-Fachen Tiefe oder mehr in die Seite zoomen können, damit zum Beispiel Bilder genauer
angeschaut werden können.
Beispiel für die Einbindung eines Scalable Viewport Tag.
Responsives Webdesign ist besonders wichtig vor dem Hintergrund, dass die Suchmaschine Google seit
diesem Jahr immer weiter darauf verzichtet die Desktop Variante zu analysieren. Im Klartext: für
gute Rankings und die Sichtbarkeit im Suchindex spielt die Auswertung der mobilen Website
eine maßgebliche Rolle.
Auf beiden Bildern sind dieselben Buttons/Links zu
erkennen. Wichtig ist,
dass beide Versionen klickbar und auf mobile mindestens 48px voneinander getrennt sind.
Kurze Ladezeiten
Sind Sie auch schon mal auf einer Website gelandet und die Ladezeiten bei jedem Seitenaufruf waren
so lange, dass Sie die Lust verloren haben weiter auf dieser Seite zu bleiben? Wenn es ihnen wie mir
geht, können Sie nur mit "JA!" antworten. Der durchschnittliche Seitenbesucher verliert bereits nach
wenigen Sekunden das Interesse weiter auf der Website zu verweilen und sucht sich ein neues Ziel.
Deswegen ist es für Websitebetreiber ein klares Muss, die Ladezeiten einer Website so zu optimieren,
dass sie möglichst unter vier Sekunden lädt. Um niedrige Ladezeiten zu erzielen, gibt es mehrere
Ansätze, die im Bereich der Suchmaschinenoptimierung möglich sind.
Bilder optimieren
Die wahrscheinlich einfachste und effektivste Option die Ladezeit einer Website zu verbessern ist
das Optimieren von Bildern. Dabei sollte berücksichtigt werden, dass:
die Bilder sowohl das passende Format haben,
die Größe der Bilder so passend wie möglich an den Einsatzort der Website angepasst werden,
die Bilddateien auf ein Minimum komprimiert werden, damit eine ausreichende Bildqualität
bestehen bleibt.
Da die Größe von Bildern - und somit die zu übertragenden Daten - eine der Hauptursachen ist, wenn
es um lange Ladezeiten geht, empfehlen wir die Nutzung eines modernen Image-Formats, wie WebP.
Das Format wurde schon im Jahre 2010 veröffentlicht und speziell für den Gebrauch im Internet
entwickelt. WebP verspricht eine hohe Komprimierbarkeit mit geringerem Qualitätsverlust. Der Grund,
weshalb das Format schon länger existiert und erst jetzt so wirklich eingesetzt wird, ist , dass die
verschiedenen, auch modernen Internetbrowser bisher nicht alle in der Lage waren das Image-Format
auszuspielen. WebP hat sich erst kürzlich als Standard durchgesetzt. Da immer noch nicht alle
Anbieter denselben Standard haben und vor allem nicht jeder Nutzer seinen Browser und sein
Betriebssystem aktuell hält, ist es wichtig, dass zusätzlich zum WebP-Bild eine Fallbackvariante
existiert. Ein Fallback ist hier eine Alternative zu einem Format wie JPEG, PNG oder GIF, also den
bisher üblichen Formaten, mit denen wirklich jeder Browser umgehen kann.
Beispiel für die Einbindung eines webP mit Fallback Variante in einer Html Datei.
Die Metriken auf den Bildern zeigen eine Verbesserung der Website Performance Werte aufgenommen
mit dem Lighthouse Tool von Google. Nach Verwendung der WebP Formate ist die Performance der
Seite https://capconnect.de/services/seo-sea/ von
84 Punkten auf 88 gestiegen.
Das Thema rund um Bildgrößen ist ein Optimierungsfaktor, der sowohl leicht zu beheben ist und
einen nicht zu unterschätzenden Impact haben kann, wenn es um schnelle Ladezeiten geht. Immer
wieder sehen wir Websites auf denen einzelne Bilder eine Dateigröße von mehreren MB und eine
Höhe und Breite von beispielsweise 5000x5000 Pixel haben. Diese werden in den
Originalabmessungen geladen, jedoch nur sehr viel kleiner dargestellt. So wird schnell klar,
dass in einem Großteil der Fälle über 50%, oft auch 80% oder mehr der Datengröße eingespart
werden können. Findet das Einpflegen solch großer Bilddateien einmal statt, ist davon
auszugehen, dass es kein Einzelfall bleibt. Das Einsparungspotenzial an Ladevolumen kann hier
immense Auswirkungen haben und die Ladezeit um ein Vielfaches verkürzen.
Eine weitere Möglichkeit Zeit einzusparen, ist die Verwendung der Lazy Loading-Methode. Dabei
wird das Laden von Bildern, die erst nach dem Scrollen sichtbar werden, nach hinten verschoben.
Der Vorteil: Dateien die nötig sind, um den ersten sichtbaren Content darzustellen, werden vorab
geladen. Was im Umkehrschluss zu einer höheren Zufriedenheit bei Nutzern führt.
Beispiel für die Einbindung eines Image-Tags mit der Lazy Loading Funktion.
Die Metriken auf den Bildern zeigen eine Verbesserung der Website Performance Werte
aufgenommen mit dem Lighthouse Tool von Google. Nach Verwendung des Lazy Loading Tags ist die
Performance der Seite https://capconnect.de/services/seo-sea/ von
78 Punkten auf 80 gestiegen.
Die Optimierung der Core Web Vitals
Die Core Web Vitals sind einer der größten Faktoren, die im Google Page Experience Update
vorgestellt wurden und sollten daher bei der Optimierung der Website nicht zu kurz kommen.
Zusammenfassend dienen sie der verbesserten Nutzerfahrung bei der ersten Interaktion einer Website
und lassen sich in drei Hauptthemen untergliedern:
Core Web Vitals Übersicht
Largest Contentful Paint (LCP)
Der Largest Contentful Paint bezeichnet das größte Element, das beim Seitenladen auf dem Bildschirm
erscheint. In vielen Fällen ist das ein Bild oder Einleitungstext. Dabei ist wichtig, dass dieses
Element so schnell wie möglich lädt und somit für den Nutzer sichtbar wird. Der Seitenbesucher soll
so schnell wie möglich einen Großteil des Bildschirminhalts sehen und so das Gefühl bekommen,
schnell an Ergebnisse zu gelangen.
Hier spielt ebenfalls die Ladezeit eine große Rolle. Je schneller das Element lädt, desto
zufriedener ist der Websitebesucher. Eine Möglichkeit den Ladevorgang zu verändern ist die Preload Funktion, die in
den Header der Website eingebaut werden kann. Der Browser bekommt so die Anweisung, ein bestimmtes
Element wie ein Bild, eine Schriftart oder eine wichtige Datei vorzuladen und dabei die
Ladereihenfolge der Dateien und Elemente zu beeinflussen.
Beispiel für die Einbindung einer Preload Funktion einer Schriftart.
Die Metriken auf den Bildern zeigen eine Verbesserung der Website Performance Werte aufgenommen mit
dem Lighthouse Tool von Google. Nach Verwendung der Preload Funktion ist die Performance der Seite
https://capconnect.de/services/seo-sea/
von 81 Punkten auf 85 gestiegen. Zudem ist zu sehen, dass sich der Wert Largest Contentful Paint von
3.8 s auf 3.3 s verbessert hat.
First Input Delay (FIP)
Beim First Input Delay, zu deutsch erste Eingangsverzögerung, spielen zwei Faktoren eine maßgebliche
Rolle. Wieder einmal ist hier die Ladezeit ein wichtiges Kriterium sowie die Interaktivität und
damit Reaktionsfähigkeit der Website. Je niedriger die Eingangsverzögerung, desto schneller kann ein
Websitebesucher die Seite in vollem Umfang nutzen. Ein erster gelungener Eindruck schafft eine
solide Basis, bei der die Website den Zweck und Nutzen erbringen kann, für den sie erstellt wurde.
Cumulative Layout Shift (CLS)
Wie der Name Cumulative Layout Shift bereits beschreibt, geht es hier um bereits sichtbare Elemente
auf einer Website, deren Positionen im Layout verändert werden. Hatten Sie vielleicht ebenfalls ein
Erlebnis, dass Sie eine Website besucht haben und als Sie dachten die Website ist fertig geladen,
poppte plötzlich eine Werbebanner auf und hat sich zwischen zwei bereits sichtbare Elemente
geschoben? Solch ein Szenario nervt viele Internetnutzer und führt gelegentlich dazu, dass eine
Interaktion mit der Website zu einem falschen Klick und unerwünschtem Ergebnis führt. Mit Beheben
des Cumulative Layout Shifts werden verärgerte Nutzer vermieden und das Potenzial auf zufriedene
Wiederkehrer erhöht.
Um einen Layout Shift zu verhindern ist es im ersten Schritt sinnvoll herauszufinden, um welche
Elemente es sich handelt. Google Lighthouse kann hier Aufschlüsse geben. Die sich ändernde Position
kann verschiedene Ursachen haben, ein erstes Indiz sind die Höhen- und Breitenangaben der Elemente.
Gerade bei Bildern fehlen diese oft und der Browser weiß in dem Moment nicht, wieviel Platz das Bild
innerhalb des Viewports einnehmen wird. Werden klare Angaben über Größe und Breite gegeben, kann der
Browser den nötigen Platz freihalten und den Rest der Elemente korrekt platzieren.
Eine weitere häufige Ursache für einen Layout Shift kann sein, dass eine Datei, die wichtige
Informationen über die Breite, Höhe und Position des Elements enthalt, zu spät geladen wird.
Beispiel für einen Cumulative Layout Shift und wie es ohne aussehen sollte.
Der CLS wird sichtbar, wenn beim Laden ein bereits sichtbares Element von seiner Position springt
beziehungsweise verschoben wird.
Komprimieren von CSS und JavaScript Dateien
Ein weiterer wichtiger Faktor ist die Reihenfolge und Anzahl der Dateien, die bei einem
Websiteaufbau benötigt werden. Für jede weitere Datei, die geladen wird, wird eine neue Anfrage an
den Server gestellt. Jede weitere Datei beeinflusst wiederum die Ladezeit einer Website. Daher ist
es sinnvoll CSS und JS Dateien zu bündeln und als jeweils eine große Datei zu laden. Ist eine
Website sehr groß und enthält dadurch eine Vielzahl von CSS und JavaScript Dateien, kann es auch
ausreichen, diese zu einigen wenigen Dateien zusammenzuführen. Ist die Dateigröße nämlich zu groß,
ist es ebenso negativ wie im Fall von zu vielen einzelnen Dateien. Zudem kann die Dateigröße
weiter minimiert werden, indem Leerzeichen, Kommentare und unnötiger Code entfernt werden.
Damit sind wir am Ende des ersten Teils dieser Serie angelangt und hoffen, sie konnten schon erste
Ansätze zur Überprüfung ihrer eigenen Website mitnehmen. Im zweiten Teil stellen wir Ihnen Beispiele
zu den Aspekten Inhalt und interne Verlinkung vor.
Capconnect
In unserem Blog schreiben wir zu Themen, die für den Mittelstand relevant sind,
um von der Digitalen Transformation zu profitieren. Als professioneller Partner für
die Digitalisierung beraten wir unsere Kunden strategisch, zukunftsorientiert und fair.
Unsere Lösungen sind innovativ und von tiefem technischen Verständnis geprägt, wobei
die Bedürfnisse der Endkunden immer im Mittelpunkt unseres Tuns stehen.
