[{"data":1,"prerenderedAt":960},["ShallowReactive",2],{"blog-nuxt-core-web-vitals-performance-hu":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":96,"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 Nuxt oldalakhoz és webshopokhoz: LCP, INP és CLS javítása","Így javítsd az LCP-t, az INP-t és a CLS-t Nuxt 4 oldalakon és webshopokban: képek, hydration, fontok, külső szkriptek, prerender vs. SSR vs. ISR, mérés valódi felhasználókkal.","Diagram: egy Nuxt oldalbetöltés a szerver HTML-jétől a hero képen, a hydration-ön és az interakción át, az LCP, INP és CLS küszöbértékeivel a szakaszokon.","Core Web Vitals Nuxthoz: LCP, INP, CLS · Balázs Csorba",[102,103,104,105,106],"A Core Web Vitals értékeket terepi adatokon, a 75. percentilisnél értékelik: LCP legfeljebb 2,5 másodperc, INP legfeljebb 200 milliszekundum, CLS legfeljebb 0,1. A Lighthouse nem tudja mérni az INP-t, így a zöld labor-pontszám keveset bizonyít.","A Nuxt LCP-problémák többsége felfedezési probléma: a hero képet későn kéri le az oldal, lazy loadinggal késlelteti, vagy túl nagy. Előbb a kérések sorrendjét rendezd, és csak utána spórolj kilobájtokat.","Egy szerveroldalon renderelt Vue-appban a hydration az INP fő karja. Szállíts kevesebb JavaScriptet, hidratáld késleltetve a nem látható komponenseket, és bontsd szét a hosszú taskokat.","A CLS szinte mindig hiányzó helyfoglalás: képméretek, fallback metrikák a fontokhoz, későn megjelenő bannerek és cookie-sávok, foglalt doboz nélküli beágyazások.","A renderelési módot útvonalanként válaszd: prerendereld, ami ritkán változik, cache-elj swr-rel vagy isr-rel, ahol a platform támogatja, és tartsd meg a teljes SSR-t arra, ami valóban kérésenként készül.",[108,111,114,117,120,123],{"q":109,"a":110},"Mik a jó Core Web Vitals értékek?","A Google LCP-t 2,5 másodpercen belül, INP-t legfeljebb 200 milliszekundumra és CLS-t legfeljebb 0,1-re javasol. Egy oldal akkor felel meg, ha mindhárom értéket eléri a valódi oldalbetöltések 75. percentilisénél, eszköztípusonként értékelve. A lassú telefonok és a gyenge hálózatok tehát ugyanúgy számítanak, mint a te laptopod.",{"q":112,"a":113},"Hogyan javítsam az LCP-t egy Nuxt appban?","Keresd meg az LCP elemet, gondoskodj róla, hogy benne legyen a szerveren renderelt HTML-ben, előtöltsd magas fetch prioritással, és soha ne tedd lazy loadingra. A Nuxt Image-dzsel használd a preload propot fetchPriority high értékkel, adj modern formátumot a megfelelő méretben, és tartsd alacsonyan a szerver válaszidejét prerenderinggel vagy cache-eléssel.",{"q":115,"a":116},"Miért rossz az INP, ha a Lighthouse zöld?","A Lighthouse szimulált környezetben, felhasználó nélkül tölt be egy oldalt, ezért az INP-t egyáltalán nem tudja mérni; a Total Blocking Time csak közelítés. Az INP valódi munkamenetekben minden kattintást, érintést és billentyűleütést mér, lassú eszközökkel, nehéz külső szkriptekkel és a hydration után jelentkező munkával együtt.",{"q":118,"a":119},"Segít a lazy hydration a Core Web Vitalsban Nuxtban?","Igen, főleg az INP-ben, néha az LCP-ben is. A Nuxt támogat hydration stratégiákat, például hydrate-on-visible, hydrate-on-idle és hydrate-on-interaction a Lazy komponenseken, így a nem látható widgetek nem versenyeznek az első interakciókkal. Vedd figyelembe: az ilyen komponens bármely prop-változása azonnal kiváltja a hydrationt.",{"q":121,"a":122},"Mi a jobb a Nuxt teljesítményéhez: SSR, prerendering vagy ISR?","Nincs egyetlen nyertes. A prerendering adja a leggyorsabb és legstabilabb TTFB-t ritkán változó tartalomhoz, az swr vagy isr cache-elt újragenerálást ad katalógusjellegű oldalakhoz, a teljes SSR pedig a személyre szabott vagy kérésenként készülő oldalakhoz illik. A Nuxt route rules segítségével mindet keverheted egy appon belül.",{"q":124,"a":125},"Hogyan mérjem a Core Web Vitalst a valódi felhasználóimnál?","Kombinálj két forrást. A CrUX, a PageSpeed Insightson vagy az API-n át, megmutatja, mit tapasztaltak a Chrome-felhasználók, és ezt látja a Google. Saját szegmensekhez és hibakereséshez add hozzá a web-vitals könyvtárat, használd az attribution buildet, és küldd a metrikákat sendBeaconnel a saját végpontodra.",[127,130,133,136,139,142,145,148,151,154,157],{"id":128,"title":129},"measure-first","Előbb mérj: a terepi adat erősebb a laboradatnál",{"id":131,"title":132},"where-metrics-come-from","Honnan jön az egyes metrika egy Nuxt oldalbetöltésben",{"id":134,"title":135},"lcp","LCP: a legnagyobb elemet tedd felfedezhetővé és könnyűvé",{"id":137,"title":138},"inp","INP: hydration, hosszú taskok és amit szállítasz",{"id":140,"title":141},"cls","CLS: foglalj helyet mindennek, ami később érkezik",{"id":143,"title":144},"third-party-scripts","Külső szkriptek: az adó, amit nem te kontrollálsz",{"id":146,"title":147},"rendering-modes","Prerender, SSR vagy ISR: útvonalanként dönts",{"id":149,"title":150},"fix-by-metric","Javítás-metrikánként táblázat",{"id":152,"title":153},"shops","A webshopok mások: mit ellenőrzök B2B áruházaknál",{"id":155,"title":156},"rollout-checklist","Bevezetési checklist",{"id":158,"title":159},"sources","Források",[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],"Egy Nuxt oldal elérhet 100 pontot a Lighthouse-ban, és mégis lassúnak érződhet azoknak, akik az üzletedet fizetik. Az ok egyszerű: a Core Web Vitals terepi metrika. Azt írja le, mit tapasztaltak valódi felhasználók valódi eszközökön, a 75. percentilisnél, és ide tartozik a vonaton használt közepes Android telefon is, nem csak a fejlesztői laptopod.",{"type":162,"content":166},[167,168,172,173,178],"Ez a cikk az a checklist, amit Nuxt oldalakhoz és webshopokhoz használok (Nuxt 4, jelenleg a 4.5-ös ágban). Metrikák szerint épül fel: honnan jön az LCP, az INP és a CLS egy szerveroldalon renderelt Vue-appban, mely Nuxt funkciók kezelik az egyes okokat, és hol nem segít a platform. A végén egy javítás-metrikánként táblázat és egy rövid bevezetési checklist áll. Háttérként: egy TYPO3 B2B webshopot refaktoráltam, és ",{"tag":169,"children":170},"strong",[171],"65%-kal gyorsabb oldalbetöltést"," értem el (4,6 s-ról 1,6 s-ra), lásd a ",{"tag":174,"to":175,"children":176},"link","\u002Freferences",[177],"referenciákat",". Az alábbi alapelvek attól függetlenül érvényesek, milyen stack áll az oldal mögött.",{"type":180,"level":181,"id":128,"text":129},"heading",2,{"type":162,"content":183},[184,185,188,189,192,193,196,197,201],"A három Core Web Vitals és céljaik rögzítettek: ",{"tag":169,"children":186},[187],"LCP"," (betöltés) 2,5 másodpercen belül, ",{"tag":169,"children":190},[191],"INP"," (reagálóképesség) legfeljebb 200 milliszekundum, ",{"tag":169,"children":194},[195],"CLS"," (vizuális stabilitás) legfeljebb 0,1. Egy oldal akkor felel meg, ha mindhármat eléri a 75. percentilisnél, eszköztípusonként. A Google kifejezetten hangsúlyozza, hogy a ",{"tag":198,"href":35,"children":199},"a",[200],"labormérés nem helyettesíti a terepi mérést",", és az olyan eszközök, mint a Lighthouse, amelyek felhasználó nélkül töltenek be egy oldalt, az INP-t egyáltalán nem tudják mérni. A Total Blocking Time csak közelítés.",{"type":162,"content":203},[204],"Ezért nem fogadok el olyan teljesítményjegyet, amely így szól: „a Lighthouse szerint 98”. Két terepi forrást és egy labor-eszközt kérek, mindegyiket arra használva, amiben jó:",{"type":206,"head":207,"rows":214},"table",[208,210,212],[209],"Forrás",[211],"Mit mutat",[213],"Vakfolt",[215,225,235],[216,221,223],[217,220],{"tag":169,"children":218},[219],"CrUX"," (PageSpeed Insightson, a CrUX API-n, BigQueryn át)",[222],"Mit tapasztaltak a Chrome-felhasználók az origin-eden vagy URL-eden; ezt az adathalmazt nézi a Google. Jó a „megfelelünk?” kérdésre",[224],"Csak jogosult, elég népszerű oldalak; Chrome-felhasználók, akik opt-in-eltek; nincs iOS-es Chrome és WebView; az okokról nincs részlet",[226,231,233],[227,230],{"tag":169,"children":228},[229],"RUM"," (a web-vitals könyvtár, a saját végpontodra küldve)",[232],"Mindhárom metrika oldalsablononként, eszközönként, országonként vagy A\u002FB-variánsonként; az attribution build megadja a felelős elemet vagy interakciót",[234],"Magadnak kell építeni és karbantartani; hozzájárulási és adatvédelmi szabályok érvényesek",[236,241,243],[237,240],{"tag":169,"children":238},[239],"Lighthouse \u002F DevTools"," (labor)",[242],"Reprodukálható futások az LCP és CLS hibakereséséhez, kérés-vízesések, bundle-elemzés",[244],"Nincsenek valódi felhasználók, nincs INP; egy gyors labor-gép a legtöbb problémát elrejti",{"type":162,"content":246},[247,248,251,252,256],"A ",{"tag":198,"href":59,"children":249},[250],"web-vitals"," könyvtár onLCP, onINP és onCLS függvényeket ad; az attribution build, kb. 1,5 KB-tal nagyobb, diagnosztikai adatot ad hozzá, például hogy melyik elem volt az LCP-jelölt. Küldd az értékeket navigator.sendBeaconnel egy általad kontrollált végpontra, címkézd őket az útvonalsablonnal (termékoldal, kategória, checkout), és végre megválaszolhatod, hogy „melyik oldaltípus bukik”, ahelyett hogy átlagokon vitatkoznál. Ha az is érdekel, hogyan látják ezeket az oldalakat az ügynökök és a crawlerek, a ",{"tag":174,"to":253,"children":254},"\u002Fblog\u002Fgenerative-engine-optimization-audit",[255],"GEO-audit"," ugyanezen oldalak másik oldalát tárgyalja.",{"type":180,"level":181,"id":131,"text":132},{"type":162,"content":259},[260],"A Nuxt alapértelmezetten univerzálisan renderel: a szerver teljes HTML-t küld, majd a böngésző letölti a JavaScriptet, és hidratálja az oldalt, hogy interaktív legyen. Ez a kétfázisú modell magyarázza a számok nagy részét. Az LCP az első felében dől el (szerverválasz, a legnagyobb elem felfedezése és betöltése), az INP a másodikban (a JavaScript-futtatás és a hydration versenyez a felhasználó első érintéseivel), a CLS pedig az oldal teljes életén végigfut.",{"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\">Egy Nuxt oldalbetöltés és a Core Web Vitals\u003C\u002Ftitle>\u003Cdesc id=\"d1-cwv-d\">Öt szakasz: szerver HTML, hero kép, első megjelenítés, hydration és interakció. Az LCP az első három szakaszt fedi, az INP az utolsó kettőt, a CLS pedig az oldal teljes életét.\u003C\u002Fdesc>\u003Ctext x=\"20\" y=\"28\" class=\"d-title\">Egy Nuxt oldalbetöltés és a Core Web Vitals\u003C\u002Ftext>\u003Ctext x=\"750\" y=\"28\" text-anchor=\"end\" class=\"d-label\">Univerzális renderelés\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\">Szerver\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 kép\u003C\u002Ftext>\u003Ctext x=\"235\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">felfedez + betölt\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\">Első kép\u003C\u002Ftext>\u003Ctext x=\"385\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">LCP elem\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 fut\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\">Interakció\u003C\u002Ftext>\u003Ctext x=\"685\" y=\"101\" text-anchor=\"middle\" class=\"d-small\">érintés, kattintás\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: legfeljebb 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: legfeljebb 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: legfeljebb 0,1, az oldal teljes élete, foglalj helyet\u003C\u002Ftext>",[269],"Az LCP nagyrészt a hydration előtt dől el, az INP utána, a CLS végig. Az idővonal e sorrendjében javítsd őket.",{"type":162,"content":271},[272],"A web.dev az LCP-t négy részre bontja: time to first byte, resource load delay, resource load duration és element render delay. Egy jól optimalizált oldalon az irányadó arány nagyjából 40% TTFB, 10% alatti load delay, 40% load duration és 10% alatti render delay. A két késleltetésnek nullához kell közelítenie; az auditjaimban itt bújnak meg a könnyű nyereségek, mert senki sem érzi magáénak.",{"type":180,"level":181,"id":134,"text":135},{"type":162,"content":275},[276],"Az LCP elem általában egy kép (img, videó poster vagy CSS háttérkép) vagy egy nagy szövegblokk. Először derítsd ki, melyik az sablononként, a DevTools-szal vagy az attribution builddel; webshop kategóriaoldalakon gyakran egy banner, termékoldalakon a fő termékfotó. Ezután dolgozd végig a részeket.",{"type":162,"content":278},[279,282],{"tag":169,"children":280},[281],"Felfedezés."," Az LCP erőforrásnak a HTML forrásból felfedezhetőnek kell lennie. A kliensoldali JavaScript által beszúrt hero, a CSS háttérkép vagy a csak hydration után renderelő karusszel a kérést a JavaScript-bundle mögé tolja. A Nuxt Image-dzsel a NuxtImg komponensnek van preload propja, amely link taget tesz a headbe, és elfogad high fetchPriority értéket. Soha ne tegyél loading=\"lazy\"-t az LCP képre: a web.dev ezt nevezi meg a resource load delay közvetlen okaként.",{"type":284,"ordered":285,"items":286},"list",false,[287,292,297,302,307],[288,291],{"tag":169,"children":289},[290],"Megfelelő formátum és méret."," A NuxtImg támogatja a format, quality és sizes propokat, így egy forrásfájlból reszponzív, modern változatok (webp vagy avif) lesznek. Minden hero és termékképhez explicit sizes értéket adok; a 2000 pixeles kép egy 400 pixeles helyen a leggyakoribb egyedi pazarlás, amit látok.",[293,296],{"tag":169,"children":294},[295],"Explicit méretek."," Adj meg width és height értéket (vagy képarányt), hogy a böngésző helyet foglaljon. Ez segít az LCP felfedezésében, és ahogy alább látod, ez az első CLS-javítás is.",[298,301],{"tag":169,"children":299},[300],"Szerver válaszideje."," A TTFB az LCP-költségvetés legnagyobb része. Prerendereld vagy cache-eld, amit lehet (lásd a renderelés szakaszt), és a lassú adatlekéréseket tartsd ki a kritikus útvonalból a lazy opcióval vagy a useLazyFetch-csel a nem kritikus adatokhoz.",[303,306],{"tag":169,"children":304},[305],"Fontok."," Ha az LCP elem szöveg, egy későn érkező webfont késlelteti. Előtöltsd a kritikus fontot, és használj illeszkedő metrikájú fallbacket (a CLS-ről szóló következő szakasz).",[308,311],{"tag":169,"children":309},[310],"Nincs renderelést blokkoló meglepetés."," Egy cookie-banner, egy az oldalt elrejtő A\u002FB-teszt snippet vagy egy szinkron külső szkript a headben akkor is késleltetheti a renderelést, ha minden más tökéletes.",{"type":162,"content":313},[314,315,319],"A Nuxt 4.5 kísérleti SSR streaminget is hozott, amely azonnal elküldi a HTML-vázat ahelyett, hogy az egész oldalt pufferelné, és közvetlenül a TTFB-t célozza. Kísérleti, botoknál ki van kapcsolva, és minden, ami a renderelés megkezdése után módosítja a választ (fejlécek, átirányítások), nem jut el a klienshez; ezért egyetlen útvonalon próbálnám ki RUM-mal, mielőtt bevezetném. Ugyanezt a streaming-szemléletet AI funkciókra a ",{"tag":174,"to":316,"children":317},"\u002Fblog\u002Fnuxt-llm-features-ai-sdk-streaming",[318],"LLM-funkciók Nuxtban az AI SDK-val"," cikk mutatja.",{"type":180,"level":181,"id":137,"text":138},{"type":162,"content":322},[323],"Az INP a látogatás során minden kattintás, érintés és billentyűleütés késleltetését figyeli, a bemeneti késleltetéstől az eseménykezelőkön át a következő kirajzolt képkockáig. A jó érték legfeljebb 200 ms; 500 ms felett rossz. A First Input Delay-t váltotta, mert az FID csak az első interakciót nézte. A görgetés és a hover nem számít.",{"type":162,"content":325},[326,327,330,331,334,335,338],"Egy szerveroldalon renderelt Vue-appban a minta mindig ugyanaz: az oldal késznek tűnik, a felhasználó koppint, a main thread pedig még hidratál vagy egy külső taget futtat. Ez a hosszú taskok okozta ",{"tag":169,"children":328},[329],"bemeneti késleltetés"," (minden 50 ms feletti blokkolja a main threadet). Ha ehhez jönnek a lassú eseménykezelők (",{"tag":169,"children":332},[333],"feldolgozási idő",") és a drága újrarenderelések vagy layout-munka (",{"tag":169,"children":336},[337],"megjelenítési késleltetés","), megvan a három hely, ahol az INP elvész.",{"type":162,"content":340},[341],"Amit tennék, a haszon sorrendjében:",{"type":284,"ordered":285,"items":343},[344,349,354,359,364,369],[345,348],{"tag":169,"children":346},[347],"Szállíts kevesebb JavaScriptet."," Mielőtt kódhoz nyúlsz, nézd meg a bundle-t egy visualizerrel. Minden nehéz könyvtárat indokolni kell egy oldalon; egy dátumkönyvtárnak vagy rich-text szerkesztőnek egy katalógusoldalon ritkán van indoka.",[350,353],{"tag":169,"children":351},[352],"Hidratálj késleltetve."," A Nuxt támogatja a késleltetett hydrationt Lazy komponenseken: hydrate-on-visible, hydrate-on-idle, hydrate-on-interaction, hydrate-on-media-query, hydrate-after, hydrate-when és hydrate-never. Az értékelések, ajánló karusszelek, láblécek és chat widgetek nem kell, hogy interaktívak legyenek az első megjelenéskor. A megszorítás: egy késleltetve hidratált komponens bármely prop-változása azonnal kiváltja a hydrationt, és csak single-file komponensekkel és template propokkal működik, v-bind spreaddel nem.",[355,358],{"tag":169,"children":356},[357],"Egyszer renderelj, kevesebb state-et szállíts."," A Nuxt a lekért adatokat a payloadba szerializálja. Használd a pick vagy transform opciót a useFetch és useAsyncData hívásokon, hogy csak a template által használt mezők menjenek át; a dokumentáció szerint ezek nem akadályozzák meg az adatok lekérését, de kint tartják őket a payloadból. A payload extraction alapból be van kapcsolva, a stripNeverHydratedData kísérlet pedig a hydrate-never komponensek adatait is kint tartja.",[360,363],{"tag":169,"children":361},[362],"A statikus maradjon statikus."," Azok a komponensek, amelyek a renderelés után sosem változnak (marketingblokkok, láblécek), hydrate-never vagy csak szerveres megoldás jelöltjei, hogy a Vue ne hozzon létre hozzájuk reaktív state-et.",[365,368],{"tag":169,"children":366},[367],"Bontsd szét a hosszú taskokat."," Ahol nehéz munkát kell végezned (nagy terméklista szűrése, parsing), add vissza a main threadet. A web.dev scheduler.yield()-et javasol setTimeout fallbackkel, és hogy nagyjából 50 ms munkánként yieldelj, ne minden elem után.",[370,373],{"tag":169,"children":371},[372],"Fékezd az eseménykezelőket."," Debounce-old a drága bemeneti kezelőket, kerüld a szinkron layout-olvasást ciklusokban, és adj azonnali visszajelzést (lenyomott állapot, spinner), mielőtt a lassú munka elindul, mert az INP a következő kirajzolt képkockánál ér véget.",{"type":375,"variant":376,"title":377,"body":378},"callout","tip","Az INP-t úgy teszteld, ahogy a felhasználók kiváltják",[379],[380],"Nyisd meg a DevTools-t CPU-fojtással, töltsd újra, és az első másodpercekben kattints a főnavigációra, a keresőmezőre és a kosárba tevő gombra. Ha bármelyik akadozik, az az igazi INP-történet, nem a labor-pontszám. Ezután RUM-attribúcióval erősítsd meg, melyik interakció a legrosszabb a terepen.",{"type":180,"level":181,"id":140,"text":141},{"type":162,"content":383},[384],"Az elmozdulás a legmechanikusabb metrika: valami megjelent vagy méretet váltott, és eltolta a már látható tartalmat. Nuxt webshopokban újra és újra ugyanazokat a tetteseket találom:",{"type":284,"ordered":285,"items":386},[387,392,397,402,407,412],[388,391],{"tag":169,"children":389},[390],"Méret nélküli képek és médiák."," Mindig add meg a width és height értéket; a böngészők ebből számolják a képarányt. Reszponzív képeknél a CSS aspect-ratio tulajdonság ugyanezt a célt szolgálja.",[393,396],{"tag":169,"children":394},[395],"Webfontok."," Mind a flash of unstyled text, mind a flash of invisible text elmozdíthatja a layoutot. A Nuxt Fonts modul automatikus font-metrika optimalizálást végez (a fontaine és a capsize révén), így a fallback font ugyanannyi helyet foglal, mint a webfont, támogatja az olyan szolgáltatók, mint a Google, helyi letöltését, és a font okozta elmozdulások egész osztályát szinte ingyen megszünteti. A kritikus fontok előtöltése és a font-display: optional a web.dev további javaslatai.",[398,401],{"tag":169,"children":399},[400],"Késői bannerek."," A hydration után beszúrt cookie- és hozzájárulás-sávok, akciócsíkok és „ingyenes szállítás ettől” sávok az egész oldalt lenyomják. Rendereld őket szerveroldalon foglalt helyen, vagy fix pozícióval fedd át az oldalt, ahelyett hogy a folyamba szúrnád.",[403,406],{"tag":169,"children":404},[405],"Beágyazások és hirdetések."," Foglalj dobozt min-height vagy aspect-ratio értékkel, mielőtt egy iframe, térkép vagy videó betöltene. Ugyanez igaz a késleltetve hidratált komponensekre, amelyek interaktívvá válva magasságot váltanak.",[408,411],{"tag":169,"children":409},[410],"Csak kliensoldali tartalom."," Egy .client.vue komponens vagy ClientOnly blokk csak a mount után renderel; megfelelő méretű helyőrző nélkül elmozdítja az oldalt. A fallback slotban renderelj végleges méretű skeletont.",[413,416],{"tag":169,"children":414},[415],"Animációk."," transform-mal animálj top, left vagy height helyett; a kompozitált animációk nem járulnak hozzá a CLS-hez.",{"type":162,"content":418},[419],"Még egy olcsó nyereség: tedd az oldalakat alkalmassá a back\u002Fforward cache-re. A visszaállított oldalak azonnal megjelennek, és nem okoznak új layout-elmozdulást, ami olyan webshopokban számít, ahol a felhasználók a listázó és a részletező oldal között ugrálnak.",{"type":180,"level":181,"id":143,"text":144},{"type":162,"content":422},[423],"Az analitika, tag managerek, chat widgetek, értékelési badge-ek és A\u002FB-teszt eszközök ugyanazon a main threaden futnak, mint a Vue-appod. Ezek a szokásos okai annak, hogy egy karcsú Nuxt bundle is rossz INP-t ad, és hogy az LCP romlik, miután a marketing „csak még egy taget” ad hozzá. Kezelj minden szkriptet költségvetéses függőségként, gazdával.",{"type":162,"content":425},[247,426,429],{"tag":198,"href":86,"children":427},[428],"Nuxt Scripts"," a hivatalos módja ennek a kezelésére. A useScript composable külső szkripteket tölt be SSR-támogatással, késleltetett betöltéssel és típusos API-kkal. Az alapértelmezett onNuxtReady trigger megvárja a hydrationt, majd üresjárati időszakra ütemezi a betöltést. További opciók: kézi betöltés, useScriptTriggerIdleTimeout, useScriptTriggerInteraction (első görgetés, kattintás vagy billentyű), useScriptTriggerElement (amikor egy elem láthatóvá válik) és hozzájáruláson alapuló triggerek. Vannak registry integrációk gyakori szolgáltatásokhoz, például Google Analytics, Google Maps, YouTube és Stripe, valamint facade komponensek, amelyek könnyű helyőrzőt mutatnak, amíg nincs szükség az igazi beágyazásra.",{"type":162,"content":431},[432],"Az én szabályaim: semmi külső a kritikus renderelési útvonalon; chat és videó interakciós vagy láthatósági trigger mögött; analitika hydration és hozzájárulás után; minden szkriptet a kiadás előtt és után az INP-költsége szerint ellenőrizni RUM-ban. Foglalj layout-helyet mindennek, ami vizuális (lásd CLS). Bejelentkezett vásárlókkal működő B2B webshopnál azt is megkérdőjelezném, hogy egy heatmap eszköznek egyáltalán futnia kell-e a checkoutban.",{"type":180,"level":181,"id":146,"text":147},{"type":162,"content":435},[436],"A renderelési mód szabja meg a TTFB alsó határát, így az LCP felső határát. A Nuxt hibrid renderelése lehetővé teszi, hogy útvonalanként, route rules-szal dönts egyetlen globális beállítás helyett:",{"type":206,"head":438,"rows":447},[439,441,443,445],[440],"Mód (route rule)",[442],"Mit csinál",[444],"Mire használd",[446],"Vigyázz",[448,459,470,481,492],[449,453,455,457],[450],{"tag":169,"children":451},[452],"prerender: true",[454],"Statikus HTML-t generál build időben",[456],"Landing oldalak, dokumentáció, blogcikkek, jogi oldalak",[458],"A tartalom csak az utolsó build óta friss",[460,464,466,468],[461],{"tag":169,"children":462},[463],"swr",[465],"Cache-elt választ szolgál ki, és a háttérben újragenerálja",[467],"Naponta párszor változó kategória- és listaoldalak",[469],"A lejárat utáni első látogató elavult tartalmat kaphat; szerver- vagy platform-cache kell",[471,475,477,479],[472],{"tag":169,"children":473},[474],"isr",[476],"CDN-cache-elt oldalak újraellenőrzéssel; Netlifyon és Vercelen támogatott natív integrációval",[478],"Nagy katalógusok, ahol a teljes újraépítés túl lassú",[480],"Platformfüggő; a tervezés előtt ellenőrizd a hostingot",[482,486,488,490],[483],{"tag":169,"children":484},[485],"Univerzális SSR (alapértelmezett)",[487],"Kérésenként HTML-t renderel, majd hidratál",[489],"Személyre szabott vagy kérésenként készülő oldalak: kosár, fiók, árlisták",[491],"A TTFB a backendedtől és az adatlekérésektől függ",[493,497,499,501],[494],{"tag":169,"children":495},[496],"ssr: false",[498],"Csak kliensoldali renderelés az adott útvonalon",[500],"Bejelentkezés mögötti, hitelesített dashboardok",[502],"Lassabb első betöltés és gyengébb SEO-láthatóság; landing oldalaktól tartsd távol",{"type":162,"content":504},[505,506,510],"B2B webshopnál a felosztás általában egyértelmű: a marketing-, tartalom- és kategóriaoldalak prerenderelve vagy cache-elve vannak, a termékoldalak swr-t vagy isr-t használnak, az ár és a készlet a hydration után kliensoldalon (vagy ügyfelenként az edge-en) töltődik be, a kosár, a checkout és a fiók pedig SSR marad. A csapda a személyre szabás: egyetlen ügyfélspecifikus ár a szerveren renderelt HTML-ben minden cache-elt oldalt kérésenkénti oldallá tesz. Tartsd cache-elhetőnek a vázat, és a személyes részt külön töltsd be, foglalt dobozzal, hogy ne okozzon layout-elmozdulást. Ugyanezeket a webshop-oldalakat kérik le az ",{"tag":174,"to":507,"children":508},"\u002Fblog\u002Fagentic-commerce-protocols-ucp-acp-guide",[509],"agentic commerce protokollok"," és az ügynökök is, így egy gyors, cache-elhető váz kétszeresen térül meg.",{"type":180,"level":181,"id":149,"text":150},{"type":162,"content":513},[514],"A sűrített változat, amit a RUM dashboard mellé érdemes kitűzni:",{"type":206,"head":516,"rows":525},[517,519,521,523],[518],"Metrika",[520],"Tipikus ok Vue\u002FNuxtban",[522],"Első javítás",[524],"Nuxt eszköz",[526,536,546,556,566,576,586,596],[527,530,532,534],[528],{"tag":169,"children":529},[187],[531],"A hero kép későn felfedezett, lazy loadingos vagy túl nagy",[533],"Szerver HTML-be, előtöltés, megfelelő méret és formátum, soha ne lazy",[535],"NuxtImg: preload fetchPriority high-jal, sizes, format, quality",[537,540,542,544],[538],{"tag":169,"children":539},[187],[541],"Magas TTFB az SSR-től és a lassú adatlekérésekből",[543],"Prerender vagy cache; a nem kritikus adatot vidd ki a kritikus útvonalból",[545],"routeRules (prerender, swr, isr), useLazyFetch, kísérleti SSR streaming",[547,550,552,554],[548],{"tag":169,"children":549},[187],[551],"A szöveges LCP egy webfontra vár",[553],"Kritikus font előtöltése, illeszkedő metrikájú fallback",[555],"Nuxt Fonts modul",[557,560,562,564],[558],{"tag":169,"children":559},[191],[561],"A main thread az egész oldalt hidratálja",[563],"A nem látható és nem interaktív részeket késleltetve vagy soha ne hidratáld",[565],"Lazy komponensek hydrate-on-visible, hydrate-on-idle, hydrate-on-interaction, hydrate-never értékkel",[567,570,572,574],[568],{"tag":169,"children":569},[191],[571],"Nagy bundle-ök és payload",[573],"Nehéz könyvtárak eltávolítása vagy szétosztása; csak a használt mezők küldése",[575],"Lazy előtagos code-splitting, pick és transform, payload extraction",[577,580,582,584],[578],{"tag":169,"children":579},[191],[581],"Külső tagek és hosszú taskok",[583],"Tagek késleltetése, yield nehéz ciklusokban, debounce a kezelőkön",[585],"Nuxt Scripts triggerek, scheduler.yield() fallbackkel",[587,590,592,594],[588],{"tag":169,"children":589},[195],[591],"Képek és beágyazások foglalt hely nélkül",[593],"width és height vagy aspect-ratio mindenre, ami később töltődik",[595],"NuxtImg méretekkel, CSS aspect-ratio",[597,600,602,604],[598],{"tag":169,"children":599},[195],[601],"Font-csere, késői bannerek, csak kliensoldali blokkok",[603],"Illeszkedő metrikájú fallbackek; helyfoglalás a bannereknek; skeleton fallbackek",[605],"Nuxt Fonts, a ClientOnly fallback slotja",{"type":180,"level":181,"id":152,"text":153},{"type":162,"content":608},[609,610,613],"Egy TYPO3 B2B webshop refaktorálásánál 65%-kal csökkentettem az oldalbetöltési időt, 4,6 s-ról 1,6 s-ra (",{"tag":174,"to":175,"children":611},[612],"részletek a referenciákban","). A cikk alapelveit ott is ugyanígy alkalmazom: előbb mérek, rövidre fogom a kritikus útvonalat, és minden további kérést és szkriptet olyasminek tekintek, aminek ki kell érdemelnie a helyét.",{"type":162,"content":615},[616,617,621],"A webshopok három saját csapdát hoznak. A terméklisták több száz képet és szűrőt renderelnek, ezért az első sor kivételével mindent tölts lazy, és az INP-t a szűrő-interakcióknál mérd, ne csak betöltéskor. Az árak, a készlet és az ügyfélspecifikus katalógusok arra csábítanak, hogy az egész oldalról kikapcsold a cache-t. A shop tag-stackje (analitika, remarketing, értékelések, live chat) pedig negyedévről negyedévre nő. Ha Nuxt storefrontot építesz vagy migrálsz, a ",{"tag":174,"to":618,"children":619},"\u002Fexpertise\u002Fvue-nuxt-developer",[620],"Vue és Nuxt szakértelem oldalam"," megmutatja, mit vállalok.",{"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],"Állíts be RUM-ot a web-vitals attribution builddel, útvonalsablonnal címkézve, és tartsd mellette az origin CrUX-számait.",[629],"Válaszd ki forgalom és bukó metrika szerint a három legrosszabb sablont; a többit hagyd, amíg ezek nem felelnek meg.",[631],"Azonosítsd az LCP elemet minden sablonon, és tedd felfedezhetővé a HTML-ben, előtöltve, megfelelő méretben és soha nem lazy módon.",[633],"Rendelj renderelési módot minden útvonalhoz route rules-szal; a személyre szabott adatot tartsd ki a cache-elt HTML-ből.",[635],"Add hozzá a Nuxt Fonts modult, és ellenőrizd a fallback metrikákat; adj width, height vagy aspect-ratio értéket minden képhez és beágyazáshoz.",[637],"Ellenőrizd a bundle-t és a payloadot; alkalmazz pick vagy transform opciót; a nehéz komponenseket oszd szét a Lazy előtaggal.",[639],"Adj hydration stratégiát a nem látható és nem interaktív komponensekhez; teszteld újra az első érintéseket CPU-fojtás alatt.",[641],"Vigyél minden külső szkriptet a Nuxt Scriptsre triggerrel, gazdával és mért INP-költséggel.",[643],"Tegyél teljesítménykeretet a CI-ba (bundle-méret, Lighthouse az LCP-hez és CLS-hez), és figyeld a RUM-ot néhány hétnyi valódi forgalmon, mielőtt győzelmet hirdetsz.",{"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":96,"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 B2B webshopoknál: mit kell javítaniuk a Spryker, Pimcore és TYPO3 csapatoknak","Vonatkozik az European Accessibility Act a B2B webshopokra? BFSG és BaFG hatálya, mikrovállalkozási mentesség, 2026-os végrehajtás, WCAG 2.2 és javítási terv.","Ábra: egy B2B webshop elágazik a BFSG és BaFG fogyasztói hatályának kérdésére, a WCAG 2.2 AA megfelelésre, az akadálymentességi nyilatkozatra és a piacfelügyeletre.",{"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":96,"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 termékkonfigurátor: szabályok, árazás és Nuxt egy commerce API-n","Így építs headless B2B termékkonfigurátort: szabálymotor vagy solver, hol éljenek a szabályok, szerveroldali árazás, Nuxt commerce API-n, TYPO3, 100 ezer+ variáns.","Ábra: egy Nuxt front end egy konfigurációs szolgáltatással beszél, amely a PIM-ből a szabályokat, az ERP-ből az árakat olvassa, és validált konfigurációt ad át a commerce API-nak.",{"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":96,"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 szinkron: termékadatok SAP vagy Infor, PIM és webshop között","Termékadatok szinkronja SAP vagy Infor, Pimcore és webshop között: delta és full sync, változásdetektálás, idempotens importok, Messenger, tulajdonlás, replay.","Ábra: a termékadatok egy SAP vagy Infor ERP-ből delta kinyerésen és üzenetsoron át a Pimcore-ba folynak, ahol minőségi kapuk futnak, majd tovább a webshopba.",{"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":96,"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],"Töltés EPEX ausztriai árakon: mennyit spórol a Home Assistant appom","Egy év órás EPEX ár Ausztriára, újrajátszva egy Teslára és egy bojlerre: a legolcsóbb órákban 6,5 ct\u002FkWh a töltés 18,9 helyett, évi közel 590 €, a 20 A-es biztosíték kiégetése nélkül.","Borítókép: három oszlop hasonlítja össze a 18,9, 13,1 és 6,5 ct\u002FkWh-t 18:00-kori, éjszakai és legolcsóbb órás töltésnél.",1791009036632]