Core Web Vi­tals sind Um­satz: Was CIOs über Per­for­mance wirk­lich wis­sen müs­sen

Per­for­mance ist kei­ne Front­end-Kos­me­tik, son­dern eine Ge­schäfts­grö­ße. Wer Core Web Vi­tals als Tech­nik-De­tail be­han­delt, ver­schenkt Um­satz und Ran­king. War­um Next.js die bes­ten Aus­gangs­be­din­gun­gen lie­fert – und war­um das al­lein nichts ga­ran­tiert.
8 Min. LesezeitMatthias RadscheitMatthias Radscheit
Happycodingde-DE

TL;DR

Core Web Vitals sind eine Geschäftsgröße, keine Technik-Metrik. Schnellere Seiten ranken bei Google besser und korrelieren in belegten Studien mit höherer Conversion. Next.js mit Server Components und ISR schafft exzellente Ausgangsbedingungen für LCP, INP und CLS – richtig eingesetzt. Falsch gebaut bleibt es trotzdem langsam.

  • Core Web Vitals 2026 sind LCP (≤2,5s), INP (≤200ms, seit März 2024 statt FID) und CLS (≤0,1), gemessen am 75. Perzentil und getrennt nach Mobile/Desktop.
  • Google nutzt CWV als Page-Experience-Signal, aber nicht als eigenständigen Ranking-Boost: Relevanz und Content bleiben primär. Performance ist Hygiene, kein Hebel allein.
  • Die Deloitte/Google-Studie von Ende 2019 zeigt für Retail eine Conversion-Steigerung von +8,4% bei 0,1s schnellerer Ladezeit – als datierte Korrelation, nicht als universelles Gesetz.
  • Next.js Server Components reduzieren Client-JavaScript und verbessern den FCP; ISR liefert vorgerenderte Seiten mit stale-while-revalidate. Das sind Ausgangsbedingungen, keine Automatik.
  • Falsch eingesetzt – große Client-Bundles, Render-Wasserfälle, unoptimierte Bilder – ist eine Next.js-Seite so langsam wie jede andere.

Per­for­mance ist eine Zahl in der GuV, kei­ne Zei­le im Last­test-Re­port. Wer Core Web Vi­tals als Front­end-De­tail be­han­delt, das die Ent­wick­ler schon ir­gend­wie hin­be­kom­men, ver­schenkt zwei Din­ge gleich­zei­tig: Sicht­bar­keit bei Goog­le und Con­ver­si­on im Fun­nel. Bei­des lässt sich in Euro be­zif­fern, und ge­nau des­halb ge­hört das The­ma auf die Ent­schei­der­ebe­ne und nicht in ein Jira-Back­log.

Der Grund, war­um das ge­ra­de jetzt re­le­vant ist: Die Me­tri­ken ha­ben sich ver­scho­ben. Seit März 2024 misst Goog­le nicht mehr nur, wie schnell eine Sei­te re­agiert, wenn man sie zum ers­ten Mal an­tippt, son­dern wie re­ak­tiv sie über die ge­sam­te Sit­zung bleibt. Gleich­zei­tig hat sich die Front­end-Ar­chi­tek­tur wei­ter­ent­wi­ckelt: Ser­ver Com­pon­ents und in­kre­men­tel­les Ren­de­ring ver­schie­ben die Last weg vom Brow­ser. Wer heu­te eine Platt­form-Ent­schei­dung trifft, ent­schei­det mit über die Per­for­mance-De­cke, die das Pro­jekt je­mals er­rei­chen kann. Die­se De­cke lässt sich spä­ter kaum noch an­he­ben.

War­um Core Web Vi­tals Um­satz sind und nicht nur Tech­nik

