[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-web-performance-core-web-vitals-optimieren":3},{"_createdAt":4,"_id":5,"author":6,"body":7,"canonicalUrl":223,"category":224,"coverImage":225,"excerpt":232,"featured":233,"publishedAt":234,"readingTime":235,"relatedPosts":223,"seoDescription":236,"seoTitle":237,"slug":238,"tags":241,"title":247},"2026-04-14T11:16:07Z","epzDXqrM0Ug1OrZfNfKJ36","Joel Schwegmann",[8,19,28,36,44,53,63,71,79,87,95,103,111,119,127,135,143,151,159,167,175,183,191,199,207,215],{"_key":9,"_type":10,"children":11,"markDefs":17,"style":18},"2c1bb87c-ad5","block",[12],{"_key":13,"_type":14,"marks":15,"text":16},"c2c751af-ca3","span",[],"Warum Core Web Vitals wichtig sind",[],"h2",{"_key":20,"_type":10,"children":21,"markDefs":26,"style":27},"5a559daa-64c",[22],{"_key":23,"_type":14,"marks":24,"text":25},"b2cb1519-745",[],"Google nutzt Core Web Vitals als Ranking-Faktor. Aber noch wichtiger: Sie messen, was Nutzer tatsächlich erleben. Eine schnelle Website konvertiert besser, hat niedrigere Bounce-Rates und höhere Zufriedenheit. Die drei Metriken LCP, INP und CLS bilden das Fundament.",[],"normal",{"_key":29,"_type":10,"children":30,"markDefs":35,"style":18},"51af506c-54a",[31],{"_key":32,"_type":14,"marks":33,"text":34},"c89e689c-9c9",[],"LCP: Largest Contentful Paint",[],{"_key":37,"_type":10,"children":38,"markDefs":43,"style":27},"55770e28-e70",[39],{"_key":40,"_type":14,"marks":41,"text":42},"d5d1d7a2-f0b",[],"LCP misst, wann das größte sichtbare Element im Viewport fertig gerendert ist. Zielwert: unter 2,5 Sekunden. Typische Probleme sind große, nicht optimierte Bilder, render-blockierende Ressourcen und langsame Server-Response-Zeiten.",[],{"_key":45,"_type":10,"children":46,"markDefs":51,"style":52},"6d5fa8a2-a2d",[47],{"_key":48,"_type":14,"marks":49,"text":50},"91cc4b63-1b3",[],"LCP optimieren:",[],"h3",{"_key":54,"_type":10,"children":55,"level":60,"listItem":61,"markDefs":62,"style":27},"44aceae8-e58",[56],{"_key":57,"_type":14,"marks":58,"text":59},"9b631ea1-0a2",[],"Bilder in modernen Formaten (WebP\u002FAVIF) mit responsiven srcsets ausliefern",1,"bullet",[],{"_key":64,"_type":10,"children":65,"level":60,"listItem":61,"markDefs":70,"style":27},"8b7bf7d5-6b4",[66],{"_key":67,"_type":14,"marks":68,"text":69},"57e07c30-5e0",[],"Critical CSS inlinen, nicht-kritisches CSS lazy loaden",[],{"_key":72,"_type":10,"children":73,"level":60,"listItem":61,"markDefs":78,"style":27},"16d2a09e-bc1",[74],{"_key":75,"_type":14,"marks":76,"text":77},"cb44908d-1fd",[],"fetchpriority=\"high\" auf dem LCP-Element setzen",[],{"_key":80,"_type":10,"children":81,"level":60,"listItem":61,"markDefs":86,"style":27},"ca61c637-20c",[82],{"_key":83,"_type":14,"marks":84,"text":85},"ff21b025-8eb",[],"Server-Response-Zeit mit Caching und CDN optimieren",[],{"_key":88,"_type":10,"children":89,"level":60,"listItem":61,"markDefs":94,"style":27},"c0bbeade-5d4",[90],{"_key":91,"_type":14,"marks":92,"text":93},"2fffc186-589",[],"Font-Display: swap nutzen, um Text sofort anzuzeigen",[],{"_key":96,"_type":10,"children":97,"markDefs":102,"style":18},"07c702ba-2cf",[98],{"_key":99,"_type":14,"marks":100,"text":101},"7070ac0c-897",[],"INP: Interaction to Next Paint",[],{"_key":104,"_type":10,"children":105,"markDefs":110,"style":27},"47017e1d-f28",[106],{"_key":107,"_type":14,"marks":108,"text":109},"cb2be7fc-ca4",[],"INP misst die Responsiveness: Wie schnell reagiert die Seite auf User-Interaktionen? Zielwert: unter 200 Millisekunden. Langsame Event-Handler, Main-Thread-Blockaden und excessive Re-Renders sind typische Ursachen.",[],{"_key":112,"_type":10,"children":113,"markDefs":118,"style":52},"4aeffa5f-a0c",[114],{"_key":115,"_type":14,"marks":116,"text":117},"1f561dca-b90",[],"INP optimieren:",[],{"_key":120,"_type":10,"children":121,"level":60,"listItem":61,"markDefs":126,"style":27},"af06160f-6e8",[122],{"_key":123,"_type":14,"marks":124,"text":125},"5dfe4c03-dfd",[],"Lange Tasks aufbrechen (yield to main thread mit scheduler.yield())",[],{"_key":128,"_type":10,"children":129,"level":60,"listItem":61,"markDefs":134,"style":27},"7d1cbdd2-80f",[130],{"_key":131,"_type":14,"marks":132,"text":133},"54777d3f-f21",[],"Event-Handler entprellen (debounce\u002Fthrottle)",[],{"_key":136,"_type":10,"children":137,"level":60,"listItem":61,"markDefs":142,"style":27},"30cf043d-e9e",[138],{"_key":139,"_type":14,"marks":140,"text":141},"e7ba8cb6-200",[],"Schwere Berechnungen in Web Worker auslagern",[],{"_key":144,"_type":10,"children":145,"level":60,"listItem":61,"markDefs":150,"style":27},"274aaf65-d8c",[146],{"_key":147,"_type":14,"marks":148,"text":149},"d801c663-115",[],"Virtualisierung für lange Listen (vue-virtual-scroller)",[],{"_key":152,"_type":10,"children":153,"markDefs":158,"style":18},"1a7e8c5b-f01",[154],{"_key":155,"_type":14,"marks":156,"text":157},"5f10d264-507",[],"CLS: Cumulative Layout Shift",[],{"_key":160,"_type":10,"children":161,"markDefs":166,"style":27},"edec526f-b6b",[162],{"_key":163,"_type":14,"marks":164,"text":165},"767d7a71-2cd",[],"CLS misst visuelle Stabilität: Wie stark verschieben sich Elemente beim Laden? Zielwert: unter 0,1. Layout Shifts entstehen durch nachgeladene Bilder ohne Dimensionen, dynamisch eingefügte Inhalte und Web Fonts, die das Layout verändern.",[],{"_key":168,"_type":10,"children":169,"markDefs":174,"style":52},"b5a35d38-298",[170],{"_key":171,"_type":14,"marks":172,"text":173},"66a611aa-088",[],"CLS optimieren:",[],{"_key":176,"_type":10,"children":177,"level":60,"listItem":61,"markDefs":182,"style":27},"7ec270ea-638",[178],{"_key":179,"_type":14,"marks":180,"text":181},"5341b8a0-6c3",[],"width und height (oder aspect-ratio) auf alle Bilder und Videos setzen",[],{"_key":184,"_type":10,"children":185,"level":60,"listItem":61,"markDefs":190,"style":27},"bc20fa2c-778",[186],{"_key":187,"_type":14,"marks":188,"text":189},"425a999b-039",[],"Platzhalter für dynamische Inhalte reservieren",[],{"_key":192,"_type":10,"children":193,"level":60,"listItem":61,"markDefs":198,"style":27},"84a61da4-0d5",[194],{"_key":195,"_type":14,"marks":196,"text":197},"5c2a1006-be7",[],"font-display: optional für nicht-kritische Fonts",[],{"_key":200,"_type":10,"children":201,"level":60,"listItem":61,"markDefs":206,"style":27},"c1a85a22-cee",[202],{"_key":203,"_type":14,"marks":204,"text":205},"a8fd7b14-6c0",[],"Keine Inhalte oberhalb des Folds nachträglich einfügen",[],{"_key":208,"_type":10,"children":209,"markDefs":214,"style":18},"f31e3c2c-e57",[210],{"_key":211,"_type":14,"marks":212,"text":213},"03b60c63-1b8",[],"Messen und Monitoren",[],{"_key":216,"_type":10,"children":217,"markDefs":222,"style":27},"8bc03d00-98d",[218],{"_key":219,"_type":14,"marks":220,"text":221},"cf49bcf0-7c7",[],"Nutze Lighthouse, PageSpeed Insights und das Chrome User Experience Report (CrUX) für Field Data. Lab-Daten allein reichen nicht – reale Nutzerdaten (RUM) zeigen, wie deine Website bei verschiedenen Geräten und Netzwerken performt.",[],null,"erklaert",{"alt":226,"asset":227,"credit":230,"creditUrl":231},"Dashboard mit Performance-Metriken – Web Performance",{"_id":228,"url":229},"image-02161b7616a1c8374d7f90753d4794211ff446f4-1200x855-jpg","https:\u002F\u002Fcdn.sanity.io\u002Fimages\u002Ff1irfjak\u002Fproduction\u002F02161b7616a1c8374d7f90753d4794211ff446f4-1200x855.jpg","Foto von Carlos Muza auf Unsplash","https:\u002F\u002Funsplash.com\u002F@kmuza","LCP, INP und CLS – die drei Core Web Vitals entscheiden über Ranking und User Experience. So optimierst du sie in der Praxis mit konkreten Maßnahmen.",false,"2026-03-20T10:00:00Z",8,"Core Web Vitals (LCP, INP, CLS) optimieren: Praktische Maßnahmen für bessere Performance, SEO-Rankings und User Experience.","Core Web Vitals optimieren: LCP, INP, CLS in der Praxis",{"_type":239,"current":240},"slug","web-performance-core-web-vitals-optimieren",[242,243,244,245,246],"Performance","Core Web Vitals","SEO","Lighthouse","Web","Web Performance optimieren: Core Web Vitals in der Praxis"]