[{"data":1,"prerenderedAt":960},["ShallowReactive",2],{"blog-nuxt-core-web-vitals-performance-de":3},{"slug":4,"published":5,"minutes":6,"category":7,"tags":8,"keywords":13,"about":24,"sources":32,"cover":90,"og":91,"expertise":92,"locales":93,"lang":95,"title":97,"description":98,"coverAlt":99,"metaTitle":100,"takeaways":101,"faq":107,"toc":126,"blocks":160,"others":704},"nuxt-core-web-vitals-performance","2026-10-02",13,"web",[9,10,11,12],"Core Web Vitals","Nuxt","Performance","E-commerce",[14,15,16,17,18,19,20,21,22,23],"Core Web Vitals Nuxt","Nuxt performance optimization","improve LCP Nuxt","INP Nuxt hydration","fix CLS Vue","Nuxt lazy hydration","Nuxt Image LCP","Nuxt Scripts third-party scripts","Nuxt prerender vs SSR vs ISR","Core Web Vitals e-commerce",[25,27,29],{"name":9,"url":26},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCore_Web_Vitals",{"name":10,"url":28},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FNuxt",{"name":30,"url":31},"Vue.js","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FVue.js",[33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87],{"title":34,"url":35},"web.dev: Web Vitals","https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals",{"title":37,"url":38},"web.dev: Largest Contentful Paint (LCP)","https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",{"title":40,"url":41},"web.dev: Optimize Largest Contentful Paint","https:\u002F\u002Fweb.dev\u002Farticles\u002Foptimize-lcp",{"title":43,"url":44},"web.dev: Interaction to Next Paint (INP)","https:\u002F\u002Fweb.dev\u002Farticles\u002Finp",{"title":46,"url":47},"web.dev: Optimize Cumulative Layout Shift","https:\u002F\u002Fweb.dev\u002Farticles\u002Foptimize-cls",{"title":49,"url":50},"web.dev: Optimize long tasks","https:\u002F\u002Fweb.dev\u002Farticles\u002Foptimize-long-tasks",{"title":52,"url":53},"Chrome for Developers: Chrome UX Report (CrUX)","https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fcrux",{"title":55,"url":56},"Chrome for Developers: CrUX methodology","https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fcrux\u002Fmethodology",{"title":58,"url":59},"GitHub: GoogleChrome\u002Fweb-vitals","https:\u002F\u002Fgithub.com\u002FGoogleChrome\u002Fweb-vitals",{"title":61,"url":62},"Nuxt docs: Rendering modes","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Frendering",{"title":64,"url":65},"Nuxt docs: Components (Lazy prefix, delayed hydration, client components)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fdirectory-structure\u002Fapp\u002Fcomponents",{"title":67,"url":68},"Nuxt docs: Experimental features (lazyHydration, payloadExtraction)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fexperimental-features",{"title":70,"url":71},"Nuxt docs: Data fetching (pick, transform, lazy)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fdata-fetching",{"title":73,"url":74},"Nuxt blog: Nuxt 4.5","https:\u002F\u002Fnuxt.com\u002Fblog\u002Fv4-5",{"title":76,"url":77},"GitHub: Nuxt releases","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases",{"title":79,"url":80},"Nuxt Image: NuxtImg","https:\u002F\u002Fimage.nuxt.com\u002Fusage\u002Fnuxt-img",{"title":82,"url":83},"Nuxt Fonts module","https:\u002F\u002Fnuxt.com\u002Fmodules\u002Ffonts",{"title":85,"url":86},"Nuxt Scripts: Getting started","https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fgetting-started",{"title":88,"url":89},"Nuxt Scripts: Script triggers","https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fguides\u002Fscript-triggers","\u002Fimages\u002Fblog\u002Fnuxt-core-web-vitals-performance\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fnuxt-core-web-vitals-performance\u002Fog.jpg","vue-nuxt-developer",[94,95,96],"en","de","hu","Core Web Vitals für Nuxt-Sites und Shops: LCP, INP und CLS beheben","So behebst du LCP, INP und CLS in Nuxt-4-Sites und Shops: Bilder, Hydration, Fonts, Drittanbieter-Skripte, Prerender vs. SSR vs. ISR und Messung mit echten Nutzern.","Diagramm: ein Nuxt-Seitenaufruf vom Server-HTML über Hero-Bild, Hydration und Interaktion, mit den Schwellenwerten für LCP, INP und CLS an den Stufen.","Core Web Vitals für Nuxt: LCP, INP, CLS · Balázs Csorba",[102,103,104,105,106],"Core Web Vitals werden an Felddaten beim 75. Perzentil bewertet: LCP höchstens 2,5 Sekunden, INP höchstens 200 Millisekunden, CLS höchstens 0,1. Lighthouse kann INP nicht messen, ein grüner Lab-Score beweist also wenig.","Die meisten LCP-Probleme in Nuxt sind Entdeckungsprobleme: Das Hero-Bild wird spät angefordert, per Lazy Loading verzögert oder ist zu groß. Bring die Reihenfolge der Requests in Ordnung, bevor du Kilobytes sparst.","Hydration ist in einer servergerenderten Vue-App der wichtigste INP-Hebel. Liefere weniger JavaScript aus, hydriere Komponenten unterhalb des sichtbaren Bereichs verzögert und zerlege lange Tasks.","CLS ist fast immer eine fehlende Platzreservierung: Bildmaße, Fallback-Metriken für Fonts, spät eingeblendete Banner und Consent-Leisten, Embeds ohne reservierte Box.","Wähle den Rendering-Modus pro Route: Prerendere, was sich selten ändert, cache mit swr oder isr, wo die Plattform es unterstützt, und behalte volles SSR für alles, was wirklich pro Request entsteht.",[108,111,114,117,120,123],{"q":109,"a":110},"Was sind gute Core-Web-Vitals-Werte?","Google empfiehlt einen LCP innerhalb von 2,5 Sekunden, einen INP von höchstens 200 Millisekunden und einen CLS von höchstens 0,1. Eine Seite besteht, wenn sie alle drei Werte beim 75. Perzentil echter Seitenaufrufe erreicht, getrennt nach Gerätetyp. Langsame Smartphones und schwache Netze zählen also genauso wie dein Laptop.",{"q":112,"a":113},"Wie verbessere ich den LCP in einer Nuxt-App?","Finde das LCP-Element, stelle sicher, dass es im servergerenderten HTML steckt, lade es mit hoher Fetch-Priorität vor und lade es niemals lazy. Mit Nuxt Image nutzt du die Prop preload mit fetchPriority high, lieferst ein modernes Format in passender Größe und hältst die Serverantwortzeit durch Prerendering oder Caching niedrig.",{"q":115,"a":116},"Warum ist der INP schlecht, obwohl Lighthouse grün ist?","Lighthouse lädt eine Seite in einer simulierten Umgebung ohne Nutzer und kann INP deshalb gar nicht messen; die Total Blocking Time ist nur ein Stellvertreter. INP misst jeden Klick, Tap und Tastendruck in echten Sessions, auch auf langsamen Geräten, mit schweren Drittanbieter-Skripten und mit Arbeit, die nach der Hydration anfällt.",{"q":118,"a":119},"Hilft Lazy Hydration bei den Core Web Vitals in Nuxt?","Ja, vor allem beim INP und manchmal beim LCP. Nuxt unterstützt Hydrationsstrategien wie hydrate-on-visible, hydrate-on-idle und hydrate-on-interaction an Lazy-Komponenten, sodass Widgets unterhalb des sichtbaren Bereichs nicht mit den ersten Interaktionen konkurrieren. Beachte: Jede Prop-Änderung an so einer Komponente löst sofort die Hydration aus.",{"q":121,"a":122},"Was ist für die Nuxt-Performance besser: SSR, Prerendering oder ISR?","Es gibt keinen Alleingewinner. Prerendering liefert die schnellste und stabilste TTFB für selten geänderte Inhalte, swr oder isr ergänzen gecachte Regenerierung für katalogartige Seiten, und volles SSR passt zu personalisierten oder pro Request erzeugten Seiten. Mit Nuxt-Route-Rules mischst du alle Varianten in einer App.",{"q":124,"a":125},"Wie messe ich Core Web Vitals bei meinen echten Nutzern?","Kombiniere zwei Quellen. CrUX, über PageSpeed Insights oder die API, zeigt, was Chrome-Nutzer erlebt haben, und ist das, was Google sieht. Für eigene Segmente und zur Fehlersuche bindest du die web-vitals-Bibliothek ein, nutzt den Attribution-Build und sendest die Metriken per sendBeacon an einen eigenen Endpunkt.",[127,130,133,136,139,142,145,148,151,154,157],{"id":128,"title":129},"measure-first","Erst messen: Felddaten schlagen Labordaten",{"id":131,"title":132},"where-metrics-come-from","Woher jede Metrik in einem Nuxt-Seitenaufruf kommt",{"id":134,"title":135},"lcp","LCP: das größte Element auffindbar und leicht machen",{"id":137,"title":138},"inp","INP: Hydration, lange Tasks und was du auslieferst",{"id":140,"title":141},"cls","CLS: Platz für alles reservieren, was später kommt",{"id":143,"title":144},"third-party-scripts","Drittanbieter-Skripte: die Steuer, die du nicht kontrollierst",{"id":146,"title":147},"rendering-modes","Prerender, SSR oder ISR: pro Route entscheiden",{"id":149,"title":150},"fix-by-metric","Tabelle: Fix je Metrik",{"id":152,"title":153},"shops","Shops sind anders: was ich bei B2B-Stores prüfe",{"id":155,"title":156},"rollout-checklist","Eine Rollout-Checkliste",{"id":158,"title":159},"sources","Quellen",[161,165,179,182,202,205,245,257,258,261,270,273,274,277,283,312,320,321,324,339,342,374,381,382,385,417,420,421,424,430,433,434,437,503,511,512,515,606,607,614,622,623,644,645],{"type":162,"content":163},"paragraph",[164],"Eine Nuxt-Site kann in Lighthouse 100 Punkte erreichen und sich trotzdem für die Menschen zäh anfühlen, die dein Geschäft bezahlen. Der Grund ist einfach: Core Web Vitals sind eine Feldmetrik. Sie beschreiben, was echte Nutzer auf echten Geräten erlebt haben, beim 75. Perzentil, und dazu gehört auch das Mittelklasse-Android-Handy im Zug, nicht nur dein Entwickler-Laptop.",{"type":162,"content":166},[167,168,172,173,178],"Dieser Artikel ist die Checkliste, die ich für Nuxt-Sites und Shops verwende (Nuxt 4, aktuell in der 4.5-Linie). Sie ist nach Metrik gegliedert: woher LCP, INP und CLS in einer servergerenderten Vue-App kommen, welche Nuxt-Features jede Ursache adressieren und wo dir die Plattform nicht hilft. Am Ende stehen eine Tabelle „Fix je Metrik“ und eine kurze Rollout-Checkliste. Zum Kontext: Ich habe einen TYPO3-B2B-Shop refaktoriert und die ",{"tag":169,"children":170},"strong",[171],"Seitenladezeit um 65 % verkürzt (von 4,6 s auf 1,6 s)",", siehe ",{"tag":174,"to":175,"children":176},"link","\u002Freferences",[177],"Referenzen",". Die Prinzipien unten gelten unabhängig davon, welcher Stack hinter der Seite steht.",{"type":180,"level":181,"id":128,"text":129},"heading",2,{"type":162,"content":183},[184,185,188,189,192,193,196,197,201],"Die drei Core Web Vitals und ihre Ziele sind festgelegt: ",{"tag":169,"children":186},[187],"LCP"," (Laden) innerhalb von 2,5 Sekunden, ",{"tag":169,"children":190},[191],"INP"," (Reaktionsfähigkeit) höchstens 200 Millisekunden, ",{"tag":169,"children":194},[195],"CLS"," (visuelle Stabilität) höchstens 0,1. Eine Seite besteht, wenn sie alle drei beim 75. Perzentil erreicht, getrennt nach Gerätetyp. Google betont ausdrücklich, dass ",{"tag":198,"href":35,"children":199},"a",[200],"Labormessung kein Ersatz für Feldmessung ist",", und Tools wie Lighthouse, die eine Seite ohne Nutzer laden, können INP gar nicht messen. Die Total Blocking Time ist nur ein Näherungswert.",{"type":162,"content":203},[204],"Deshalb akzeptiere ich kein Performance-Ticket mit dem Satz „Lighthouse sagt 98“. Ich will zwei Feldquellen und ein Lab-Tool, jedes für das, was es gut kann:",{"type":206,"head":207,"rows":214},"table",[208,210,212],[209],"Quelle",[211],"Was sie dir sagt",[213],"Blinder Fleck",[215,225,235],[216,221,223],[217,220],{"tag":169,"children":218},[219],"CrUX"," (über PageSpeed Insights, die CrUX-API, BigQuery)",[222],"Was Chrome-Nutzer auf deiner Origin oder URL erlebt haben; der Datensatz, den Google betrachtet. Gut für „bestehen wir?“",[224],"Nur geeignete, ausreichend populäre Seiten; Chrome-Nutzer mit Opt-in; kein Chrome auf iOS, kein WebView; keine Details zu Ursachen",[226,231,233],[227,230],{"tag":169,"children":228},[229],"RUM"," (die web-vitals-Bibliothek, an deinen eigenen Endpunkt gesendet)",[232],"Alle drei Metriken pro Seitentemplate, Gerät, Land oder A\u002FB-Variante; der Attribution-Build ergänzt das verantwortliche Element oder die Interaktion",[234],"Du baust und pflegst es selbst; Einwilligungs- und Datenschutzregeln gelten",[236,241,243],[237,240],{"tag":169,"children":238},[239],"Lighthouse \u002F DevTools"," (Lab)",[242],"Reproduzierbare Läufe zur Fehlersuche bei LCP und CLS, Request-Wasserfälle, Bundle-Analyse",[244],"Keine echten Nutzer, kein INP; ein schneller Lab-Rechner versteckt die meisten Probleme",{"type":162,"content":246},[247,248,251,252,256],"Die Bibliothek ",{"tag":198,"href":59,"children":249},[250],"web-vitals"," liefert onLCP, onINP und onCLS; ihr Attribution-Build, etwa 1,5 KB größer, ergänzt Diagnosedaten, etwa welches Element der LCP-Kandidat war. Sende die Werte mit navigator.sendBeacon an einen Endpunkt, den du kontrollierst, versieh sie mit dem Route-Template (Produktseite, Kategorie, Checkout), und du kannst endlich die Frage „welcher Seitentyp fällt durch?“ beantworten, statt über Durchschnittswerte zu streiten. Wenn dich auch interessiert, wie Agenten und Crawler diese Seiten sehen, behandelt das ",{"tag":174,"to":253,"children":254},"\u002Fblog\u002Fgenerative-engine-optimization-audit",[255],"GEO-Audit"," die andere Seite derselben Seiten.",{"type":180,"level":181,"id":131,"text":132},{"type":162,"content":259},[260],"Nuxt rendert standardmäßig universell: Der Server sendet komplettes HTML, dann lädt der Browser das JavaScript und hydriert die Seite, um sie interaktiv zu machen. Dieses Zwei-Phasen-Modell erklärt die meisten Zahlen. Der LCP entscheidet sich in der ersten Hälfte (Serverantwort, Entdecken und Laden des größten Elements), der INP in der zweiten (JavaScript-Ausführung und Hydration konkurrieren mit den ersten Taps des Nutzers), und der CLS läuft durch die gesamte Lebensdauer der Seite.",{"type":262,"attrs":263,"inner":267,"caption":268},"diagram",{"viewBox":264,"role":265,"aria-labelledby":266},"0 0 770 270","img","d1-cwv-t d1-cwv-d","\u003Ctitle id=\"d1-cwv-t\">Ein Nuxt-Seitenaufruf und seine Core Web Vitals\u003C\u002Ftitle>\u003Cdesc id=\"d1-cwv-d\">Fünf Stufen: Server-HTML, Hero-Bild, erstes Rendering, Hydration und Interaktion. Der LCP umfasst die ersten drei Stufen, der INP die letzten zwei und der CLS die gesamte Lebensdauer der Seite.\u003C\u002Fdesc>\u003Ctext x=\"20\" y=\"28\" class=\"d-title\">Ein Nuxt-Seitenaufruf und seine Core Web Vitals\u003C\u002Ftext>\u003Ctext x=\"750\" y=\"28\" text-anchor=\"end\" class=\"d-label\">Universelles Rendering\u003C\u002Ftext>\u003Crect x=\"20\" y=\"52\" width=\"130\" height=\"64\" rx=\"10\" class=\"d-sky\" \u002F>\u003Ctext x=\"85\" y=\"80\" text-anchor=\"middle\" class=\"d-text\">Server\u003C\u002Ftext>\u003Ctext x=\"85\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">HTML, TTFB\u003C\u002Ftext>\u003Cpath d=\"M150 84 H162\" class=\"d-line\" \u002F>\u003Cpath d=\"M170 84 l-9 -5 v10 z\" class=\"d-head\" \u002F>\u003Crect x=\"170\" y=\"52\" width=\"130\" height=\"64\" rx=\"10\" class=\"d-box\" \u002F>\u003Ctext x=\"235\" y=\"80\" text-anchor=\"middle\" class=\"d-text\">Hero-Bild\u003C\u002Ftext>\u003Ctext x=\"235\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">finden + laden\u003C\u002Ftext>\u003Cpath d=\"M300 84 H312\" class=\"d-line\" \u002F>\u003Cpath d=\"M320 84 l-9 -5 v10 z\" class=\"d-head\" \u002F>\u003Crect x=\"320\" y=\"52\" width=\"130\" height=\"64\" rx=\"10\" class=\"d-mint\" \u002F>\u003Ctext x=\"385\" y=\"80\" text-anchor=\"middle\" class=\"d-text\">Erstes Bild\u003C\u002Ftext>\u003Ctext x=\"385\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">LCP-Element\u003C\u002Ftext>\u003Cpath d=\"M450 84 H462\" class=\"d-line\" \u002F>\u003Cpath d=\"M470 84 l-9 -5 v10 z\" class=\"d-head\" \u002F>\u003Crect x=\"470\" y=\"52\" width=\"130\" height=\"64\" rx=\"10\" class=\"d-accent\" \u002F>\u003Ctext x=\"535\" y=\"80\" text-anchor=\"middle\" class=\"d-text\">Hydration\u003C\u002Ftext>\u003Ctext x=\"535\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">JS läuft\u003C\u002Ftext>\u003Cpath d=\"M600 84 H612\" class=\"d-line\" \u002F>\u003Cpath d=\"M620 84 l-9 -5 v10 z\" class=\"d-head\" \u002F>\u003Crect x=\"620\" y=\"52\" width=\"130\" height=\"64\" rx=\"10\" class=\"d-gold\" \u002F>\u003Ctext x=\"685\" y=\"80\" text-anchor=\"middle\" class=\"d-text\">Interaktion\u003C\u002Ftext>\u003Ctext x=\"685\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">Tap, Klick, Taste\u003C\u002Ftext>\u003Cpath d=\"M20 150 H450\" class=\"d-line-accent\" \u002F>\u003Cpath d=\"M20 144 v12 M450 144 v12\" class=\"d-line-accent\" \u002F>\u003Ctext x=\"235\" y=\"172\" text-anchor=\"middle\" class=\"d-text\">LCP: höchstens 2,5 s\u003C\u002Ftext>\u003Cpath d=\"M470 150 H750\" class=\"d-line-accent\" \u002F>\u003Cpath d=\"M470 144 v12 M750 144 v12\" class=\"d-line-accent\" \u002F>\u003Ctext x=\"610\" y=\"172\" text-anchor=\"middle\" class=\"d-text\">INP: höchstens 200 ms\u003C\u002Ftext>\u003Crect x=\"20\" y=\"206\" width=\"730\" height=\"46\" rx=\"10\" class=\"d-box d-dash\" \u002F>\u003Ctext x=\"385\" y=\"234\" text-anchor=\"middle\" class=\"d-small\">CLS: höchstens 0,1, die ganze Lebensdauer, Platz reservieren\u003C\u002Ftext>",[269],"Der LCP entscheidet sich großteils vor der Hydration, der INP danach und der CLS durchgehend. Beheb sie in dieser Reihenfolge der Zeitleiste.",{"type":162,"content":271},[272],"Web.dev teilt den LCP in vier Teile: Time to First Byte, Resource Load Delay, Resource Load Duration und Element Render Delay. Bei einer gut optimierten Seite gilt als Richtwert etwa 40 % TTFB, unter 10 % Load Delay, 40 % Load Duration und unter 10 % Render Delay. Die beiden Delays sollten gegen null gehen; in meinen Audits verstecken sich dort die einfachen Gewinne, weil sich niemand dafür zuständig fühlt.",{"type":180,"level":181,"id":134,"text":135},{"type":162,"content":275},[276],"Das LCP-Element ist meist ein Bild (ein img, ein Video-Poster oder ein CSS-Hintergrundbild) oder ein großer Textblock. Finde zuerst heraus, welches es pro Template ist, mit den DevTools oder dem Attribution-Build; auf Shop-Kategorieseiten ist es oft ein Banner, auf Produktseiten das Hauptfoto. Dann arbeitest du die Teilstücke ab.",{"type":162,"content":278},[279,282],{"tag":169,"children":280},[281],"Entdeckung."," Die LCP-Ressource sollte im HTML-Quelltext auffindbar sein. Ein Hero, das per clientseitigem JavaScript eingefügt wird, ein CSS-Hintergrundbild oder ein Karussell, das erst nach der Hydration rendert, schieben die Anfrage hinter dein JavaScript-Bundle. Mit Nuxt Image hat die Komponente NuxtImg eine Prop preload, die ein Link-Tag in den Head setzt und eine fetchPriority von high akzeptiert. Setze nie loading=\"lazy\" auf das LCP-Bild: web.dev nennt das als direkte Ursache für Resource Load Delay.",{"type":284,"ordered":285,"items":286},"list",false,[287,292,297,302,307],[288,291],{"tag":169,"children":289},[290],"Richtiges Format und richtige Größe."," NuxtImg unterstützt format, quality und sizes, sodass aus einer Quelldatei responsive, moderne Varianten (webp oder avif) werden. Ich setze für jedes Hero- und Produktbild explizite sizes; ein Bild mit 2.000 Pixeln für einen 400-Pixel-Slot ist die häufigste einzelne Verschwendung, die ich sehe.",[293,296],{"tag":169,"children":294},[295],"Explizite Maße."," Gib width und height (oder ein Seitenverhältnis) an, damit der Browser den Platz reserviert. Das hilft bei der LCP-Entdeckung und ist, wie unten gezeigt, auch der erste CLS-Fix.",[298,301],{"tag":169,"children":299},[300],"Serverantwortzeit."," Die TTFB ist der größte Anteil des LCP-Budgets. Prerendere oder cache, was geht (siehe Abschnitt Rendering), und halte langsame Datenabrufe mit der Option lazy oder useLazyFetch für unkritische Daten aus dem kritischen Pfad heraus.",[303,306],{"tag":169,"children":304},[305],"Fonts."," Ist das LCP-Element Text, verzögert eine spät geladene Webfont es. Lade die kritische Schrift vor und nutze einen Fallback mit passenden Metriken (nächster Abschnitt zum CLS).",[308,311],{"tag":169,"children":309},[310],"Keine Render-Blocker-Überraschungen."," Ein Consent-Banner, ein A\u002FB-Test-Snippet, das die Seite versteckt, oder ein synchrones Drittanbieter-Skript im Head kann das Rendering verzögern, selbst wenn alles andere perfekt ist.",{"type":162,"content":313},[314,315,319],"Nuxt 4.5 hat außerdem experimentelles SSR-Streaming eingeführt, das die HTML-Hülle sofort sendet, statt die ganze Seite zu puffern, und direkt auf die TTFB zielt. Es ist experimentell, für Bots deaktiviert, und alles, was die Antwort nach Beginn des Renderings ändert (Header, Redirects), erreicht den Client nicht; ich würde es deshalb auf einer Route mit RUM testen, bevor ich es übernehme. Dasselbe Streaming-Denken für KI-Features steht in ",{"tag":174,"to":316,"children":317},"\u002Fblog\u002Fnuxt-llm-features-ai-sdk-streaming",[318],"LLM-Features in Nuxt mit dem AI SDK",".",{"type":180,"level":181,"id":137,"text":138},{"type":162,"content":322},[323],"INP beobachtet die Latenz jedes Klicks, Taps und Tastendrucks während eines Besuchs, von der Eingabeverzögerung über die Event-Handler bis zum nächsten gezeichneten Frame. Gut sind höchstens 200 ms; über 500 ms ist schlecht. Er hat First Input Delay abgelöst, weil FID nur die erste Interaktion betrachtete. Scrollen und Hovern zählen nicht.",{"type":162,"content":325},[326,327,330,331,334,335,338],"In einer servergerenderten Vue-App ist das Muster immer gleich: Die Seite wirkt fertig, der Nutzer tippt, und der Main Thread ist noch mit Hydration oder einem Drittanbieter-Tag beschäftigt. Das ist ",{"tag":169,"children":328},[329],"Eingabeverzögerung"," durch lange Tasks (alles über 50 ms blockiert den Main Thread). Kommen langsame Event-Handler (",{"tag":169,"children":332},[333],"Verarbeitungsdauer",") und teure Re-Renders oder Layout-Arbeit (",{"tag":169,"children":336},[337],"Darstellungsverzögerung",") hinzu, hast du die drei Stellen, an denen INP verloren geht.",{"type":162,"content":340},[341],"Was ich dagegen tue, in der Reihenfolge des Nutzens:",{"type":284,"ordered":285,"items":343},[344,349,354,359,364,369],[345,348],{"tag":169,"children":346},[347],"Weniger JavaScript ausliefern."," Prüfe das Bundle mit einem Visualizer, bevor du Code anfasst. Jede schwere Bibliothek auf einer Seite braucht eine Begründung; eine Datums-Bibliothek oder ein Rich-Text-Editor auf einer Katalogseite hat selten eine.",[350,353],{"tag":169,"children":351},[352],"Verzögert hydrieren."," Nuxt unterstützt verzögerte Hydration an Lazy-Komponenten: hydrate-on-visible, hydrate-on-idle, hydrate-on-interaction, hydrate-on-media-query, hydrate-after, hydrate-when und hydrate-never. Bewertungen, Empfehlungs-Karussells, Footer und Chat-Widgets müssen beim ersten Rendering nicht interaktiv sein. Die Einschränkung: Jede Prop-Änderung an einer verzögert hydrierten Komponente löst sofort die Hydration aus, und es funktioniert mit Single-File-Komponenten und Template-Props, nicht mit v-bind-Spreads.",[355,358],{"tag":169,"children":356},[357],"Einmal rendern, weniger State ausliefern."," Nuxt serialisiert abgerufene Daten in den Payload. Nutze pick oder transform bei useFetch und useAsyncData, damit nur die Felder gesendet werden, die das Template braucht; laut Doku verhindern sie nicht, dass die Daten abgerufen werden, halten sie aber aus dem Payload. Payload-Extraktion ist standardmäßig aktiv, und das Experiment stripNeverHydratedData hält auch die Daten von hydrate-never-Komponenten heraus.",[360,363],{"tag":169,"children":361},[362],"Statisches statisch lassen."," Komponenten, die sich nach dem Rendern nie ändern (Marketing-Blöcke, Footer), sind Kandidaten für hydrate-never oder einen reinen Server-Ansatz, damit Vue dafür keinen reaktiven State anlegt.",[365,368],{"tag":169,"children":366},[367],"Lange Tasks zerlegen."," Wo du schwere Arbeit leisten musst (Filtern einer großen Produktliste, Parsing), gib den Main Thread frei. web.dev empfiehlt scheduler.yield() mit setTimeout als Fallback und etwa alle 50 ms Arbeit zu yielden statt nach jedem Element.",[370,373],{"tag":169,"children":371},[372],"Handler zähmen."," Entprelle teure Eingabe-Handler, vermeide synchrone Layout-Reads in Schleifen und zeige sofort Feedback (gedrückter Zustand, Spinner), bevor langsame Arbeit beginnt, denn INP endet beim nächsten gezeichneten Frame.",{"type":375,"variant":376,"title":377,"body":378},"callout","tip","Teste INP so, wie Nutzer ihn auslösen",[379],[380],"Öffne die DevTools mit CPU-Drosselung, lade neu und klicke in den ersten Sekunden auf die Hauptnavigation, das Suchfeld und den Warenkorb-Button. Wenn eines davon hakt, ist das die echte INP-Geschichte, nicht der Lab-Score. Bestätige dann mit RUM-Attribution, welche Interaktion im Feld die schlechteste ist.",{"type":180,"level":181,"id":140,"text":141},{"type":162,"content":383},[384],"Layout-Verschiebung ist die mechanischste Metrik: Etwas ist erschienen oder hat die Größe geändert und hat bereits sichtbare Inhalte verschoben. In Nuxt-Shops finde ich immer wieder dieselben Verursacher:",{"type":284,"ordered":285,"items":386},[387,392,397,402,407,412],[388,391],{"tag":169,"children":389},[390],"Bilder und Medien ohne Maße."," Setze immer width und height; Browser leiten daraus das Seitenverhältnis ab. Bei responsiven Bildern leistet die CSS-Eigenschaft aspect-ratio dasselbe.",[393,396],{"tag":169,"children":394},[395],"Webfonts."," Sowohl der Flash of Unstyled Text als auch der Flash of Invisible Text können das Layout verschieben. Das Modul Nuxt Fonts wendet eine automatische Optimierung der Font-Metriken an (über fontaine und capsize), sodass die Fallback-Schrift denselben Platz belegt wie die Webfont, unterstützt lokalen Download von Anbietern wie Google und beseitigt eine ganze Klasse von Font-Verschiebungen fast geschenkt. Kritische Fonts vorzuladen und font-display: optional sind die weiteren Empfehlungen von web.dev.",[398,401],{"tag":169,"children":399},[400],"Späte Banner."," Cookie- und Consent-Leisten, Aktionsstreifen und „Gratisversand ab“-Hinweise, die nach der Hydration eingefügt werden, drücken die ganze Seite nach unten. Rendere sie serverseitig in reserviertem Platz oder lege sie mit fixer Position darüber, statt sie in den Fluss einzufügen.",[403,406],{"tag":169,"children":404},[405],"Embeds und Werbung."," Reserviere eine Box mit min-height oder aspect-ratio, bevor ein Iframe, eine Karte oder ein Video lädt. Dasselbe gilt für verzögert hydrierte Komponenten, die beim Interaktivwerden ihre Höhe ändern.",[408,411],{"tag":169,"children":409},[410],"Nur-Client-Inhalte."," Eine .client.vue-Komponente oder ein ClientOnly-Block rendert erst nach dem Mount; ohne Platzhalter in der richtigen Größe verschiebt sie die Seite. Nutze den Fallback-Slot, um ein Skeleton mit den endgültigen Maßen zu rendern.",[413,416],{"tag":169,"children":414},[415],"Animationen."," Animiere mit transform statt top, left oder height; komponierte Animationen tragen nicht zum CLS bei.",{"type":162,"content":418},[419],"Noch ein billiger Gewinn: Mach Seiten für den Back\u002FForward-Cache tauglich. Wiederhergestellte Seiten erscheinen sofort und verursachen keine neuen Layout-Verschiebungen, was in Shops wichtig ist, in denen Nutzer zwischen Listing und Detailseite hin- und herspringen.",{"type":180,"level":181,"id":143,"text":144},{"type":162,"content":422},[423],"Analytics, Tag Manager, Chat-Widgets, Bewertungs-Badges und A\u002FB-Test-Tools laufen auf demselben Main Thread wie deine Vue-App. Sie sind der übliche Grund, warum ein schlankes Nuxt-Bundle trotzdem einen schlechten INP erzeugt und warum der LCP regrediert, nachdem das Marketing „nur noch einen Tag“ ergänzt hat. Behandle jedes Skript als budgetierte Abhängigkeit mit einem Verantwortlichen.",{"type":162,"content":425},[426,429],{"tag":198,"href":86,"children":427},[428],"Nuxt Scripts"," ist der offizielle Weg, das zu steuern. Die Composable useScript lädt Drittanbieter-Skripte mit SSR-Unterstützung, verzögertem Laden und typisierten APIs. Der Standard-Trigger onNuxtReady wartet auf die Hydration und plant das Laden dann in einer Leerlaufphase. Weitere Optionen sind manuelles Laden, useScriptTriggerIdleTimeout, useScriptTriggerInteraction (erstes Scrollen, Klicken oder Tippen), useScriptTriggerElement (wenn ein Element sichtbar wird) und einwilligungsbasierte Trigger. Es gibt Registry-Integrationen für gängige Dienste wie Google Analytics, Google Maps, YouTube und Stripe sowie Facade-Komponenten, die einen leichten Platzhalter zeigen, bis das echte Embed gebraucht wird.",{"type":162,"content":431},[432],"Meine Regeln: nichts von Drittanbietern im kritischen Rendering-Pfad; Chat und Video hinter Interaktions- oder Sichtbarkeits-Triggern; Analytics nach Hydration und Einwilligung; jedes Skript vor und nach dem Release gegen seine INP-Kosten im RUM prüfen. Reserviere Layout-Platz für alles Visuelle (siehe CLS). Bei einem B2B-Shop mit eingeloggten Käufern würde ich außerdem fragen, ob ein Heatmap-Tool im Checkout überhaupt laufen muss.",{"type":180,"level":181,"id":146,"text":147},{"type":162,"content":435},[436],"Der Rendering-Modus legt deine TTFB-Untergrenze und damit deine LCP-Obergrenze fest. Das Hybrid-Rendering von Nuxt lässt dich pro Route mit Route-Rules entscheiden, statt eine globale Einstellung zu verwenden:",{"type":206,"head":438,"rows":447},[439,441,443,445],[440],"Modus (Route-Rule)",[442],"Was er tut",[444],"Einsatz",[446],"Achtung",[448,459,470,481,492],[449,453,455,457],[450],{"tag":169,"children":451},[452],"prerender: true",[454],"Erzeugt statisches HTML zur Build-Zeit",[456],"Landingpages, Doku, Blogartikel, Rechtstexte",[458],"Inhalte sind nur so aktuell wie der letzte Build",[460,464,466,468],[461],{"tag":169,"children":462},[463],"swr",[465],"Liefert eine gecachte Antwort und regeneriert sie im Hintergrund",[467],"Kategorie- und Listenseiten, die sich ein paarmal am Tag ändern",[469],"Der erste Besucher nach Ablauf kann veraltete Inhalte bekommen; braucht Server- oder Plattform-Cache",[471,475,477,479],[472],{"tag":169,"children":473},[474],"isr",[476],"CDN-gecachte Seiten mit Revalidierung; unterstützt auf Netlify und Vercel über native Integration",[478],"Große Kataloge, bei denen ein vollständiger Rebuild zu langsam ist",[480],"Plattformspezifisch; prüfe dein Hosting, bevor du darum herum planst",[482,486,488,490],[483],{"tag":169,"children":484},[485],"Universelles SSR (Standard)",[487],"Rendert HTML pro Request und hydriert dann",[489],"Personalisierte oder pro Request erzeugte Seiten: Warenkorb, Konto, Preislisten",[491],"Die TTFB hängt von deinem Backend und den Datenabrufen ab",[493,497,499,501],[494],{"tag":169,"children":495},[496],"ssr: false",[498],"Reines Client-Rendering für diese Route",[500],"Authentifizierte Dashboards hinter einem Login",[502],"Langsamerer Erstaufruf und schwächere SEO-Sichtbarkeit; halte es von Landingpages fern",{"type":162,"content":504},[505,506,510],"Bei einem B2B-Shop ist die Aufteilung meist klar: Marketing-, Content- und Kategorieseiten werden prerendert oder gecacht, Produktseiten nutzen swr oder isr, wobei Preis und Bestand nach der Hydration clientseitig (oder pro Kunde am Edge) geladen werden, und Warenkorb, Checkout und Konto bleiben bei SSR. Die Falle ist die Personalisierung: Ein einziger kundenspezifischer Preis im servergerenderten HTML macht jede gecachte Seite zu einer Seite pro Request. Halte die Hülle cachebar und lade den persönlichen Teil getrennt, mit reservierter Box, damit er keine Layout-Verschiebung verursacht. Dieselben Shop-Seiten rufen auch ",{"tag":174,"to":507,"children":508},"\u002Fblog\u002Fagentic-commerce-protocols-ucp-acp-guide",[509],"Agentic-Commerce-Protokolle"," und Agenten ab, eine schnelle, cachebare Hülle zahlt sich also doppelt aus.",{"type":180,"level":181,"id":149,"text":150},{"type":162,"content":513},[514],"Die Kurzfassung zum Anpinnen neben dein RUM-Dashboard:",{"type":206,"head":516,"rows":525},[517,519,521,523],[518],"Metrik",[520],"Typische Ursache in Vue\u002FNuxt",[522],"Erster Fix",[524],"Nuxt-Werkzeug",[526,536,546,556,566,576,586,596],[527,530,532,534],[528],{"tag":169,"children":529},[187],[531],"Hero-Bild spät gefunden, lazy geladen oder zu groß",[533],"Ins Server-HTML, vorladen, richtige Größe und Format, nie lazy laden",[535],"NuxtImg: preload mit fetchPriority high, sizes, format, quality",[537,540,542,544],[538],{"tag":169,"children":539},[187],[541],"Hohe TTFB durch SSR und langsame Datenabrufe",[543],"Prerendern oder cachen; unkritische Daten aus dem kritischen Pfad nehmen",[545],"routeRules (prerender, swr, isr), useLazyFetch, experimentelles SSR-Streaming",[547,550,552,554],[548],{"tag":169,"children":549},[187],[551],"Text-LCP wartet auf eine Webfont",[553],"Kritische Schrift vorladen, Fallback mit passenden Metriken",[555],"Modul Nuxt Fonts",[557,560,562,564],[558],{"tag":169,"children":559},[191],[561],"Main Thread hydriert die ganze Seite",[563],"Bereiche unterhalb des sichtbaren Bereichs und nicht interaktive Teile verzögert oder nie hydrieren",[565],"Lazy-Komponenten mit hydrate-on-visible, hydrate-on-idle, hydrate-on-interaction, hydrate-never",[567,570,572,574],[568],{"tag":169,"children":569},[191],[571],"Große Bundles und großer Payload",[573],"Schwere Bibliotheken entfernen oder splitten; nur genutzte Felder senden",[575],"Code-Splitting mit Lazy-Präfix, pick und transform, Payload-Extraktion",[577,580,582,584],[578],{"tag":169,"children":579},[191],[581],"Drittanbieter-Tags und lange Tasks",[583],"Tags verzögern, in schweren Schleifen yielden, Handler entprellen",[585],"Nuxt-Scripts-Trigger, scheduler.yield() mit Fallback",[587,590,592,594],[588],{"tag":169,"children":589},[195],[591],"Bilder und Embeds ohne reservierten Platz",[593],"width und height oder aspect-ratio für alles, was später lädt",[595],"NuxtImg mit Maßen, CSS aspect-ratio",[597,600,602,604],[598],{"tag":169,"children":599},[195],[601],"Font-Swap, späte Banner, Nur-Client-Blöcke",[603],"Fallbacks mit passenden Metriken; Banner-Platz reservieren; Skeleton-Fallbacks",[605],"Nuxt Fonts, Fallback-Slot von ClientOnly",{"type":180,"level":181,"id":152,"text":153},{"type":162,"content":608},[609,610,613],"Bei einem Refactoring eines TYPO3-B2B-Shops habe ich die Seitenladezeit um 65 % reduziert, von 4,6 s auf 1,6 s (",{"tag":174,"to":175,"children":611},[612],"Details in den Referenzen","). Die Prinzipien dieses Artikels wende ich dort genauso an: erst messen, den kritischen Pfad kurz halten und jeden zusätzlichen Request und jedes Skript als etwas behandeln, das sich seinen Platz verdienen muss.",{"type":162,"content":615},[616,617,621],"Shops bringen drei eigene Fallen mit. Produktlisten rendern Hunderte Bilder und Filter, also lade alles außer der ersten Reihe lazy und miss INP bei Filter-Interaktionen, nicht nur beim Laden. Preise, Bestand und kundenspezifische Kataloge verleiten dazu, das Caching für die ganze Seite abzuschalten. Und der Tag-Stack des Shops (Analytics, Remarketing, Bewertungen, Live-Chat) wächst jedes Quartal. Wenn du ein Nuxt-Storefront baust oder migrierst, zeigt meine Seite ",{"tag":174,"to":618,"children":619},"\u002Fexpertise\u002Fvue-nuxt-developer",[620],"Vue- und Nuxt-Expertise",", was ich übernehme.",{"type":180,"level":181,"id":155,"text":156},{"type":284,"ordered":624,"items":625},true,[626,628,630,632,634,636,638,640,642],[627],"Richte RUM mit dem Attribution-Build von web-vitals ein, getaggt nach Route-Template, und halte die CrUX-Zahlen deiner Origin daneben.",[629],"Wähle die drei schlechtesten Templates nach Traffic und durchfallender Metrik; ignoriere den Rest, bis diese bestehen.",[631],"Identifiziere das LCP-Element jedes Templates und mach es im HTML auffindbar, vorgeladen, passend dimensioniert und nie lazy geladen.",[633],"Weise jeder Route per Route-Rules einen Rendering-Modus zu; halte personalisierte Daten aus gecachtem HTML heraus.",[635],"Füge das Modul Nuxt Fonts hinzu und prüfe die Fallback-Metriken; ergänze width, height oder aspect-ratio bei jedem Bild und Embed.",[637],"Prüfe Bundle und Payload; wende pick oder transform an; splitte schwere Komponenten mit dem Lazy-Präfix.",[639],"Ergänze Hydrationsstrategien für Komponenten unterhalb des sichtbaren Bereichs und nicht interaktive Komponenten; teste die ersten Taps erneut unter CPU-Drosselung.",[641],"Verschiebe jedes Drittanbieter-Skript zu Nuxt Scripts mit Trigger, Verantwortlichem und gemessenen INP-Kosten.",[643],"Füge ein Performance-Budget in die CI ein (Bundle-Größe, Lighthouse für LCP und CLS) und beobachte RUM über einige Wochen echten Traffic, bevor du den Sieg erklärst.",{"type":180,"level":181,"id":158,"text":159},{"type":284,"ordered":624,"items":646},[647,650,653,656,659,662,665,668,671,674,677,680,683,686,689,692,695,698,701],[648],{"tag":198,"href":35,"children":649},[34],[651],{"tag":198,"href":38,"children":652},[37],[654],{"tag":198,"href":41,"children":655},[40],[657],{"tag":198,"href":44,"children":658},[43],[660],{"tag":198,"href":47,"children":661},[46],[663],{"tag":198,"href":50,"children":664},[49],[666],{"tag":198,"href":53,"children":667},[52],[669],{"tag":198,"href":56,"children":670},[55],[672],{"tag":198,"href":59,"children":673},[58],[675],{"tag":198,"href":62,"children":676},[61],[678],{"tag":198,"href":65,"children":679},[64],[681],{"tag":198,"href":68,"children":682},[67],[684],{"tag":198,"href":71,"children":685},[70],[687],{"tag":198,"href":74,"children":688},[73],[690],{"tag":198,"href":77,"children":691},[76],[693],{"tag":198,"href":80,"children":694},[79],[696],{"tag":198,"href":83,"children":697},[82],[699],{"tag":198,"href":86,"children":700},[85],[702],{"tag":198,"href":89,"children":703},[88],[705,790,846,913],{"slug":706,"published":5,"minutes":6,"category":7,"tags":707,"keywords":712,"about":723,"sources":731,"cover":783,"og":784,"expertise":785,"locales":786,"lang":95,"title":787,"description":788,"coverAlt":789},"european-accessibility-act-b2b-shop",[708,709,710,711],"European Accessibility Act","BFSG","WCAG 2.2","B2B e-commerce",[713,714,715,716,717,718,719,720,721,722],"European Accessibility Act B2B shop","BFSG B2B Onlineshop","Barrierefreiheit Onlineshop","Spryker barrierefrei","barrierefrei Webshop","BaFG Österreich Webshop","EN 301 549 WCAG 2.2","BFSG Kleinstunternehmen Ausnahme","Pimcore TYPO3 Barrierefreiheit","EAA e-commerce checklist",[724,726,729],{"name":708,"url":725},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FEuropean_Accessibility_Act",{"name":727,"url":728},"Web Content Accessibility Guidelines","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_Content_Accessibility_Guidelines",{"name":12,"url":730},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FE-commerce",[732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780],{"title":733,"url":734},"BFSG section 1: purpose and scope (gesetze-im-internet.de)","https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F__1.html",{"title":736,"url":737},"BFSG section 2: definitions, consumer, microenterprise, e-commerce services","https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F__2.html",{"title":739,"url":740},"BFSG section 3: accessibility and the microenterprise exemption","https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F__3.html",{"title":742,"url":743},"BFSG section 14: duties of the service provider","https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F__14.html",{"title":745,"url":746},"BFSG section 32: rights of consumers and associations in the administrative procedure","https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F__32.html",{"title":748,"url":749},"BFSG section 37: fines","https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F__37.html",{"title":751,"url":752},"BFSG section 38: transitional provisions","https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F__38.html",{"title":754,"url":755},"Bundesfachstelle Barrierefreiheit: FAQ on the BFSG (B2B, microenterprises, EN 301 549)","https:\u002F\u002Fwww.bundesfachstelle-barrierefreiheit.de\u002FDE\u002FFachwissen\u002FProdukte-und-Dienstleistungen\u002FBarrierefreiheitsstaerkungsgesetz\u002FFAQ\u002Ffaq_node.html",{"title":757,"url":758},"AccessibleEU: The European accessibility standard EN 301 549 has been updated (7 September 2026)","https:\u002F\u002Faccessible-eu-centre.ec.europa.eu\u002Fcontent-corner\u002Fnews\u002Feuropean-accessibility-standard-en-301-549-has-been-updated-2026-09-07_en",{"title":760,"url":761},"W3C: Web Content Accessibility Guidelines (WCAG) 2.2","https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F",{"title":763,"url":764},"Deque: Automated testing identifies 57 percent of digital accessibility issues","https:\u002F\u002Fwww.deque.com\u002Fblog\u002Fautomated-testing-study-identifies-57-percent-of-digital-accessibility-issues\u002F",{"title":766,"url":767},"sitebrunch: What is the market surveillance authority for accessibility (MLBF)?","https:\u002F\u002Fwww.sitebrunch.com\u002Fnews\u002Fmlbf-marktueberwachungsstelle-barrierefreiheit",{"title":769,"url":770},"Marcus Herrmann: June 2026, how the MLBF intends to check","https:\u002F\u002Fmarcus-herrmann.com\u002Fblog\u002Fmlbf-verraet-wie-sie-pruefen-will",{"title":772,"url":773},"axes4: BFSG in practice, what has happened since the deadline (2026)","https:\u002F\u002Fwww.axes4.com\u002Fde\u002Fblog\u002Fpost\u002F2026\u002Fbfsg-in-der-praxis-was-sich-seit-dem-stichtag-getan-hat",{"title":775,"url":776},"ODC Legal: BFSG for websites, what companies must check in 2026","https:\u002F\u002Fwww.odclegal.de\u002Fblog\u002Fbfsg-website-pflicht",{"title":778,"url":779},"WKO: Information on the Austrian Barrierefreiheitsgesetz","https:\u002F\u002Fwww.wko.at\u002Fce-kennzeichnung-normen\u002Finformationen-zum-barrierefreiheitsgesetz",{"title":781,"url":782},"Web Crossing: One year of the Barrierefreiheitsgesetz, where online shops must improve","https:\u002F\u002Fwww.web-crossing.com\u002Fnews\u002Fdetail\u002Fein-jahr-barrierefreiheitsgesetz-wo-onlineshops-und-websites-jetzt-nachbessern-muessen\u002F","\u002Fimages\u002Fblog\u002Feuropean-accessibility-act-b2b-shop\u002Fcover.webp","\u002Fimages\u002Fblog\u002Feuropean-accessibility-act-b2b-shop\u002Fog.jpg","b2b-ecommerce-developer",[94,95,96],"European Accessibility Act im B2B-Shop: was Spryker-, Pimcore- und TYPO3-Teams beheben müssen","Gilt der European Accessibility Act für B2B-Shops? Anwendungsbereich von BFSG und BaFG, Kleinstunternehmen-Ausnahme, Durchsetzung 2026, WCAG 2.2 und Fahrplan.","Diagramm: Ein B2B-Shop verzweigt in die Verbraucher-Frage nach BFSG und BaFG, die WCAG-2.2-AA-Konformität, die Barrierefreiheitserklärung und die Marktüberwachung.",{"slug":791,"published":5,"minutes":792,"category":7,"tags":793,"keywords":796,"about":807,"sources":813,"cover":840,"og":841,"expertise":785,"locales":842,"lang":95,"title":843,"description":844,"coverAlt":845},"headless-product-configurator-b2b",12,[794,711,10,795],"Product configurator","Headless commerce",[797,798,799,800,801,802,803,804,805,806],"B2B product configurator","Produktkonfigurator","Produktkonfigurator TYPO3","B2B Konfigurator","headless product configurator","CPQ configure price quote","rule engine vs constraint solver","Nuxt Spryker Glue API","product configurator 100000 variants","accessible product configurator",[808,810,812],{"name":794,"url":809},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FProduct_configurator",{"name":795,"url":811},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHeadless_commerce",{"name":10,"url":28},[814,816,819,822,825,828,831,834,837],{"title":815,"url":809},"Wikipedia: Knowledge-based configuration (product configurator)",{"title":817,"url":818},"Google OR-Tools: The CP-SAT solver","https:\u002F\u002Fdevelopers.google.com\u002Foptimization\u002Fcp\u002Fcp_solver",{"title":820,"url":821},"Spryker documentation: Glue API, Product Configuration feature integration","https:\u002F\u002Fdocs.spryker.com\u002Fdocs\u002Fscos\u002Fdev\u002Ffeature-integration-guides\u002F202108.0\u002Fglue-api\u002Fglue-api-product-configuration-feature-integration.html",{"title":823,"url":824},"OWASP: Input Validation Cheat Sheet","https:\u002F\u002Fcheatsheetseries.owasp.org\u002Fcheatsheets\u002FInput_Validation_Cheat_Sheet.html",{"title":826,"url":827},"web.dev: Virtualize large lists","https:\u002F\u002Fweb.dev\u002Farticles\u002Fvirtualize-long-lists-react-window",{"title":829,"url":830},"W3C: Understanding SC 3.3.1 Error Identification (WCAG 2.2)","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Ferror-identification.html",{"title":832,"url":833},"W3C: Understanding SC 4.1.3 Status Messages (WCAG 2.2)","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fstatus-messages.html",{"title":835,"url":836},"W3C: Understanding SC 2.5.8 Target Size (Minimum) (WCAG 2.2)","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Ftarget-size-minimum.html",{"title":838,"url":839},"W3C WAI-ARIA Authoring Practices: Combobox pattern","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Fcombobox\u002F","\u002Fimages\u002Fblog\u002Fheadless-product-configurator-b2b\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fheadless-product-configurator-b2b\u002Fog.jpg",[94,95,96],"Headless B2B-Produktkonfigurator: Regeln, Preise und Nuxt auf einer Commerce-API","So baust du einen B2B-Produktkonfigurator headless: Regelwerk oder Solver, wo Regeln liegen, Preise auf dem Server, Nuxt auf Commerce-API, TYPO3, 100k+ Varianten.","Diagramm: Ein Nuxt-Frontend spricht mit einem Konfigurationsdienst, der Regeln aus dem PIM und Preise aus dem ERP liest und eine validierte Konfiguration an die Commerce-API übergibt.",{"slug":847,"published":5,"minutes":792,"category":7,"tags":848,"keywords":853,"about":864,"sources":873,"cover":907,"og":908,"expertise":785,"locales":909,"lang":95,"title":910,"description":911,"coverAlt":912},"pimcore-erp-delta-sync",[849,850,851,852],"Pimcore","SAP integration","PIM ERP sync","Symfony Messenger",[854,855,856,857,858,859,860,861,862,863],"Pimcore ERP delta sync","Pimcore developer","Pimcore SAP integration","PIM ERP Schnittstelle","Pimcore SAP Schnittstelle","PIM ERP sync best practices","Pimcore Symfony Messenger","delta sync vs full sync","idempotent import Pimcore","Pimcore Infor integration",[865,867,870],{"name":849,"url":866},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPimcore",{"name":868,"url":869},"SAP ERP","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSAP_ERP",{"name":871,"url":872},"Product information management","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FProduct_information_management",[874,877,880,883,886,889,892,895,898,901,904],{"title":875,"url":876},"Pimcore docs: Symfony Messenger","https:\u002F\u002Fdocs.pimcore.com\u002Fplatform\u002FGetting_Started\u002FInstallation\u002FAdvanced_Installation_Topics\u002FSymfony_Messenger\u002F",{"title":878,"url":879},"Pimcore docs: Platform Versions","https:\u002F\u002Fdocs.pimcore.com\u002Fplatform\u002FPimcore_Platform\u002FPlatform_Versions\u002F",{"title":881,"url":882},"Pimcore docs: Pimcore Editions","https:\u002F\u002Fdocs.pimcore.com\u002Fplatform\u002FPimcore_Platform\u002FPimcore_Editions\u002F",{"title":884,"url":885},"Pimcore docs: Data Importer","https:\u002F\u002Fdocs.pimcore.com\u002Fplatform\u002FData_Importer\u002F",{"title":887,"url":888},"Pimcore on GitHub: Release 2026.3.0","https:\u002F\u002Fgithub.com\u002Fpimcore\u002Fpimcore\u002Freleases\u002Ftag\u002Fv2026.3.0",{"title":890,"url":891},"Symfony docs: Messenger, Sync & Queued Message Handling","https:\u002F\u002Fsymfony.com\u002Fdoc\u002Fcurrent\u002Fmessenger.html",{"title":893,"url":894},"SAP Library: Change Pointer (Master Data Distribution)","https:\u002F\u002Fhelp.sap.com\u002Fdoc\u002Fsaphelp_nw73ehp1\u002F7.31.19\u002Fen-us\u002F4a\u002Fbb1e253536478be10000000a421937\u002Fcontent.htm?no_cache=true",{"title":896,"url":897},"SAP Library: Change Pointer (IDoc Interface\u002FALE)","https:\u002F\u002Fhelp.sap.com\u002Fdoc\u002Fsaphelp_em700_ehp01\u002F7.0.1\u002Fen-US\u002F12\u002F83e03c19758e71e10000000a114084\u002Fcontent.htm?no_cache=true",{"title":899,"url":900},"Infor docs: Infor ION and M3 BODs","https:\u002F\u002Fdocs.infor.com\u002Fm3cs\u002F10.2.3\u002Fen-us\u002Fm3csbom\u002Ffabsog\u002Fgoi1495809108914.html",{"title":902,"url":903},"Infor Developer Portal: Integration with ION","https:\u002F\u002Fdeveloper.infor.com\u002Ftutorials\u002Fintegration-with-ion",{"title":905,"url":906},"Debezium: open source distributed platform for change data capture","https:\u002F\u002Fdebezium.io\u002F","\u002Fimages\u002Fblog\u002Fpimcore-erp-delta-sync\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fpimcore-erp-delta-sync\u002Fog.jpg",[94,95,96],"Pimcore ERP Delta-Sync: Produktdaten zwischen SAP oder Infor, PIM und Shop","Produktdaten zwischen SAP oder Infor, Pimcore und Shop synchronisieren: Delta vs. Full Sync, Änderungserkennung, idempotente Importe, Messenger, Ownership, Replays.","Diagramm: Produktdaten fließen von einem SAP- oder Infor-ERP über einen Delta-Extrakt und eine Message Queue in Pimcore, wo Qualitätsprüfungen laufen, und weiter in den Shop.",{"slug":914,"published":915,"minutes":916,"category":7,"tags":917,"keywords":923,"about":932,"sources":941,"cover":954,"og":955,"expertise":92,"locales":956,"lang":95,"title":957,"description":958,"coverAlt":959},"home-assistant-ev-charging-energy-manager","2026-09-29",9,[918,919,920,921,922],"Home Assistant","EPEX Spot","Energy prices","Tesla","Energy management",[924,925,926,927,928,929,930,931],"EPEX Austria prices","spot tariff Austria EV charging","Home Assistant EV charging","cheapest hours charging","day-ahead price Austria","negative electricity prices Austria","Tesla charging spot prices","load management 3 phase",[933,936,938],{"name":934,"url":935},"EPEX SPOT","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FEPEX_SPOT",{"name":918,"url":937},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHome_Assistant",{"name":939,"url":940},"Load management","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLoad_management",[942,945,948,951],{"title":943,"url":944},"aWATTar Austria: market data API","https:\u002F\u002Fwww.awattar.at\u002Fservices\u002Fapi",{"title":946,"url":947},"EPEX SPOT: market results","https:\u002F\u002Fwww.epexspot.com\u002Fen\u002Fmarket-results",{"title":949,"url":950},"Home Assistant developer docs: apps","https:\u002F\u002Fdevelopers.home-assistant.io\u002Fdocs\u002Fapps\u002F",{"title":952,"url":953},"Home Assistant: Tesla Fleet integration","https:\u002F\u002Fwww.home-assistant.io\u002Fintegrations\u002Ftesla_fleet\u002F","\u002Fimages\u002Fblog\u002Fhome-assistant-ev-charging-energy-manager\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fhome-assistant-ev-charging-energy-manager\u002Fog.jpg",[94,95,96],"Laden nach EPEX-Preisen in Österreich: was meine Home-Assistant-App spart","Ein Jahr stündlicher EPEX-Preise für Österreich, nachgespielt für einen Tesla und einen Boiler: Laden in den günstigsten Stunden kostet 6,5 statt 18,9 ct\u002FkWh, knapp 590 € im Jahr, ohne 20-A-Sicherung zu sprengen.","Titelbild: drei Balken vergleichen 18,9, 13,1 und 6,5 ct\u002FkWh für Laden um 18:00, über Nacht und in den günstigsten Stunden.",1791009037600]