Core Web Vi­tals über­set­zen ein sub­jek­ti­ves Ge­fühl – "die Sei­te fühlt sich lang­sam an" – in drei mess­ba­re Grö­ßen, die Goog­le aus ech­ten Nut­zer­da­ten er­hebt. LCP (Lar­gest Con­tentful Paint) misst, wann der größ­te sicht­ba­re In­halt ge­la­den ist; gut ist al­les un­ter 2,5 Se­kun­den. INP (In­ter­ac­tion to Next Paint) misst die Re­ak­ti­ons­la­tenz bei In­ter­ak­tio­nen über die ge­sam­te Sit­zung; gut ist al­les un­ter 200 Mil­li­se­kun­den. CLS (Cu­mu­la­ti­ve Lay­out Shift) misst das vi­su­el­le Ver­rut­schen des Lay­outs; gut ist al­les un­ter 0,1. Ge­mes­sen wird am 75. Per­zen­til und ge­trennt nach Mo­bi­le und Desk­top. Das ist wich­tig, weil Ihre Desk­top-Wer­te im Büro Sie über ein schlech­tes Mo­bil­er­leb­nis hin­weg­täu­schen kön­nen.

Der ent­schei­den­de Punkt für die Vor­stands­eta­ge: Die­se Zah­len kor­re­lie­ren mit Ge­schäfts­kenn­zah­len. Die von Goog­le be­auf­trag­te und von 55 und De­loit­te durch­ge­führ­te Stu­die Mil­li­se­conds Make Mil­li­ons un­ter­such­te Ende 2019 über 30 Mil­lio­nen Ses­si­ons auf 37 Mar­ken-Sites. Eine Ver­bes­se­rung der La­de­zeit um 0,1 Se­kun­den kor­re­lier­te im Re­tail mit +8,4% Con­ver­si­on und +9,2% durch­schnitt­li­chem Be­stell­wert, im Tra­vel-Seg­ment mit +10,1% Con­ver­si­on. Pin­te­rest be­rich­te­te nach ei­nem Per­for­mance-Re­build von +15% Si­gnup-Con­ver­si­on und +15% SEO-Traf­fic – laut ei­ge­nem En­gi­nee­ring-Blog der größ­te User-Ac­qui­si­ti­on-Ge­winn des Teams in je­nem Jahr.

Die­se Zah­len sind be­last­bar ge­nug, um eine In­ves­ti­ti­on zu be­grün­den, aber sie sind kei­ne Na­tur­ge­set­ze. Dazu spä­ter mehr. Für den Mo­ment reicht die Ein­ord­nung: Per­for­mance ist ein He­bel mit mess­ba­rer Wir­kung auf zwei Um­satz­trei­ber – Sicht­bar­keit und Ab­schluss.

INP hat FID ab­ge­löst: Was sich seit 2024 ge­än­dert hat

Wer noch mit dem men­ta­len Mo­dell von 2023 ar­bei­tet, op­ti­miert die fal­sche Me­trik. Am 12. März 2024 hat Goog­le INP of­fi­zi­ell zum Core Web Vi­tal ge­macht und da­mit FID (First In­put De­lay) er­setzt. Der Un­ter­schied ist nicht kos­me­tisch. FID maß nur die Ver­zö­ge­rung der al­ler­ers­ten In­ter­ak­ti­on – ein gnä­di­ger, fast im­mer grü­ner Wert. INP misst die Re­ak­ti­ons­la­tenz über alle In­ter­ak­tio­nen ei­ner Sit­zung und nimmt ei­nen der schlech­tes­ten Wer­te. Das deckt ge­nau die Frus­tra­ti­on auf, die Nut­zer real er­le­ben: Der zehn­te Klick im Check­out, der hängt, nicht der ers­te.

Für Ar­chi­tek­tur­ent­schei­dun­gen heißt das: Ja­va­Script, das den Main Th­read blo­ckiert, wird teu­rer. Jede schwe­re Cli­ent-sei­ti­ge Be­rech­nung, je­der über­di­men­sio­nier­te Sta­te-Ma­na­ger, jede Hy­dra­ti­on ei­nes gan­zen Sei­ten­baums schlägt jetzt sicht­bar auf INP durch. Das ist der Grund, war­um Ar­chi­tek­tu­ren, die we­ni­ger Ja­va­Script an den Brow­ser sen­den, struk­tu­rel­ler im Vor­teil sind. Nicht, weil sie mo­dern sind, son­dern weil sie we­ni­ger Ar­beit in den Main Th­read le­gen, der INP be­stimmt.

