Hvorfor Headless CMS er fremtiden for E-commerce

Hastighed er konvertering. En 1-sekunds forsinkelse i loadtid kan koste dig 7% af din omsætning. Her er hvorfor de hurtigste webshops bygger headless – og hvordan du gør det samme.

Hvad er Headless?

I en traditionel webshop (som standard Shopify) er frontend (det kunden ser) og backend (databasen) koblet tæt sammen. Det er nemt, men det begrænser dig.

Headless betyder, at vi "hugger hovedet af". Vi skiller frontend og backend ad:

• Backend: Shopify (håndterer produkter, betaling, ordrer)
• Frontend: Next.js (håndterer design, animationer, hastighed)
• CMS: Sanity (håndterer rich content, guides, blog)

De tre systemer kommunikerer via API'er. Resultatet? Ultimativ fleksibilitet.

Hvorfor hastighed = penge

Performance er ikke bare et teknisk nørderi. Det er direkte knyttet til omsætning:

• Amazon: 100ms langsommere = 1% mindre omsætning
• Google: 500ms langsommere = 20% mindre trafik
• Walmart: Hver 1 sekund hurtigere = 2% højere konvertering

For en webshop med 10 mio. kr i årlig omsætning kan 1 sekund hurtigere loadtid betyde 200.000-700.000 kr ekstra om året.

Hvordan opnår vi "Instant Page Loads"?

Med Next.js kan vi opnå noget magisk:

1. Static Site Generation (SSG)

Alle produktsider bygges på forhånd og caches globalt via CDN. Når en bruger lander på din side, serveres de ferdig-renderede HTML-filer. Ingen ventetid på database-kald.

2. Incremental Static Regeneration (ISR)

Produktsider opdateres automatisk i baggrunden. Så snart du ændrer en pris i Shopify, rebuildes den specifikke side – uden at genbygge hele sitet.

3. Prefetching

Når brugeren holder musen over et link, henter vi siden i baggrunden. Når de klikker, skifter siden øjeblikkeligt. Det føles som en app, ikke en webside.

4. Image Optimization

Next.js konverterer automatisk billeder til moderne formater (WebP, AVIF) og serverer dem i præcis den rette størrelse til brugerens skærm.

Design Frihed: Alt er muligt

Du er ikke låst af et "Theme". Vil du lave:

• En 3D-produktkonfigurator?
• En quiz-funnel der anbefaler produkter?
• En interaktiv storyteller?
• En AR-prøve-på funktion?

Med Headless er alt muligt, fordi vi bygger i React – samme teknologi som Facebook, Instagram, Netflix og Airbnb.

Tech Stack: Hvad bruger vi?

Frontend: Next.js

React-baseret framework med indbygget routing, image optimization og SSR/SSG. Det er industri-standarden for performance-kritiske sites.

Backend: Shopify

Vi beholder Shopify som backend. Det håndterer:

• Produktdatabase og lagerstyring
• Betaling (Shopify Payments, Klarna, etc.)
• Ordrehåndtering og shipping
• Administratoradgang (dit Shopify admin forbliver det samme)

CMS: Sanity

Sanity er et "Structured Content" CMS. Det giver marketing-teamet fuld kontrol over:

• Blogindlæg og guides
• Landingssider
• Banners og kampagner
• FAQ og hjælpeartikler

Alt uden at involvere udviklere.

Hosting: Vercel

Vercel (skabt af folkene bag Next.js) håndterer hosting med globalt CDN, automatisk skalering og zero-config deploys.

Case Study: Dansk modebrands Headless-rejse

Vi hjalp et dansk modebrand med at migrere fra standard Shopify til Headless.

Før (Standard Shopify)

• Lighthouse Performance Score: 42/100
• Largest Contentful Paint: 4.2 sekunder
• Time to Interactive: 6.8 sekunder
• Konverteringsrate: 1.8%

Efter (Next.js Headless)

• Lighthouse Performance Score: 98/100
• Largest Contentful Paint: 0.9 sekunder
• Time to Interactive: 1.2 sekunder
• Konverteringsrate: 2.6% (+44%)

På 10 mio. kr årlig omsætning svarer det til 4.4 mio. kr ekstra revenue.

Er Headless for alle?

Nej. Her er vores ærlige vurdering:

Headless giver mening hvis:

• Du omsætter for over 5-10 mio. kr/år
• Performance er afgørende for din forretning
• Du vil differentiere dit brand med unikt design
• Du har komplekse content-behov (guides, lookbooks, etc.)
• Du vil vokse internationalt

Standard Shopify er fint hvis:

• Du er startup/SMV med begrænset budget
• Dit produktudbud er simpelt
• Du prioriterer hurtig time-to-market over performance
• Du ikke har adgang til teknisk ekspertise

Omkostninger: Hvad koster det?

Her er et realistisk budget-estimat:

Udvikling (engangs)

• Simpel Headless: 100.000-200.000 kr
• Kompleks Headless: 200.000-500.000 kr
• Enterprise: 500.000+ kr

Løbende (månedligt)

• Hosting (Vercel): 500-2.000 kr/md
• Sanity CMS: 0-1.000 kr/md (afhængigt af brug)
• Shopify: Samme som nu
• Vedligeholdelse: 3.000-10.000 kr/md

Migrerings-processen

Sådan ser en typisk migration ud:

Fase 1: Discovery (2-3 uger)

• Audit af eksisterende site
• Definér funktionelle krav
• Design wireframes og prototyper

Fase 2: Development (6-12 uger)

• Setup af Next.js + Sanity + Shopify
• Build af produktsider, collection pages, checkout
• Integration af 3. parts apps (Klaviyo, reviews, etc.)
• QA og testing

Fase 3: Launch (1-2 uger)

• DNS switch
• Redirect setup
• Overvågning og optimering

Konklusion: Fremtiden er Headless

De brands, der bygger headless i dag, får en konkurrencefordel, der er svær at kopiere:

• Hurtigere sites = højere konvertering
• Unik UX = stærkere brand
• Fleksibilitet = hurtigere innovation
• Moderne tech stack = lettere at ansætte talenter

Hos Moselstudio er vi specialister i Headless e-commerce med Shopify, Next.js og Sanity. Book et strategimøde, og lad os vurdere om Headless er det rigtige for din forretning.