Im vorherigen Artikel zur den Google Core Web Vitals Werten habe ich gezeigt, was das genau ist und warum diese Kennzahlen wichtig sind. Heute gehe ich nun in die Praxis und analysiere zwei eigene Blog dahingehend und versuche eine Optimierung dieser wichtigen Werte vorzunehmen.
Dabei zeige ich, welche Tools ich dafür verwende, welche Änderungen ich vornehme und was da am Ende ggf. schon gebracht hat.
Zudem gehe ich darauf ein, warum es auch hier keine gute Idee ist alles blind zu optimieren, was Google ggf. als Fehler anzeigt.
Optimierung der Google Core Web Vitals Werte
Wie im ersten Artikel über die Google Core Web Vitals geschrieben gibt es 3 Werte, die Google mittlerweile zusätzlich analysiert, um einzuschätzen, wie gut eine Website für die Nutzer optimiert ist. Auch wenn es sich bei den Werten um relativ technische Aspekte handelt, wirken sich diese doch sehr auf die Nutzungserfahrung aus.
Neben dem Largest Contentful Paint (die Ladezeit des größten Inhaltselements) und dem First Input Delay (Dauer bis zur ersten Interaktion durch den Nutzer) ist zumindest bei meinen Blogs und Websites vor allem der Cumulative Layout Shift (Designelemente, die sich während oder nach dem Laden der Website noch ändern) ein Problem.
Zumindest zeigt mir die Google Search Console genau das Problem bei einigen Projekten an, während die anderen bei mir so gut wie keine Rolle spielen.
In diesem Artikel optimiere ich 2 größere Blogs von mir, denn zumindest bei mir scheinen die kleineren Websites oft keine Probleme mit den Gooogle Core Web Vitals zu haben. Teilweise gibt es aber auch anscheinend zu wenige Daten bzgl. der Core Web Vitals bei kleinen Websites und die Analyse bleibt hier in der Search Console leer.
Selbständig im Netz Optimierung
Mein immer noch größter Blog ist insgesamt recht gut optimiert und zeigt gute Performance-Werte. Schaue ich mir hier die Google Core Web Vitals an, dann zeigt sich, dass zumindest die Desktop-Version meines Blogs ein kleines Problem hat.
In dem folgenden Screenshot sieht man, dass die mobile Version insgesamt okay ist. Es gibt hin und wieder mal ein Problem mit dem First Input Delay (FID), aber da scheint der Messwert knapp unter der Grenze von 100 ms zu liegen und je nach aktuellen Messwerten mal leicht darüber zu sein.
Die Computer-Version meines Blogs ist allerdings durchgehend rot und das bedeutet Handlungsbedarf. Hier wir für alle Seiten des Blogs ein CLS-Fehler gemeldet. Dieser liegt hier über 0,25, was bedeutet, dass dies auf jeden Fall optimiert werden sollte.
Mit dem Cumulative Layout Shift ist das Problem gemeint, dass sich das Layout während des Ladevorgangs oder danach noch verändert. Das kennt man von vielen Websites, wo man was anklicken will, sich dann aber noch ein Banner öffnet oder ein anderes Element und man klickt dann auf das falsche.
Welche Elemente sich nach dem Laden noch verändern, kann man zum einen herausfinden, in dem man einfach mal genauer hinschaut. Welche Elemente verändern sich nach dem Laden noch. Am PC ist aber durch DSL meist schlecht erkennbar, da es sehr schnell geht.
Bei meinem Blog gab es in der Vergangenheit vor allem mit der mitscrollenden Navigation Probleme. Die Hauptnavigation wurde beim Herunterscrollen einer Seite oben mit angezeigt und scrollte mit. Das ist für die Nutzer eine nützliche Sache, wie ich finde, aber Google definierte es als Problem. Ich habe diese mitscrollende Nav. deshalb vor einer Weile deaktiviert.
Richtig analysieren kann man CLS-Probleme mit den Google Chrome Entwickler-Tools, die man unter den drei Punkten oben rechts und dort dann bei „Weitere Tools > Entwicklertools“ findet. Dann geht man auf „Elements“ und dann weiter unten auf „Rendering“. Dort kann man einen Haken bei „Layout Shift Regions“ klicken.
Lädt man die Seite dann neu, werden CLS-Regionen blau hinterlegt angezeigt. Bei meinem Blog Selbständig im Netz wurde der komplette innere Content-Teil samt Header blau markiert. Das war schon komisch, zumal ich die mitscrollende Navigation, wie schon gesagt, vor einer Weile deaktiviert habe. Daran scheint es also nicht zu liegen.
Um Veränderung am Layout noch besser zu erkennen, drosselt man die Internet-Geschwindigkeit am besten künstlich. Das ist in den Entwicklertools unter „Network“ möglich, wo man „Fast 3G“ auswählt.
Zu guter Letzt startet man die Aufnahme der Screenshots während des Ladens durch einen Klick auf den Kreispfeil-Button unter „Performance“. Dadurch wird die Seite neu geladen und es werden Screenshots gemacht:
Hier zeigt sich ein Problem, nämlich bei der Navigation. Ich nutze einen lokal auf dem Server gespeicherten Google Font für die Navigation, der bei der normalen Nutzung schnell geladen wird, aber bei langsameren Internet ein Problem ist. Denn zuerst werden die Navigations-Punkte in einer anderen Schrittart (Arial) angezeigt.
Nach einer Weile, wenn dann der Google Font komplett geladen wurde, verändert sich die Schrift der Navigation dann so, wie sie sein soll. Das führt in meinem Fall dazu, dass die Nav. erstmal zweizeilig wird, bevor der schmalere Google Font dann die Nav. korrekt anzeigt.
Ich habe hier einige Dinge ausprobiert und immer wieder mit den Entwickler-Tools von Chrome getestet, was das bewirkt.
Ich habe im Header einen Preload-Befehl eingebaut, der meinen Google Font in den verschiedenen Versionen vorlädt. Hier ein Beispiel:
<link rel="preload" as="font" href="/fonts/fjalla-one-v5-latin-regular.woff2" type="font/woff2" crossorigin="anonymous">
Zudem habe ich im CSS-Befehl für das Laden des lokalen Google-Fonts noch den Befehl
font-display: block;
eingebaut. Das sorgt dafür, dass der Text im Browser erst dann angezeigt wird, wenn der dafür vorgesehene Font wirklich geladen wurde. Andernfalls wird eben erstmal Arial genutzt und der Text angezeigt, bevor es dann einen Wechsel auf den richtigen Font gibt. Das ist ein häufiger Grund für CLS-Fehler.
Das Ergebnis ist, dass das Tool nach einem CLS-Wert von 0,355 danach keine CLS-Fehler mehr feststellt.
Auch die Screenshots aus dem Chrome Entwicklertools Test sehen besser aus. Hier wird keine Veränderung der Navigation mehr angezeigt:
Damit sollte auf Selbstständig im Netz das CLS-Problem behoben worden sein.
Abenteuer Brettspiele Optimierung
Auf Abenteuer-Brettspiele.de gibt es bei der mobile Version zu optimierende Elemente bzgl. CLS (orange), während die Desktop-Version kritische CLS-Fehler (rot) anzeigt.
Auch hier habe ich mir im Chrome angeschaut, wo das Problem liegen kann und welche Elemente blau markiert werden.
Zum einen ist es der Header, der sich zwar von der Größe her nicht verändert beim Scrollen, aber das Hintergrundbild im Header verschiebt sich beim Scrollen, was ein hübscher Effekt ist, aber Google wohl stört. Ich habe diesen Effekt deaktiviert, indem ich den JavaScript-Code dafür entfernt habe.
Zudem habe ich hier eine mitscrollende Hauptnavigation, die ebenfalls ein netter Effekt ist, aber Google wohl ebenfalls nicht gefällt. Ich habe die mitscrollende Navigation deshalb raus genommen, indem ich das Plugin myStickymenu deaktiviert habe.
Ebenfalls fällt auf, dass beim Herunterscrollen der Content ebenfalls komplett blau angezeigt wird. Hier habe ich als Ursache die Lazy Load Einstellung des Plugins a3 Lazy Load ausgemacht, die dafür sorgt, dass Bilder nachgeladen werden, wobei der Platzhalter beim Laden aber größer als das Bild selbst ist. Das sorgt für einen Cumulative Layout Shift im gesamten Content.
Da WordPress Lazy Loading nun aber auch von Hause mitbringt, habe ich das Plugin ebenfalls deaktiviert.
Die Google Search Console zeigt bei den Core Web Vitals der Computer-Ansicht nach der Optimierung nun schon eine Verbesserung, aber ich werde hier noch weiter daran arbeiten.
Performance vs. Nutzungserlebnis
Die Core Web Vitals wurden von Google natürlich nicht ohne Grund mit in die Website Analyse der Search Console und damit auch in die Rankings aufgenommen. Zu lange Ladezeiten, „springende“ Website-Elemente und so weiter nerven einfach und sollten deshalb behoben werden.
Doch wie immer bei Optimierungen (ähnlich wie bei SEO) stellt sich auch hier die Frage, wie sehr sollte man die Werte optimieren und sollte man nur auf die Zahlen schauen. Nicht alles, was Google als Problem bzgl. der Core Web Vitals anzeigt, ist meiner Meinung nach wirklich ein Problem.
So ist der leicht scollende Hintergrund im Header meines Brettspiel-Blogs und auch die mitscrollende Hauptnavigation ja kein Fehler oder stört. Im Gegenteil, die Hauptnavigation immer nutzen zu können, wissen sicher viele Nutzer zu schätzen.
Ich habe diese Dinge zwar nun erstmal rausgenommen, bin mir allerdings nicht sicher, ob das auf Dauer so bleibt. Ich werde die Core Web Vitals Beurteilung in der Search Console weiter beobachten und schauen, was die Auswirkungen meiner Optimierung sind. Zudem werde ich beobachten, welche Auswirkungen auf die Seitenaufrufe etc. die Entfernung der mitscrollenden Nav. hat. Ich würde nicht ausschließen, dass ich diese später wieder aktiviere.
Andere Probleme, wie der Font-Wechsel in der Hauptnavigation von Selbständig im Netz, müssen aber behoben werden, da das einfach nervige Webdesign-Fehler sind. Dabei zeigt sich, dass es natürlich interessant ist, wenn man das eigene Theme anpasst, also z.B. die Fonts manuell ändert. Allerdings kann das eben Auswirkungen auf das Webdesign haben, mit denen man nicht rechnet.
Wer also CSS und HTML nicht wirklich gut beherrscht, der sollte sich lieber ein Theme suchen, welches den eigenen Vorstellungen schon sehr gut entspricht und wo Layout-Änderungen durch vorhandene Einstellungen im Backend möglich sind. Zudem sollte das Theme natürlich auch beim Test bzgl. der Google Core Web Vitals gut abschneiden.
Ich werde nun nach und nach meine weiteren Blogs und Websites dahingehend analysieren und schauen, welche Probleme es dort vor allem hinsichtlich des Cumulative Layout Shift und der anderen Core Web Vitals Werte gibt.
Fazit
Eine Website schön und schnell zu machen reicht heute nicht mehr aus. Google analysiert immer stärker, wie Websites bei den Nutzern ankommen und welche Probleme es bei der Benutzung ggf. gibt.
Die Google Core Web Vitals sind sehr hilfreiche Werte, die auf grundsätzliche Probleme bei Websites hinweisen und wie man vor allem an meiner Optimierung dieses Blogs hier sieht, gab es da ein paar Probleme, auf die ich ohne die Google-Werte wohl nicht aufmerksam geworden wäre.
Habt ihr euch die Google Core Web Vitals eurer Website schon mal angeschaut und gibt es da Probleme?
Und wenn ja, wie habt ihr diese behoben?