Die­se Ver­schie­bung ist auch eine War­nung an alle, die ihre Per­for­mance-Wer­te vor März 2024 ab­ge­nom­men ha­ben. Eine Sei­te, die un­ter FID grün war, kann un­ter INP rot sein. Wer seit­dem nicht neu ge­mes­sen hat, kennt sei­nen tat­säch­li­chen Stand nicht. Und Goog­le misst kon­ti­nu­ier­lich aus dem Chro­me User Ex­pe­ri­ence Re­port mit – Sie se­hen die Ver­schlech­te­rung also nicht, be­vor sie im Ran­king an­kommt.

Wie Next.js Ser­ver Com­pon­ents die Aus­gangs­be­din­gun­gen ver­bes­sern

Hier wird die Platt­form-Ent­schei­dung kon­kret. Die meis­ten Per­for­mance-Pro­ble­me ent­ste­hen, weil zu viel Ja­va­Script an den Brow­ser geht und dort in­ter­pre­tiert, aus­ge­führt und hy­dra­ti­siert wer­den muss. Ge­nau an die­sem Punkt set­zen Re­act Ser­ver Com­pon­ents in Next.js an. Kom­po­nen­ten ren­dern stan­dard­mä­ßig auf dem Ser­ver; nur was ex­pli­zit mit 'use cli­ent' mar­kiert ist, lan­det samt sei­nem Im­port-Graph im Cli­ent-Bund­le. Die Next.js-Do­ku­men­ta­ti­on be­legt ex­pli­zit eine Ver­bes­se­rung des First Con­tentful Paint, weil we­ni­ger Ja­va­Script ge­sen­det wird. We­ni­ger Cli­ent-Ja­va­Script ist die di­rek­tes­te He­bel­wir­kung auf INP, die eine Ar­chi­tek­tur bie­ten kann.

Dazu kommt ISR (In­cre­men­tal Sta­tic Re­ge­ne­ra­ti­on). Statt jede An­fra­ge live zu ren­dern, lie­fert Next.js für die meis­ten Re­quests vor­ge­r­en­der­te sta­ti­sche Sei­ten aus und re­ge­ne­riert sie im Hin­ter­grund nach dem sta­le-while-reva­li­da­te-Mus­ter: Der Nut­zer be­kommt die fer­ti­ge Sei­te so­fort, die Ak­tua­li­sie­rung pas­siert asyn­chron. Das senkt die Ser­ver­last und sta­bi­li­siert den LCP, weil die teu­re Ren­der-Ar­beit nicht im kri­ti­schen Pfad des Nut­zers liegt. Cache-Con­trol-Hea­der wer­den au­to­ma­tisch ge­setzt; das Cache-Ver­hal­ten lässt sich über den x-next­js-cache-Hea­der be­ob­ach­ten.

Wie weit das trägt, zeigt der Ska­lie­rungs­fall: Für Sites mit Mil­lio­nen­pu­bli­kum ist ge­nau die­se Kom­bi­na­ti­on aus Vor­ren­dern und schlan­kem Cli­ent-Bund­le der Grund, war­um ein Stack aus Sa­ni­ty und Next.js Mil­lio­nen Be­su­cher ohne Per­for­mance-Ein­bruch be­dient. Und weil Goog­le am Mo­bi­le-Per­zen­til misst, zahlt jede die­ser Op­ti­mie­run­gen di­rekt auf die Wer­te ein, die ran­ken – ein Ar­gu­ment, das eng mit kon­se­quen­tem Mo­bi­le-First-De­sign zu­sam­men­hängt. Die next/image-Op­ti­mie­rung läuft da­bei auch self-hos­ted mit Zero-Con­fig über next start und lie­fert per De­fault mo­der­ne For­ma­te und pas­sen­de Bild­grö­ßen – der häu­figs­te ein­zel­ne LCP-Kil­ler, der hier ab Werk adres­siert ist.

Der un­be­que­me Punkt: Next.js macht gute Wer­te mög­lich, nicht au­to­ma­tisch

Jetzt der Teil, den Ih­nen ein Dienst­leis­ter, der Next.js ver­kau­fen will, un­gern sagt. Das Frame­work ist eine Vor­aus­set­zung, kei­ne Ga­ran­tie. Falsch ein­ge­setzt ist eine Next.js-Sei­te so lang­sam wie jede an­de­re – manch­mal lang­sa­mer, weil das Frame­work-Ge­wicht hin­zu­kommt.

