made in Hessen with 💙.

Ei, gude! Als Digitalagentur aus Frankfurt helfen wir Unternehmen mit der Konzeption und Entwicklung von digitalen Produkten wie Apps und Webseiten. Unsere SpezialitÀt ist die technische Umsetzung basierend auf dem aktuellen State of Art.

KFC
Pizza Hut
TeleDoctor24
Coveroo
WeatherBets
Vielseitigkeit gepaart mit Kompetenz

Unsere Leistungen

Unser Ursprung liegt in der professionellen, aber zugleich liebevollen Softwareentwicklung basierend auf dem aktuellen State of Art. Neben der technischen Umsetzung unterstĂŒtzen wir Sie jedoch auch mit einem Full-Service Paket vom Konzept und Design bis hin zum Launch und Debriefing.

Mobile Apps

Unsere Kernkompetenz ist die Entwicklung hochperformanter Cross-Platform Hybrid Apps. Mittels Frameworks wie React Native entwickeln wir nur eine Codebase, können die App aber trotzdem sowohl fĂŒr iOS als auch Android nativ kompilieren.

Webseiten

Egal, ob per universellem Ansatz mittels Content Management System wie WordPress oder technisch ausgereifter Custom Lösung mit Headless CMS und Static Site Generator: Wir verpassen Ihrem Unternehmen einen neuen, digitalen Anschliff.

SEO & Web Vitals

Was bringt eine Webseite, wenn sie nicht auffindbar ist? Nicht viel. Deshalb kĂŒmmern wir uns mit jeder neu erstellten Webseite um eine hervorragende On-Page SEO sowie exzellente Google Web Vital Scores. Damit Google Ihre neu Webseite genauso klasse findet wie Sie.

Web Apps

Vor allem fĂŒr professionelle Anwendungen ist eine Mobile App oft nicht das Richtige, oder soll durch eine Web App ergĂ€nzt werden. Durch moderne Technologien wie React und NextJS können wir Ihnen moderne Web Apps nach Maß schneidern – bei dazugehöriger Mobile App hĂ€ufig auch mit der selben Codebase.

Wie wir tun, was wir tun.

Prozess

Beratung/Konzeption-Symbolbild

Beratung & Konzeption

Jedes gute Produkt beginnt auf der Blaupause. Bei der Konzeption beziehen wir Sie daher so gut ein, wie nur möglich.

Design-Symbolbild

Design

Unsere Designer schaffen in enger Zusammenarbeit mit Ihnen etwas, was Sie und Ihre Kunden den ganzen Tag ansehen könnten.

Architektur-Symbolbild

Architektur

Sobald die Voraussetzungen fĂŒr die technische Implementation geschaffen sind, konzeptionieren wir die optimale Systemarchitektur.

Entwicklung-Symbolbild

Entwicklung

Das Herz unserer Arbeit liegt in der professionellen und liebevollen technischen Umsetzung der Software, basierend auf dem aktuellen State of Art.

Einblicke und Life Hacks

Neueste Blog-EintrÀge

Mann sieht sich PageSpeed Insights Auswertung auf seinem Laptop an
24. JAN

Core Web Vitals: Ein Field Guide fĂŒr 2022

