En langsom produktside koster sjældent ét salg ad gangen. Den skaber små friktioner i hvert led: Annoncetrafikken forlader siden, kunderne ser ikke varianter eller levering, og færre når helt til checkout. I denne casestudie om webshop-hastighed ser vi på, hvordan en typisk Shopify-webshop kan forbedre købsoplevelsen uden at ofre de funktioner, der understøtter salget.
Casen er baseret på et mønster, vi ofte ser hos voksende danske webshops: En visuelt stærk butik, et stigende antal apps og kampagner, men en forside og produktsider, der er blevet tungere over tid. Det er ikke et tegn på dårlig drift. Det er en naturlig konsekvens af at prioritere nye funktioner, tracking og markedsføring. Udfordringen opstår, når ingen længere ejer den samlede tekniske belastning.
Udgangspunktet: En webshop med tung trafik og tung kode
Webshoppen i casen sælger produkter med et gennemsnitligt ordreniveau, hvor kunden typisk besøger flere produktsider, før købet besluttes. Størstedelen af trafikken kommer fra mobil, og en betydelig del kommer fra betalte sociale medier. Det betyder, at første indlæsning på en almindelig mobilforbindelse er langt vigtigere end, hvordan siden føles på en hurtig kontorforbindelse.
Før optimeringen var hjemmesiden bygget på et standard Shopify-tema, der var blevet tilpasset over flere omgange. Der var installeret apps til anmeldelser, bundles, e-mail, samtykke, ønskelister, badges, produktfeeds og kampagner. Flere apps løste relevante forretningsbehov, men de indlæste også JavaScript og eksterne ressourcer på tværs af butikken - også på sider, hvor funktionen ikke blev brugt.
Målingerne viste især tre problemer. Det største indholdselement på produktsiden - typisk produktbilledet - blev synligt for sent. Interaktioner som variantvalg og læg i kurv kunne reagere langsomt på mobil. Samtidig rykkede indholdet lidt, når badges, anmeldelser og bannere blev indlæst. Det er de samme forhold, som ofte beskrives gennem LCP, INP og CLS.
Det afgørende var dog ikke at jagte en perfekt score i et testværktøj. Målet var at gøre vejen fra annonce til produktvalg og kurv hurtigere for rigtige kunder.
Casestudie: webshop-hastighed måles på købsflowet
Første skridt var at kortlægge, hvad der faktisk blev indlæst på de mest værdifulde sider: Forside, kollektionsside, produktside, kurv og checkout. Checkout på Shopify er i høj grad platformstyret, mens tema, apps og indhold har stor betydning før kunden når dertil. Derfor lå det største potentiale på produkt- og kollektionssiderne.
Analysen viste ikke ét enkelt problem. Den viste et samlet mønster: For store billedfiler, scripts fra apps, der blev kørt overalt, flere tracking-tags med overlappende formål samt kode i temaet, som indlæste funktioner før de var nødvendige.
En vigtig detalje var produktmedierne. Flere produktbilleder var uploadet i meget høje dimensioner, selv om de blev vist i betydeligt mindre format på mobil. Shopify leverer moderne billedformater og tilpassede størrelser, men temaets implementation og billedvalget skal stadig understøtte det. Når et stort hero-billede eller primært produktfoto er tungt, mærker kunden det før alt andet.
Derudover brugte webshoppen tre forskellige løsninger, der hver især bidrog til tracking eller marketingautomatisering. Ingen af dem var nødvendigvis forkerte. Men deres scripts blev lagt på alle sider, og nogle ventede ikke med at indlæse, til kunden havde accepteret samtykke eller faktisk skulle bruge funktionen. Det gjorde den første visning dyrere end nødvendigt.
Tiltagene: Fjern belastning før du tilføjer teknik
Optimeringsarbejdet begyndte ikke med en ny app til hastighed. Det begyndte med oprydning. Apps blev gennemgået ud fra deres reelle værdi: Skaber de omsætning, reducerer de manuelt arbejde, eller understøtter de en nødvendig kunderejse? Hvis svaret var uklart, blev de sat på pause og målt.
To funktioner kunne erstattes af lettere funktionalitet i temaet. En tredje blev beholdt, men dens kode blev kun indlæst på de produktsider, hvor den var relevant. Det reducerede antallet af ressourcer ved første sidevisning uden at fjerne vigtige salgsargumenter.
Billederne blev derefter prioriteret efter placering. Det primære produktbillede blev leveret hurtigt og i passende størrelse, mens billeder længere nede på siden først blev indlæst, når kunden nærmede sig dem. Video på produktsider blev ikke fjernet, men den blev behandlet som sekundært indhold. Kunden skulle kunne se produktet, pris, variant og købsknap, før videoen brugte data og processorkraft.
Temaet blev også gennemgået med fokus på renderingsrækkefølge. Kode til funktioner under folden blev udskudt, hvor det var forsvarligt. Ubrugte kodefragmenter fra tidligere kampagner og app-installationer blev fjernet. Det er et område, der ofte overses: Når en app afinstalleres, forsvinder dens kode ikke altid fra temaet automatisk.
Endelig blev der arbejdet med visuel stabilitet. Faste dimensioner til billeder, badges og indlejrede elementer gjorde, at indholdet ikke sprang rundt under indlæsning. Det lyder som en lille forbedring, men på en mobil produktside kan et layoutskift betyde, at kunden trykker på det forkerte eller mister overblikket over variant- og købsknappen.
Resultatet skal læses sammen med forretningen
Efter ændringerne blev den oplevede indlæsning på mobil mærkbart hurtigere. Det største indholdselement blev vist tidligere, produktsiderne blev mere stabile, og handlinger som variantvalg føltes mere direkte. I en case som denne er det realistisk at se kortere indlæsningstid på centrale sider og bedre engagement fra mobiltrafik, men det er forkert at love en bestemt konverteringsløft alene på baggrund af hastighed.
Konvertering afhænger også af pris, produkt, lagerstatus, fragt, marked, annoncekvalitet og sæson. Hastighed gør ikke et svagt tilbud stærkt. Den fjerner derimod en unødvendig barriere for et tilbud, der allerede har potentiale.
Det mest værdifulde resultat var derfor ikke kun en bedre teknisk måling. Webshoppen fik et klarere grundlag for videre udvikling. Hver ny app, kampagnesektion eller integration kunne nu vurderes ud fra samme spørgsmål: Hvad bidrager den med, og hvad koster den kunden i hastighed og kompleksitet?
Hvornår bør en Shopify-webshop gennemgås?
En hastighedsgennemgang er særligt relevant, når annonceudgifterne stiger, mens mobilkonverteringen ikke følger med. Det gælder også efter et redesign, efter mange app-installationer eller når medarbejdere oplever, at produkt- og kollektionssider føles træge i den daglige drift.
Det betyder ikke, at alle apps skal væk, eller at en webshop skal være visuelt spartansk. En review-løsning, abonnementsfunktion eller avanceret bundling kan være direkte omsætningsskabende. Men hver funktion skal implementeres med omtanke. I nogle tilfælde er den rigtige løsning at beholde appen. I andre tilfælde er det bedre at bygge en mindre funktion direkte i Shopify-temaet, så kontrollen over kode og indlæsning bliver større.
Hos CRP Digital ser vi hastighed som en del af den løbende Shopify-drift, ikke som et engangsprojekt. Temaer, apps og tracking ændrer sig, og en hurtig webshop kan gradvist blive tung igen, hvis der ikke følges op.
Den bedste næste handling er derfor at teste webshoppen på de sider, hvor kunderne træffer beslutningen, med en almindelig mobilforbindelse og et konkret købsformål. Hvis kunden skal vente på at se produktet, vælge en variant eller lægge i kurven, er der sandsynligvis noget værdifuldt at hente.
Do you need help with your Shopify shop?
Whether you have a major growth project or just need ongoing support, we have a solution that fits.
Ready to take your webshop to the next level?
We create Shopify webshops that both look fantastic and sell well. Let us have a no-obligation chat about your goals.