Die ty­pi­schen Feh­ler sind be­kannt und wie­der­ho­len sich in je­dem Au­dit. Ein Team mar­kiert zu viel mit 'use cli­ent' und schiebt da­mit hal­be Sei­ten­bäu­me ins Cli­ent-Bund­le, wo­mit der Ser­ver-Com­po­nent-Vor­teil ver­pufft. Es baut Ren­der-Was­ser­fäl­le, bei de­nen eine Da­ten­abfra­ge auf die nächs­te war­tet, statt par­al­lel zu la­den, und treibt so den LCP nach oben. Es bin­det un­ge­prüf­te Bil­der ein, statt die Bild-Op­ti­mie­rung zu nut­zen. Es zieht eine schwe­re Cli­ent-sei­ti­ge Sta­te-Bi­blio­thek ein, wo Ser­ver-Sta­te ge­reicht hät­te, und blo­ckiert den Main Th­read – mit di­rek­tem Scha­den am INP. Next.js ver­hin­dert kei­nen die­ser Feh­ler. Es macht sie nur leich­ter ver­meid­bar, wenn das Team weiß, was es tut.

Und dann die Stu­di­en. Die be­rühm­te Faust­re­gel "Ama­zon: 100 ms Ver­zö­ge­rung kos­ten 1% Um­satz" hat kei­ne of­fi­zi­el­le Ama­zon-Quel­le. Sie stammt aus ei­ner Stan­ford-Prä­sen­ta­ti­on ei­nes Ex-En­gi­neers von 2006 – rund zwan­zig Jah­re alt und kon­text­ab­hän­gig. Die oft zi­tier­ten Walm­art-Zah­len stam­men aus ei­ner Ve­lo­ci­ty-Prä­sen­ta­ti­on von 2012, nur über Se­kun­där­quel­len be­legt. Selbst die De­loit­te/Goog­le-Up­lifts von Ende 2019 sind bran­chen­spe­zi­fi­sche Kor­re­la­tio­nen, kein uni­ver­sel­les Ge­setz "0,1 Se­kun­de = +X% über­all". Wer die­se Zah­len als fest­ste­hen­de Kau­sal­re­gel im Vor­stand prä­sen­tiert, wird beim ers­ten kri­ti­schen CFO ent­zau­bert. Zi­tie­ren Sie sie als Grö­ßen­ord­nung mit Da­tum und Ver­ti­kal-Kon­text. Das ist se­riö­ser und hält im Zwei­fel.

Der ehr­li­che Ziel­kon­flikt: Per­for­mance ist nur ein Fak­tor

Eine The­se ist nur dann et­was wert, wenn sie ihre ei­ge­ne Gren­ze kennt. Hier ist die Gren­ze: Core Web Vi­tals sind ein Ran­king­fak­tor un­ter vie­len, und sie kor­re­lie­ren nicht eins zu eins mit Um­satz. Goog­le selbst stellt in der Search-Do­ku­men­ta­ti­on klar, dass es kein ei­gen­stän­di­ges Boost-Si­gnal gibt und Re­le­vanz so­wie Con­tent-Qua­li­tät pri­mär blei­ben. Ein per­fek­ter LCP ret­tet kein schwa­ches An­ge­bot, kei­nen ver­wir­ren­den Fun­nel und kei­ne Sei­te, die das Fal­sche ver­kauft.

Das re­la­ti­viert die In­ves­ti­ti­on nicht, es schärft sie. Per­for­mance ist Hy­gie­ne, kein Wachs­tums­he­bel im luft­lee­ren Raum. Bei zwei in­halt­lich gleich­wer­ti­gen Sei­ten gibt das Page-Ex­pe­ri­ence-Si­gnal den Aus­schlag; bei ei­ner schlech­ten Sei­te än­dert die schnells­te La­de­zeit nichts. Der ehr­li­che Rah­men lau­tet des­halb: Erst muss das An­ge­bot stim­men, dann der Fun­nel, dann zahlt Per­for­mance auf bei­des ein. In die­ser Rei­hen­fol­ge.

