...oder auch: wie man Google gefällt. Denn Google funktioniert wie damals die “Stars und Sternchen” aus der Jahrgangsstufe. Jeder kennt sie, jeder möchte mit ihnen befreundet sein, und ist das einmal der Fall, färbt die Beliebtheit wie von selbst auf einen ab. Verscherzt man es sich allerdings mit ihnen, muss man selber sehen, wo man bleibt. Das Rampenlicht übt aber auch Druck auf Google aus, ständig nach Optimierungsmöglichkeiten im Web zu streben. Den Druck gibt Google nun weiter, indem es die Anbieter von Webseiten verpflichtet, die sogenannten Core Web Vitals umzusetzen, andernfalls wird es ab Mai diesen Jahres SEO Abstrafungen geben.

Was die Core Web Vitals überhaupt sind, worauf sie abzielen und wie man dabei gut abschneiden kann, erfährst du in diesem Artikel.

‍

Core Web Vitals als Qualitätsmerkmal

Core Web Vitals ermöglichen es Google, das Benutzererlebnis von Webseiten einheitlich zu bewerten. Dazu sollte man vor allem mit dem Ladevorgang, der Interaktivität und der visuellen Stabilität einer Seite glänzen. Oder, um die Bewertungskriterien im Google-Jargon zu nennen: Largest Contentful Paint, First Input Delay und Cumulative Layout Shift.

‍

‍

‍

‍

‍

Largest Contentful Paint

Hier geht es um das größte Layout Element, das beim Laden der Seite im Viewport sichtbar wird. Je schneller dieses rendert, desto besser.

‍

First Input Delay

First Input Delay misst, ab wann eine Seite interaktiv wird. Auch hier ist eine schnellere Nutzung von Eingabe-Elementen (also z.B. das Klicken von Buttons oder das Ausfüllen von Forms) erwünscht.

‍

Cumulative Layout Shift

Im letzten Kriterium geht es darauf aufbauend darum, dass diese Eingabe-Elemente einen fixen Platz auf der Seite haben sollten, damit der Nutzer nicht aus Versehen etwas falsches anklickt, wenn die Elemente durch verzögertes Laden wild auf der Seite herumspringen. Wo kämen wir denn dahin!

Zum Glück ist es oft kein Hexenwerk, ein gutes Verhalten an den Tag zu legen, sodass man gemocht wird. Hier sind ein paar Tipps, die dabei helfen können, dass du auch weiterhin einen guten Google Score erhältst.

‍

Tipps für einen guten Google Score

Stay hydrated

Es gibt die Optionen des client- und des serverseitigen Renderns.

Beim clientseitigen Rendern leitest du die Anfrage auf eine einzelne HTML-Datei um, und der Server liefert sie ohne Inhalt bzw. mit einem Ladebildschirm, bis du das gesamte JavaScript abrufen und den Browser alles kompilieren lassen kannst, bevor er den Inhalt rendert. Wenn du jetzt auf den Link der Seite klicken würdest, um weitere Inhalte zu laden, wird der Browser keine weitere Anfrage an den Server stellen. JavaScript wird verwendet, um den neuen Inhalt anzuzeigen, der bereits als verborgener Layer vorhanden ist. Das ist viel schneller, da du dabei nur einen sehr kleinen Teil der Seite neu lädst, anstatt die gesamte Seite zu laden. Allerdings wird deine Website nicht angezeigt, bis das gesamte JavaScript in den Browser heruntergeladen wurde. Das ist notwendig, da Javascript erst funktioniert, sobald der gesamte Inhalt vorhanden ist. Bei einer schlechten Internetverbindung verlängert es aber die anfängliche Ladezeit.

Beim serverseitigen Rendern erstellst du eine Webseite, beispielsweise mit PHP, der Server kompiliert alles, beinhaltet die Daten und liefert eine vollständig ausgefüllte HTML-Seite an den Client. Das ist zwar schnell und effektiv, aber jedes Mal, wenn du zu einer neuen URL navigierst, muss der Server die ganze Arbeit noch einmal machen, und auch das dauert. Eine neue Technik namens Hydration soll Abhilfe verschaffen. Normal lädt die Seite wie ein Wasserfall alle Elemente rein, egal ob Serverside oder Client Side Framework, aber mit Hydration werden Elemente erst mal statisch gerendert, um sie anschließend mit Dynamik (via JavaScript) zu füllen, z.B. on hover. Je nach Anwendung und Absicht gibt es verschiedene Stufen der Hydration. Dabei muss man abwägen, ob einem eine schnellere Gesamtladezeit oder der First Input Delay wichtiger ist.

‍

Halte deine Webseite schlank

Und damit auch das ganze Gepäck, das du mitbringst. Oft sind es die hochauflösenden Bilder, die deine Webseite verlangsamen. Dabei musst du gar nicht auf sie verzichten. Stattdessen gibt es viele Möglichkeiten, hier Ballast abzuwerfen. Anhand von bestimmten Online Tools lässt sich das ganz einfach analysieren, und mit vielen Weiteren kann man die Bilder komprimieren. Desweiteren lassen sich im Code Attribute wie loading="eager" oder loading=„lazy“ mitgeben, um den Inhalt zu priorisieren. Asynchrones Laden kann eine weitere hilfreiche Option sein.

‍

Halte dich an Best Practices

HTML, JavaScript, CSS, überall gibt es Hacks für Optimierung. Links im Vorhinein laden (preload), unwichtigen DOM Inhalt erst später laden. Feste Platzhalter für Inhalt bestimmter Größe vorsehen, um Layout Shifts zu vermeiden. CSS gesplittet laden, Stylesheets im Code recht weit unten einbetten, Fonts vorladen und dabei nicht vergessen, den Teil der für Cumulative Layout Shift verantwortlich ist, bereits ganz zu Beginn zu laden. Den Code in Module unterteilen, um alles zu seiner Zeit laden zu lassen und Stau zu vermeiden. Viele moderne Frameworks laden bereits zu diesen Herangehensweisen ein, man muss sie nur nutzen.

‍

Zusammenfassend

Das klingt sehr danach, als ob es nur den einen Weg nach Oben gibt, indem man so ist, wie alle anderen. Aber letzten Endes geht es ja doch um den Charakter des Individuums. Denn Google hilft deiner einzigartigen Seite nur, deine Inhalte sichtbar zu machen.