Hvorfor din Shopify-shop er langsom (selv om Shopify hoster den)
Shopify's hosting er hurtig — globalt CDN, optimeret servere, automatisk caching. Hvis din shop er langsom, er det næsten altid IKKE Shopify selv.
De typiske syndere: 1) For mange apps der hver tilføjer JavaScript der skal hentes og køres, 2) Ikke-optimerede billeder (særligt på produktsider og hero), 3) Render-blocking scripts og CSS, 4) Dårligt theme-Liquid med ineffektive loops eller for mange render-tags, 5) Tredjeparts-scripts (chat-widgets, tracking, popup-tools) der ikke deferres.
Core Web Vitals: De tre tal der betyder noget
LCP (Largest Contentful Paint) — hvor hurtigt det største element på siden indlæses. Mål: under 2,5 sekunder. På Shopify-shops er det typisk hero-billedet eller produktbilledet.
INP (Interaction to Next Paint) — hvor hurtigt siden reagerer på input (klik, tap). Mål: under 200 ms. Apps der kører tung JavaScript ved load er hovedfjenden her.
CLS (Cumulative Layout Shift) — hvor meget layoutet flytter sig efter load (billeder uden dimensioner, fonts der swapper, sent indlæste banners). Mål: under 0,1.
Quick-win 1: App-cleanup
Hver app installer tilføjer JavaScript til siden — også når app'en ikke aktivt bruges. 10 apps = 10 sæt scripts der skal hentes og parses.
Gå dine apps igennem: hvilke bruger du aktivt? Hvilke kan konsolideres (fx hvis du har 3 apps der laver popups, 2 apps der laver reviews, kan de blive til én)? Hvilke kan erstattes af 50 linjers custom Liquid der vejer 5% af app'ens vægt?
Vi har set shops gå fra 12+ til 4 apps og spare 1+ sekund på LCP.
Quick-win 2: Billed-optimering
Brug WebP eller AVIF — ikke JPG/PNG. Shopify konverterer automatisk på de fleste themes, men tjek output med browserens devtools.
Lazy-load alt below-the-fold. Aldrig lazy-load LCP-billedet (det skal preload's).
Sæt altid `width` og `height` på -tags så browser kan reservere plads og undgå CLS.
Komprimér: et hero-billede på 1MB kan ofte komprimeres til 100KB uden synlig forskel.
Quick-win 3: Defer ikke-kritisk JavaScript
Scripts der ikke er nødvendige for første visning bør have `defer` eller `async`. Det inkluderer typisk: analytics, chat-widgets, popup-værktøjer, A/B-test scripts.
Tredjeparts-scripts er ofte stilet til at indlæses synkront af deres dokumentation. Det er sjældent nødvendigt — defer er næsten altid trygt.
Vores rule of thumb: hvis scriptet ikke er nødvendigt for at vise sidens hovedindhold, så defer det. Det kan rykke INP fra 400ms til under 200ms.
Quick-win 4: Kritisk CSS og fonts
Self-host fonts (ikke Google Fonts via CDN — det er render-blocking). Brug `font-display: swap` så teksten viser med fallback-font mens custom-fonten loades.
Inline kritisk CSS i `
` så above-the-fold-indhold kan paintes uden at vente på det fulde CSS-bundle.Det her er ofte det Shopify-themes glemmer — selv premium themes har ofte render-blocking CSS-loads.
Mål og verificer
Brug Google Search Console > Core Web Vitals for field-data (det Google rangerer på).
Brug PageSpeed Insights for lab + field combineret. Vær opmærksom på at lab-scoren kan være misvisende — field-data er sandheden.
Mål før og efter hver ændring. Hastigheds-arbejde på Shopify uden måling er at famle i blinde — du skal vide om en ændring faktisk hjalp eller ej.