Wer das um­dreht und die letz­ten 100 Mil­li­se­kun­den op­ti­miert, wäh­rend der Check­out drei über­flüs­si­ge Pflicht­fel­der hat, be­treibt Mi­kro-Op­ti­mie­rung am fal­schen Ende. Die rich­ti­ge Fra­ge im Len­kungs­kreis ist nicht "wie schnell sind wir", son­dern "wo im Fun­nel kos­tet uns Lang­sam­keit kon­kret Ab­schlüs­se". Die­se Fra­ge führt zu prio­ri­sier­ten, be­gründ­ba­ren In­ves­ti­tio­nen statt zu ei­nem grü­nen Light­house-Score als Selbst­zweck. Es gibt im Üb­ri­gen auch Fäl­le, in de­nen Next.js die fal­sche Wahl ist: Eine rei­ne Con­tent-Site ohne In­ter­ak­ti­vi­tät trägt Frame­work-Ge­wicht, das ein leich­te­res Set­up nicht hät­te.

Was Per­for­mance über die Zeit kos­tet und ein­bringt

Die TCO-Per­spek­ti­ve fehlt in den meis­ten Per­for­mance-Dis­kus­sio­nen, ge­hört aber ge­nau dort hin. Per­for­mance ist kein ein­ma­li­ges Pro­jekt, son­dern ein Be­triebs­zu­stand, der ge­pflegt wer­den muss. Je­des neue Fea­ture, je­des Track­ing-Skript der Mar­ke­ting-Ab­tei­lung, jede ein­ge­bun­de­ne Dritt­an­bie­ter-Kom­po­nen­te kann die Wer­te ver­schlech­tern. Ohne kon­ti­nu­ier­li­ches Mo­ni­to­ring aus ech­ten Nut­zer­da­ten mer­ken Sie die Ver­schlech­te­rung erst, wenn das Ran­king nach­gibt – und dann ist die Er­ho­lung teu­er.

Auf der Ar­chi­tek­tur­sei­te gilt eine Faust­re­gel, die wir in ei­ge­nen Pro­jek­ten kon­sis­tent se­hen: Eine sau­be­re Erst­im­ple­men­tie­rung ist eine In­ves­ti­ti­on, die sich über die Lauf­zeit aus­zahlt, weil die Per­for­mance-De­cke hoch liegt und Op­ti­mie­run­gen bil­lig blei­ben. Eine schlam­pi­ge Im­ple­men­tie­rung ver­schiebt die Kos­ten nach hin­ten, wo sie als tech­ni­sche Schuld mit Zin­sen an­fal­len. Wer den Un­ter­schied in Zah­len se­hen will, fin­det die Lo­gik im TCO-Ver­gleich zwi­schen ei­nem klas­si­schen CMS und ei­nem Sa­ni­ty-plus-Next.js-Stack durch­ge­rech­net.

Der Be­triebs­auf­wand für ein gut ge­bau­tes self-hos­ted Set­up liegt er­fah­rungs­ge­mäß bei we­ni­gen Stun­den im Mo­nat für Up­dates, Mo­ni­to­ring und Back­ups. Das ist über­schau­bar ge­gen­über dem, was schlech­te Per­for­mance auf der Um­satz­sei­te kos­tet, wenn die Grö­ßen­ord­nun­gen der Stu­di­en auch nur an­satz­wei­se auf Ihr Ge­schäft zu­tref­fen. Die Rech­nung geht sel­ten knapp aus.

Was ich Ent­schei­dern rate

Be­han­deln Sie Per­for­mance als Ge­schäfts­grö­ße mit ei­ge­nem Re­port­ing, nicht als Front­end-Ne­ben­pro­dukt. Las­sen Sie sich die Core Web Vi­tals Ih­rer wich­tigs­ten Fun­nel-Sei­ten aus ech­ten Nut­zer­da­ten zei­gen, ge­trennt nach Mo­bi­le und Desk­top, am 75. Per­zen­til – und nicht den ge­schön­ten Light­house-Score vom Ent­wick­ler-Lap­top. Wenn die Mo­bi­le-Wer­te rot sind, ha­ben Sie ein quan­ti­fi­zier­ba­res Um­satz­pro­blem, kein Tech­nik-De­tail.

