Core Web Vitals

Core Web Vitals är tre mått Google använder för att mäta verklig frontend-prestanda. De körs i webbläsaren hos varje besökare och rapporteras tillbaka till både Google Search Console och Googles rankningssignaler. En butik som faller på Core Web Vitals tappar söksynlighet och kundförtroende. ## De tre måtten Largest Contentful Paint (LCP). Hur länge det tar tills det största synliga elementet på sidan har laddat färdigt. Hjältebilden, produktbilden, huvudrubriken. Googles gröna tröskel är 2,5 sekunder eller snabbare. Allt långsammare börjar kännas trögt. Interaction to Next Paint (INP). Hur snabbt sidan svarar på användarinteraktion. Tryck på en knapp, sidan ska reagera inom 200 millisekunder. Långsammare än så tror kunder att klicket misslyckades och trycker igen, vilket dubblerar handlingen. Cumulative Layout Shift (CLS). Hur mycket sidan hoppar runt under laddning. En bild kommer sent och knuffar köpknappen nedåt precis när kunden trycker. CLS mäter total visuell instabilitet. Under 0,1 är grönt. ## Varför de spelar roll Core Web Vitals är inga fåfänga mätvärden. Samma poäng driver Googles rankningsalgoritm, samma poäng korrelerar med konvertering i publicerade Google-studier, och samma poäng dyker upp i varje ärlig prestandagranskning. En butik som fastnar i rött läcker omsättning högt upp i tratten och tappar söksynlighet samtidigt. ## Vanliga orsaker till fel De flesta prestandaproblem i e-handel kommer från samma handfull orsaker. Ooptimerade hjältebilder. Render-blockerande JavaScript. Sent laddande webfonts som byter ut och flyttar layouten. Tredjeparts-taggar som injicerar sent och knuffar huvudinnehållet nedåt. Server-side rendering gjord dåligt så att webbläsaren får vänta på hydration innan något syns. ## Hur Frntkey siktar grönt direkt Frntkey siktar på den gröna tröskeln på alla tre Core Web Vitals direkt från start. De strukturella val som gör det möjligt: Server-side rendering på Nuxt. Webbläsaren får en fullt renderad HTML-sida vid första requesten. LCP körs mot verkligt innehåll, inte ett skelett. Automatisk bildoptimering. Storyblok-bilder serveras via Storyblok-CDN med bredd, format och kvalitet applicerat per enhet. Hjältebilden hos en mobilköpare laddar inte desktop-upplösningsfilen. Lazy loading under viewporten. Allt som inte syns i första vyn skjuts upp tills det skrollas in. Webbläsaren lägger sin initiala budget på första skärmen. Strukturerad taggladdning via GTM. Marknadstaggar triggas efter att sidan är interaktiv, inte under initial rendering. Cookiebot-samtycke körs innan taggar triggas. Vercel CDN med cache-invalidering. Edge-noder serverar statiska assets nära kunden. Cachen invalideras bara vid Storyblok-publicering, inte på varje request. Resultatet är ingen garanti. Core Web Vitals beror på enheten, nätverket och det specifika sidinnehållet lika mycket som på den underliggande frontenden. En handlare som laddar upp en 12MB hjältebild kommer fortfarande se försämrad LCP, oavsett hur väl frontenden renderar. Den strukturella basen spelar roll. Den operativa disciplinen spelar också roll.