Es ist lĂ€ngst kein Industriegeheimnis mehr, dass Google verschiedene Faktoren fĂŒr das Ranking von Webseiten in ihrer Suche einsetzt und einer davon die Geschwindigkeit der jeweiligen Webseite ist. Doch was genau bedeutet es eigentlich, wenn man ĂŒber die Geschwindigkeit einer Webseite, oder auch den "PageSpeed" dieser, spricht? In diesem Field Guide möchten wir Ihnen einen Einblick in die Web Vitals von Google geben, wie diese zum Ranking in der Suche beitragen und in welchem Maß und auch erste Tipps zur Optimierung der Web Vitals Ihrer Webseite mit auf den Weg geben. ## Was sind Core Web Vitals? Um die Core Web Vitals optimieren zu können, muss man erst einmal verstehen, worum es sich dabei eigentlich genau handelt. ZunĂ€chst: Oft werden "Web Vitals" und "Core Web Vitals" synonym verwendet, teilweise auch in Fachartikeln. Ganz korrekt ist dies jedoch nicht – bei den **Core** Web Vitals handelt es sich um eine Teilmenge der Web Vitals. Die Core Web Vitals bestehen aus nur drei Metriken der eigentlichen Web Vitals, welche laut Google fĂŒr jede Webseite gemessen und optimiert werden sollten. Im weiteren Verlauf dieses Artikels werden wir uns daher selbstverstĂ€ndlich mit diesen Messwerten auseinandersetzen, jedoch auch mit anderen Daten der breiteren Web Vitals, die unserer Ansicht nach mindestens genauso wichtig sind. Aber zurĂŒck zum Ursprung: Bereits seit einiger Zeit stand Google in Verdacht, die Ladegeschwindigkeit einer Webseite als Rankingfaktor zu nehmen. Im Jahr 2021 hat Google dann ein Update fĂŒr ihren Rankingalgorithmus heraus gebracht, in welchem erstmals ganz offiziell von solch einem Faktor die Rede war. Google wollte fortan die Seiten nach "Web Vitals" ranken. Eine Menge an vordefinierten Messwerten, welche die Geschwindigkeit und im engeren Sinn auch die Bedienbarkeit einer jeden Webseite messen, gewichten und auswerten können. Das Prinzip ist einfach zu verstehen: Google hat ein bestimmtes Bild davon, wie eine Webseite aufgebaut zu sein hat. Allerdings können sie den Inhalt und den Aufbau der Webseiten, die in der Suche angezeigt werden, nicht beeinflussen. Sehr wohl aber die Reihenfolge, in welcher sie angezeigt werden. Wenn Sie also planen, auf einen der ToprĂ€nge in der Google-Suche fĂŒr ein heißes Keyword zu kommen, werden Sie an der Optimierung Ihrer Web Vitals nicht vorbei kommen. **In diesem Artikel werden wir uns hauptsĂ€chlich mit den nachfolgenden Web Vitals auseinander setzen:** 1. **Largest Contentful Paint (LCP)**. Diese Core-Metrik wertet aus, wie lang Ihre Webseite benötigt, um das grĂ¶ĂŸte Element im initialen Viewport dieser anzuzeigen. Das "grĂ¶ĂŸte Element" wird dabei mittels verschiedener Faktoren ermittelt. Google stellt jedoch Tools zur VerfĂŒgung, mit welchen sie einsehen können, was der Ansicht von Google nach das grĂ¶ĂŸte Element ist – und wo entsprechend Optimierungsbedarf besteht. 2. **Cumulative Layout Shift (CLS)**. Diese Kennzahl ist ebenfalls in den Core Web Vitals enthalten und lĂ€sst sich leicht an einem Ihnen sicher schon einmal begegneten Beispiel erklĂ€ren: Sie laden eine Webseite, auf der Sie vielleicht schon einmal waren. Sie wissen daher, dass es in der Mitte einen Button gibt, auf welchen Sie drĂŒcken mĂŒssen. Sie versuchen diesen noch wĂ€hrend des Ladevorgangs zu betĂ€tigen – erwischen ihn jedoch einfach nicht, da sich das Layout der Webseite wĂ€hrend des Ladevorgangs noch verschiebt. FĂŒr den Nutzer sehr Ă€rgerlich, weshalb Google dies in die Berechnung des Performance-Scores mit einfließen lĂ€sst. 3. **First Contentful Paint (FCP)**. Dieser Messwert ist zwar nicht in den Core Web Vitals enthalten (sondern nur in der Obermenge Web Vitals), ist unserer Ansicht nach jedoch einer der hĂ€ufigsten Bruchstellen der Performance einer Webseite, weswegen wir uns dieser auch widmen mĂŒssen. Hier wird ausgewertet, wie lange es dauert, bis ĂŒberhaupt irgendwas (soll heißen, etwas fĂŒr den Nutzer sinnvolles) auf der Webseite angezeigt wird. Diese Metrik hĂ€ngt natĂŒrgemĂ€ĂŸ stark vom **Time To First Byte (TTFB)** ab (ebenfalls nicht in den Core Web Vitals enthalten), welchem wir uns auch noch kurz widmen werden. 4. **First Input Delay (FID)**. Diese Metrik ist wieder in den Core Web Vitals enthalten. Sie misst die Zeitspanne, die von der ersten Interaktion des Nutzers mit der Webseite (beispielsweise ein Klick auf einen Link) vergeht, bis es tatsĂ€chlich im Browser zu einer Reaktion auf diese Interaktion kommt. Der FID ist daher die Kernmetrik, die misst, wie responsiv die Webseite auf Nutzerinteraktionen ist. Es gibt innerhalb der Obermenge Web Vitals noch einige Messwerte mehr, welche jedoch einen kleineren Einfluss auf den Score haben, oder aber sehr selten zu Problemen fĂŒhren, weshalb wir uns in diesem Artikel nur auf die oberen vier (bzw. fĂŒnf) Metriken beschrĂ€nken werden. ### Ein paar Randbemerkungen Die obigen Messwerte und ihr Gewicht innerhalb der Berechnung des Performance-Scores sind nicht in Stein gemeißelt. Google aktualisiert ihre Algorithmen regelmĂ€ĂŸig, und so auch die (Core) Web Vitals. Dadurch können sich auch die benötigten Optimierungen immer wieder Ă€ndern. Wenn Sie daher nicht gerade SEO hauptberuflich ausfĂŒhren, kann es schwierig sein, aktuell zu bleiben. Eine Digitalagentur, welche sich mit Core Web Vitals tiefgreifend auseinandergesetzt hat, kann Ihre Webseite nachhaltig optimieren. Bei Kuatsu haben wir bereits **viel Zeit in die Optimierung** von Kundenprojekten als auch unserer eigenen Webseite (mehr dazu gleich!) investiert. Falls Sie also Ihre Zeit lieber in das Voranbringen Ihres Unternehmens stecken und das Optimieren der Core Web Vitals einem professionellen Anbieter ĂŒberlassen möchten, sprechen Sie uns gerne an - wir haben hierfĂŒr [eine Seite mit weiteren Infos zur professionellen Core Web Vitals Optimierung](/web-vitals-optimierung) eingerichtet, auf der wir erklĂ€ren, wie wir Ihnen helfen können. DarĂŒber hinaus sollten Sie beachten, dass Google die Web Vitals immer doppelt berechnet: Einmal fĂŒr MobilgerĂ€te und einmal fĂŒr Desktops. Die Desktop-Scores liegen im Prinzip immer höher als die Mobile-Scores, da Google bei der Berechnung letzterer auch eine kĂŒnstliche Drosselung der Netzwerkgeschwindigkeit auf langsames 4G- oder gar 3G-Niveau vornimmt. Dabei sind die Mobile Scores eigentlich wichtiger als die Desktop Scores: Weltweit kommen laut einer Datenerhebung von StatCounter **bereits mehr als 57% aller Seitenaufrufe von MobilgerĂ€ten** – Tendenz steigend. Die Optimierung Ihrer Webseite sollte daher stets primĂ€r auf MobilgerĂ€te ausgerichtet sein. Auf einem grĂŒnen Desktop-Score sollten Sie sich daher nicht zwangsweise ausruhen. ## Was sind meine Web Vital Scores? Bevor es an die Optimierung geht, sollte man natĂŒrlich erstmal den Status quo analysieren um zu sehen, wo Optimierungen gerade am meisten benötigt werden. Dabei fĂŒhren mehrere Wege nach Rom. ### Google PageSpeed Insights Der einfachste Weg, an den Performance-Score der eigenen Webseite zu kommen, fĂŒhrt ĂŒber die [Google PageSpeed Insights](https://pagespeed.web.dev/). Hier muss nur die URL zur zu prĂŒfenden Seite eingegeben werden, und die Server von Google ĂŒbernehmen die Messung. Hierbei gilt es jedoch zu beachten, dass bei der Messung ĂŒber die PageSpeed Insights nicht nur die aktuelle Messung in einer kontrollierten Umgebung ("Lab Data") in den Score mit einfließt, sondern auch "Field Data". Google bezieht hier also die Erfahrungen von echten Nutzern mit ein, welche Ihre Webseite aufgerufen haben (beispielsweise ĂŒber Google Chrome). Die Web Vitals lassen sich daher auch nicht austricksen, indem man bei einer kontrollierten Messung einfach sĂ€mtliche Bilder und Skripte entfernt. Google bezieht die Daten fĂŒr die Scores auch von echten Sitzungen. Auch sollten Sie beachten, dass bei einer Messung ĂŒber die PageSpeed Insights gegebenenfalls auch Ihr Serverstandort eine entscheidende Rolle spielt. Da die Messung ĂŒber Googles Server erfolgt, kann es sein, dass erst eine sehr lange Verbindung zu Ihrem Server aufgebaut werden muss, was einige Scores natĂŒrlich katastrophal in den Keller ziehen kann. PageSpeed Insights misst von einem aus vier verschiedenen Standorten, basierend auf Ihrem aktuellen Standort: 1. Nordwesten der USA (Oregon) 2. SĂŒdwesten der USA (South Carolina) 3. Europa (Niederlande) 4. Asien (Taiwan) Die Abdeckung ist daher nicht schlecht, aber wenn Ihr Server beispielsweise in Australien steht, kann die Verbindung durchaus einige Zeit in Anspruch nehmen. Selbst aus den Niederlandern zu einem Rechenzentrum in Frankfurt vergeht bereits einige Zeit. Sie sehen also: Sie sollten sich nicht nur auf die PageSpeed Insights verlassen, da die Messung darĂŒber nicht unbedingt die Erfahrungen echter Nutzer widerspiegelt. ### Lighthouse Lighthouse ist ein Open-Source Tool, welches direkt von Google bereitstellt wird, und neben den Web Vitals auch zahlreiche andere wichtige Metriken zu Ihrer Webseite erfasst, unter anderem die Barrierefreiheit oder On-Page SEO. Lighthouse lĂ€uft lokal auf Ihrem Rechner, simuliert jedoch eine kontrollierte Umgebung, in welcher die Messwerte genau genommen werden können. Das Beste daran: Oftmals mĂŒssen Sie dafĂŒr nicht einmal zusĂ€tzliche Software herunterladen, zumindest wenn Sie als Browser Google Chrome verwenden. Lighthouse ist direkt in den "Chrome Dev Tools" integriert, welche Sie per Rechtsklick, einem Klick auf "Untersuchen" im KontextmenĂŒ und der anschließenden Auswahl von "Lighthouse" innerhalb der oberen Toolleiste aufrufen können. Als Beispiel einmal eine Mobile Performance-Messung unserer Webseite mittels Lighthouse ĂŒber die Dev Tools: ![www.kuatsu.dev erreicht laut Lighthouse einen Mobile Performance-Wert von 98.](https://res.cloudinary.com/kuatsu/image/upload/v1643034822/Clean_Shot_2022_01_24_at_15_33_23_2x_95a172c072.jpg) ### Andere Wege Es gibt noch einige andere Wege, die Web Vitals zu messen, unter anderem ĂŒber die Google Search Console. Diese richten sich aber eher an erfahrene SEOs. FĂŒr AnfĂ€nger, die die Performance der eigenen Webseite einschĂ€tzen wollen, eignen sich am besten die oben genannten PageSpeed Insights und Lighthouse. ## Largest Contentful Paint (LCP): Bedeutung und Optimierung Der Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das grĂ¶ĂŸte inhaltliche Element innerhalb des initialen Viewports (also der Bereich, den der Nutzer bei Seitenaufruf sieht) fertig dargestellt ist. Das können beispielsweise große Banner-Bilder sein, große Textblöcke, Videos, Buttons, aber auch eher unscheinbare Elemente. Das grĂ¶ĂŸte, inhaltliche Element auf unserer neuen Webseite ist laut Google beispielsweise das Logo im Navigationsbereich. Aber keine Sorge: Um das jeweilige Element zu finden, ist keine große Schnitzeljagd von Nöten. Sowohl PageSpeed Insights als auch Lighthouse zeigen Ihnen das Element mittels einem Klick auf "LCP" direkt an. Google hat, wie bei jeder Metrik in den Web Vitals, sehr genaue Vorstellungen davon, wie schnell das Laden dieses Elements vonstatten zu gehen hat. Ein guter LCP ist demnach eine Ladezeit von **unter 2,5 Sekunden**, wĂ€hrend alles ĂŒber 4 Sekunden sehr schlecht ist und damit starken Handlungsbedarf hat. Alles dazwischen ist zwar in Ordnung, aber immer noch verbesserungswĂŒrdig. Und hinsichtlich der Gewichtung von 25% dieses Messwerts im Performance-Score sehen wir persönlich generell fĂŒr alle Werte ĂŒber 2,5 Sekunden einen dringenden Optimierungsbedarf. ### Checkliste fĂŒr die LCP-Optimierung Eine grundlegende Optimierung des LCP ist Gott sei Dank relativ einfach erledigt. Manchmal sind jedoch noch mehr tiefgreifende Optimierungen notwendig, um einen wirklich guten LCP-Wert zu erhalten. Die gĂ€ngigsten Methoden zur Optimierung findest du aber hier in unserer Checkliste: - **Verwendung eines Content Delivery Network.** Ist das betroffene Element ein Bild, Video oder eine Ă€hnliche, eingebundene Ressource, ist die naheliegendste Option, die Ladezeit dieser Ressource selbst zu verringern. Eine einfache Möglichkeit, dies zu bewerkstelligen, ist die Bereitstellung dieser Ressource ĂŒber ein Content Delivery Network (CDN). Ein CDN ist ausschließlich darauf optimiert, Ressourcen wie Bilder so schnell wie möglich fĂŒr jeden Nutzer auf dem Globus bereitstellen zu können. DafĂŒr werden verschiedene Load Balancing Techniken eingesetzt. Durch Verbindung all dieser Techniken ergibt sich eine viel schnellere Ladezeit, als wenn die Ressource lokal vom eigenen Server bereitgestellt wird. Auch wird dadurch gleichzeitig Last vom eigenen Server genommen, welche anderswo sicher benötigt wird. Eine beliebte CDN-Lösung, welche auch wir auf unserer Webseite einsetzen, ist [Cloudinary](https://www.cloudinary.com). - **Ressourcen komprimieren und in einem modernen Format bereitstellen**. Oft wirst du ĂŒber diese Empfehlung auch in den PageSpeed Insights oder Lighthouse stolpern. Prinzipiell sollten Ressourcen, auch das LCP-Element, so gut wie möglich komprimiert werden, um so wenig Datenverkehr wie möglich zu erzeugen. FĂŒr Bilder gibt es zahlreiche Tools, um diese verlustfrei zu komprimieren. Aber auch auf dem Webserver selbst sollte Kompression, beispielsweise mittels Gzip, aktiviert sein. Bilder sollten darĂŒber hinaus bevorzugt in einem modernen Format wie WebP oder JPEG2000 bereitgestellt werden, da diese eine sehr viel geringere DateigrĂ¶ĂŸe bieten. Da jedoch nicht jeder Browser diese Formate unterstĂŒtzt, sollten als Fallback immer die alten, aber möglichst komprimierten, Formate vorliegen. Versuchen Sie auch, Rastergrafiken richtig zu dimensionieren und keine 1000x1000px große JPEG fĂŒr ein kleines Logo im Navigationsbereich an den Nutzer zu senden. - **Clientseitiges JavaScript- und CSS-Rendering minimieren.** Es macht wenig Sinn, eine große Google Maps Bibliothek bereits bei Seitenaufruf in den Browser zu laden, wenn diese erst am Seitenende benötigt wird. Versuchen Sie, das verwendete JavaScript und CSS weitestgehend zu minimieren und jenes, das benötigt wird, möglichst im Ladezyklus der Webseite mittels `async` und `defer` nach hinten zu verschieben. WĂ€hrend JavaScript oder CSS in den Browser geladen wird, kann das Document Object Model (DOM), in welches die eigentliche HTML-Struktur Ihrer Webseite, und damit auch das LCP-Element, geladen wird, nicht weiter ausgebaut werden. ## Cumulative Layout Shift (CLS): Bedeutung und Optimierung Der Cumulative Layout Shift (CLS) misst, vereinfacht gesagt, die visuelle StabilitĂ€t Ihrer Webseite wĂ€hrend des Ladevorgangs. Um noch einmal das Beispiel von oben aufzugreifen: Stellen Sie sich einen Button vor, den Sie noch wĂ€hrend des Ladevorgangs drĂŒcken möchten, der aber immer wieder seine Position Ă€ndert. Nervenaufreibend, nicht? Genau das soll mit einer Optimierung des CLS verhindert werden. Die CLS-Metrik spricht daher in erster Linie fĂŒr eine gute Usability der Webseite. Kein Nutzer möchte versehentlich auf den Button klicken, der ihn zum Abschluss eines Jahres-Abos fĂŒhrt, wenn er eigentlich nur eine Ausgabe einer Zeitschrift erwerben wollte. Wie aber lĂ€sst sich diese Layout-Verschiebung in einen vergleichbaren Wert packen? FĂŒr Google ist dieser Wert das Produkt aus der sogenannten Impact Fraction und der Distance Fraction. Die **Impact Fraction** sagt aus, wie stark ein instabiles Element des Layouts den Viewport zwischen zwei Frames beeinflusst. Wie bitte? Nochmal anhand eines Beispiels: Stellen Sie sich ein Element vor, das bei Seitenaufruf 50% der Viewport-Höhe einnimmt. Durch ein instabiles Layout wird es jedoch plötzlich um 25% nach unten verschoben. Damit hat das Element nun eine Impact Fraction von 75% (also 0,75). Die **Distance Fraction** ist im Prinzip der bewegliche Anteil der Impact Fraction. In unserem Beispiel lĂ€ge die Distance Fraction bei 25%, da sich das Element um diesen Wert verschoben hat. Besteht der CLS nur aus diesem Element, hĂ€tten wir also eine gesamte Impact Fraction von 0,75 und eine Distance Fraction von 0,25, was multipliziert miteinander einen CLS von 0,1875 ergibt. Dieser Score wĂ€re laut Google ausbaufĂ€hig. Nur ein Score bis maximal 0,1 gilt als gut, alles ĂŒber 0,25 als schlecht. ### Checkliste fĂŒr die CLS-Optimierung Nachdem wir die technischen Feinheiten geklĂ€rt haben, ist nun die Frage, wie wir diese Layout-Verschiebungen am besten verhindern können. - **Mit Platzhaltern arbeiten.** Laden Sie beispielsweise ein Button-Element wĂ€hrend des Ladevorgangs per JavaScript nach und fĂŒgen dann einen Button oberhalb eines Textblocks ein, unterliegt der Textblock einem Layout Shift. Sie sollten daher mittels einem Platzhalter, der optimalerweise genauso groß wie der einzufĂŒgende Button ist, arbeiten, und diesen Platzhalter anschließend durch den Button ersetzen. So weiß der Textblock bereits zu Anfang, "wo er hin gehört" und wird nicht mehr verschoben. - **Breiten und Höhen fĂŒr Bilder definieren.** Der Browser schafft wĂ€hrend des Ladevorgangs automatisch Platzhalter fĂŒr Bilder und Videos, wenn er weiß, wie viel Platz er frei halten muss. Dies kann er nur, wenn die jeweiligen Elemente mit Breiten- und Höhenangaben ausgestattet sind. - **Webfonts wĂ€hrend des Ladevorgangs durch System-Fonts ersetzen.** Arbeiten Sie mit Webfonts, achten Sie stets darauf, dass fĂŒr diese ein Ă€hnlicher System-Font als Ersatz angegeben ist. Nicht nur können Sie so auch Ă€ltere Browser, die ggf. Webfonts nicht anzeigen können, unterstĂŒtzen, aber auch wird der Text bereits angezeigt, bevor die jeweilige Font geladen wurde, sodass auch hier Layout Shifts vermieden werden. - **Layout-Verschiebungen in Animationen vermeiden.** Arbeiten Sie mit Animationen oder CSS-ÜbergĂ€ngen, sollten Sie darauf achten, dass dadurch nicht das gesamte Layout verschoben wird, wenn beispielsweise die GrĂ¶ĂŸe eines Elements animiert wird. Auch hier sollten Sie ein Wrapper-Element schaffen, welches die maximale GrĂ¶ĂŸe des animierten Elements hat, sodass außenliegende Elemente nicht verschoben werden. ## First Contentful Paint (FCP): Bedeutung und Optimierung Der First Contentful Paint (FCP) ist eng verwandt mit dem LCP und misst, wann das erste inhaltliche Element auf der Webseite angezeigt wird. Bis zum FCP ist die Webseite daher weiß und fĂŒr den Nutzer unbrauchbar. Der FCP sollte selbstverstĂ€ndlich weit frĂŒher als der LCP sein. Google gibt einen Wert von unter 1,8 Sekunden als gut an, wĂ€hrend alles ĂŒber 3 Sekunden schlecht ist. Bei der Optimierung des FCP kommen viele Faktoren zusammen, welche teilweise auch direkte (positive) Auswirkungen auf die anderen Metriken haben. ### Time To First Byte (TTFB) als Subfaktor fĂŒr den FCP Der FCP hĂ€ngt naturgemĂ€ĂŸ stark davon ab, wie lang der Server benötigt, um das erste Byte an den Nutzer zu senden. Dieser Zeitraum wird auch Time To First Byte, oder auch TTFB genannt. Hierzu zĂ€hlen Dinge wie die DNS-Anfrage, welche den Hostnamen (z.B. kuatsu.dev) in die IP-Adresse des Servers auflöst, oder auch SSL-Handshakes. All dies hat aber eine Sache gemeinsam: Sie sind Sache des Servers und können nur optimiert werden, indem der Server optimiert wird. Große, unĂŒbersichtliche Datenbanken können ein Grund fĂŒr einen langen TTFB sein, oder auch schlechte Webserver-Konfigurationen. Die beste Konfiguration nĂŒtzt jedoch nichts, wenn der Hosting-Provider schlichtweg nicht gut genug ist oder die Webseite von einem einzigen Server am anderen Ende der Welt im Vergleich zum Nutzer bereitgestellt wird. In der Checkliste fĂŒr die FCP-Optimierung finden Sie auch einige Punkte, die direkt mit dem TTFB zusammenhĂ€ngen. ### Checkliste fĂŒr die FCP-Optimierung Wir haben nun also erkannt, dass der FCP einer der wichtigsten EinflĂŒsse auf die Nutzerzufriedenheit ist. Doch wie optimieren wie diesen Messwert? Hierzu gibt es unzĂ€hlige Möglichkeiten, wovon Google zahlreiche in [ihrem eigenen Blog-Eintrag](https://web.dev/fcp/#how-to-improve-fcp) vorstellt. Wir widmen uns einigen von diesen in unserer Checkliste. - **CSS und JavaScript minimieren**. Wir haben bereits weiter oben gelernt, dass das Document Object Model wĂ€hrend des Ladevorgangs von JavaScript oder CSS noch nicht aufgebaut werden kann. Daher ist es selbstredend, dass diese möglichst minimiert werden mĂŒssen. Es gibt sogenannte "Minifier" oder "Uglifier", welche Ihr CSS und JavaScript nehmen und dieses mittels ausgeklĂŒgelter Methoden so klein schrumpfen lassen wie möglich. Nutzen Sie diese Möglichkeit. - **Ungenutzes CSS und JavaScript entfernen**. Eng verwandt mit der letzten Optimierungsmöglichkeit: Entfernen Sie CSS und JavaScript, das nicht benötigt wird. Hier kommt oft der Nachteil eeines großen WordPress Themes oder Ähnlichem zu Vorschein, welche oft mehrere Megabyte an CSS und JavaScript mit sich schleppen, welche fĂŒr Ihre persönliche Webseite wahrscheinlich gar nicht benötigt werden. FĂŒr WordPress gibt es einige Plug-ins wie Asset CleanUp, mit welchen sie nicht benötigte Assets weitestmöglich entfernen können. Bei vielen Themes ist dies jedoch nicht immer perfekt möglich, weshalb die beste Lösung hier immer noch ist, auf vorgefertigte Themes zu verzichten und statt dessen ein eigenes Theme zu entwickeln oder auf einen auf Performance optimierten Page Builder wie Oxygen zu setzen. - **Caching verwenden**. Die meisten Webserver bieten eine Vielzahl an Möglichkeiten, Caching zu aktivieren. Dadurch werden bestimmte Ressourcen nicht bei jedem Seitenaufruf neu generiert, sondern fĂŒr eine gewisse Zeit zwischengespeichert. Auch fĂŒr WordPress gibt es einige Plug-ins, die in Verbindung mit den entsprechenden Webserver-Anpassungen fĂŒr massive Verbesserungen im FCP-Wert sorgen können. Bei jeder von uns angefertigten WordPress-Webseite ist daher eine [WP Rocket](https://wp-rocket.me/) Lizenz und Vorkonfiguration mit inbegriffen. - **Server-Side Generation (SSG) verwenden.** Zugegeben: Nun kommen wir an einen Punkt, wo nicht mehr von Optimierung die Rede ist, sondern von einer völlig neuen Webseite. Ein Static Site Generator wie Next.js erstellt statische HTML-Seiten und ĂŒbernimmt einen Großteil des JavaScripts auf dem Server. Im Nutzer-Browser werden daher keine dutzenden API-Anfragen fĂŒr das Anzeigen eines Blogs mehr gemacht, sondern der Server fĂŒhrt diese Anfragen noch vor dem Ladevorgang aus und stellt eine fertige HTML-Seite bereit. Übrigens: Auch wir verwenden Next.js und Static Site Generation. Bitte beachten Sie, dass sich einige der zuvor genannten Optimierungsmöglichkeiten, vor allem im Bereich des Largest Contentful Paint (LCP), mit jenen des FCP ĂŒberschneiden, und wir diese deshalb hier nicht noch einmal aufzĂ€hlen. ## First Input Delay (FID): Bedeutung und Optimierung Der First Input Delay (FID) steht fĂŒr die Zeit, die es benötigt, bis ein Nutzer auf Ihrer Webseite interaktiv eine Aktion ausfĂŒhren kann. Klickt ein Nutzer also wĂ€hrend des Ladevorgangs auf einen Button, dauert es diesen Zeitraum, bis eine Reaktion entsteht. Auch hier gibt Google Referenzwerte vor: Eine Zeit von unter 100ms gilt als gut, alles ĂŒber 300ms hingegen als schlecht. ### Checkliste fĂŒr die FID-Optimierung Der First Input Delay kann sich als besonders knifflig bzw. technisch zu optimieren herausstellen. Oft ist es hier so, dass nur eine detaillierte Bestandsaufnahme der aktuellen Webseite und eine tiefgreifende, technische Optimierung einen schlechten FID beheben können. Hier sind jedoch einige Maßnahmen, die vorgenommen werden können: - **Den Haupt-Thread entlasten**. Das Rendering in JavaScript lĂ€uft ĂŒber den Haupt-Thread. Werden in diesem jedoch gleichzeitig noch API-Anfragen und komplexe Berechnungen durchgefĂŒhrt, muss das Rendering und damit auch die Reaktion auf eine Nutzerinteraktion warten. Dies kann beispielsweise durch den Einsatz von Web Workern oder dem Verwenden von asynchronem JavaScript behoben werden. - **Auswirkungen von Third-Party Code minimieren**. Verwenden Sie viele JavaScript-Bibliotheken wie Google Analytics, Google Maps, Facebook Pixel usw. spiegelt sich dies in der InteraktivitĂ€t Ihrer Webseite wider. Solche Bibliotheken sollten Sie daher prinzipiell erst nach laden, nachdem das Document Object Model (DOM) fertig geladen wurde. Hierzu können Sie unter anderem die `async` oder `defer` Attribute im `script`-Tag nutzen. ## Fazit Seit Juli 2021 sind die Core Web Vitals offizieller Bestandteil des Google Rankings und wurden spĂ€testens dann zur Hausaufgabe eines jeden ernstzunehmenden SEOs. Doch nicht nur fĂŒr eine gute Aufstellung in der Google-Suche sollten Sie diesen Messwerten Beachtung schenken: Am Ende stellen sie gute Metriken da, um die echte Bedienbarkeit und Nutzerfreundlichkeit Ihrer Webseite zu messen und zu vergleichen. Eine Digitalagentur, die sich auf die Optimierung der Web Vitals spezialisiert hat, kann daher nicht nur das Google Ranking verbessern, sondern auch fĂŒr einen echten Mehrwert bei den Nutzern sorgen. Wenn Sie die Optimierung fĂŒr zu technisch empfinden, oder aber einfach nicht mehr weiter voran kommen in Ihren Optimierungen, [wenden Sie sich an uns](/kontakt).

Bereit fĂŒr Ihren nĂ€chsten Schachzug?

Egal ob es bei Ihnen gerade digital brennt, oder Sie einfach mal hören möchten, was wir Ihnen bieten können. Wir freuen uns auf Sie.

Grafikdesigner in einer Digitalagentur