Bei der Platt­form-Wahl wäh­len Sie eine Ar­chi­tek­tur, die we­nig Ja­va­Script an den Brow­ser sen­det und vor­ren­dern kann. Next.js mit Ser­ver Com­pon­ents und ISR ist da­für eine der stärks­ten ver­füg­ba­ren Aus­gangs­be­din­gun­gen – aber be­stehen Sie dar­auf, dass das Team weiß, wo 'use cli­ent' hin­ge­hört und wo nicht. Die aus­führ­li­che Ar­chi­tek­tur-Ar­gu­men­ta­ti­on, war­um die­ser Stack als Per­for­mance-Fun­da­ment taugt, fin­den Sie auf un­se­rer Next.js-Pil­lar­sei­te. Die Platt­form al­lein kauft Ih­nen nichts. Das Kön­nen des Teams, das sie ein­setzt, ent­schei­det, ob die De­cke er­reicht wird.

Und be­hal­ten Sie die Rei­hen­fol­ge im Kopf: An­ge­bot, Fun­nel, dann Per­for­mance. Wer sie um­dreht, op­ti­miert Mil­li­se­kun­den an ei­ner Sei­te, die aus an­de­ren Grün­den nicht ver­kauft. Wer sie ein­hält, ver­wan­delt Per­for­mance in ge­nau das, was sie sein soll­te – ei­nen mess­ba­ren Bei­trag zum Um­satz, den Sie vor je­dem CFO ver­tei­di­gen kön­nen.

Häufige Fragen

Sind Core Web Vitals ein direkter Google-Ranking-Faktor?
Google nutzt Core Web Vitals als Teil des Page-Experience-Signals, betont aber selbst, dass es keinen eigenständigen Ranking-Boost gibt. Relevanz und Content-Qualität bleiben primär. Praktisch heißt das: Gute CWV sind Hygiene, die bei vergleichbarer Relevanz den Ausschlag geben können – aber kein Ersatz für gute Inhalte und ein passendes Angebot.
Was sind die aktuellen Schwellenwerte für LCP, INP und CLS?
Gemessen am 75. Perzentil der echten Nutzerdaten, getrennt nach Mobile und Desktop, gilt als gut: LCP ≤ 2,5 Sekunden, INP ≤ 200 Millisekunden und CLS ≤ 0,1. INP hat am 12. März 2024 FID als Interaktivitäts-Metrik abgelöst und misst die Reaktionslatenz über die gesamte Sitzung, nicht nur die erste Eingabe.
Belegen Studien wirklich, dass Performance Umsatz bringt?
Es gibt belegte Korrelationen, keine allgemeingültigen Gesetze. Die von Google beauftragte und von 55/Deloitte durchgeführte Studie von Ende 2019 zeigt etwa für Retail +8,4% Conversion bei 0,1 Sekunden schnellerer Ladezeit. Pinterest berichtete nach einem Performance-Rebuild +15% Signup-Conversion. Diese Zahlen sind vertikal- und kontextabhängig und sollten als Größenordnung zitiert werden, nicht als Garantie.
Garantiert Next.js gute Core Web Vitals?
Nein. Next.js mit Server Components, ISR und App Router schafft sehr gute Ausgangsbedingungen, weil weniger JavaScript an den Browser geht und Seiten vorgerendert ausgeliefert werden. Falsch eingesetzt – mit riesigen Client-Bundles, Render-Wasserfällen und unoptimierten Bildern – ist eine Next.js-Seite genauso langsam wie jede andere. Das Framework ist eine Voraussetzung, keine Automatik.

Quellen

Ähnliche Artikel

Offen für ausgewählte Projekte

Lassen Sie uns über Ihr Projekt sprechen

Bu­chen Sie ei­nen un­ver­bind­li­chen Ter­min, schrei­ben Sie uns eine E-Mail oder nut­zen Sie das For­mu­lar – wir freu­en uns auf Ihre Nach­richt.

150+
Abgeschlossene Projekte
15
Jahre Erfahrung
8
Senior‑Level Teammitglieder