Zurück zur Blogübersicht

SEO Best Practices 2021 - Teil 1

von Elena Falter | 10. Juni 2021 | Online Marketing



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.

verschiedene-bildschirme-responsive

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.


<metaname="viewport" content="width=device-width, initial-scale=1">

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.


buttons-mobile-desktop

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.


<picture>
  <source srcset='images/Entwicklung/CMS.webp' type="image/webp">
  <source srcset='images/Entwicklung/CMS.jpg' type="image/jpg">
  <img class="image-height image-left img-responsive" src="images/Entwicklung/CMS.jpg" alt="content-management-systeme" title="content-management-systeme">
</picture>

Beispiel für die Einbindung eines webP mit Fallback Variante in einer Html Datei.


google-lighthouse-webp-verbesserung-vorher
google-lighthouse-webp-verbesserung-nachher

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.



<img src="'images/Entwicklung/CMS.jpg“ alt="Entwicklung" loading="lazy">

Beispiel für die Einbindung eines Image-Tags mit der Lazy Loading Funktion.


google-lighthouse-lazyloading-verbesserung-vorher
google-lighthouse-webp-verbesserung-nachher

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

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.



<link rel="preload" href="/images/Entwicklung/Hero_mobil.webp" as="image" type="image/webp" media="(max-width: 575px)">

Beispiel für die Einbindung einer Preload Funktion eines Bildes.


<link rel="preload" href="/assets/MyFontsWebfontsKit/webfonts/3AECA5_C_0.woff2" as="font" type="font/woff2" crossorigin>

Beispiel für die Einbindung einer Preload Funktion einer Schriftart.


google-lighthouse-preload-verbesserung-nachher
google-lighthouse-webp-verbesserung-vorher

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.  


CLS_Animation_v2

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.