Hjælp
Log ind

Forbedring af din webshops ydeevne

Din webshop består af en række funktioner, f.eks. temakode, apps, billeder, videoer, karruseller, feeds fra sociale medier og analyse. Disse funktioner kan forbedre de besøgendes oplevelse og udvide dit websites funktionalitet.

Hver funktion, du føjer til din webshop, kan dog påvirke din butiks ydeevne. Nogle funktioner kan gøre dit website langsommere eller skabe uventet adfærd, der kan påvirke brugeroplevelser.

Webydeevne fokuserer på at optimere brugeroplevelsen. I øjeblikket fokuserer webydeevne på tre hovedområder, som også afspejles i Core Web Vitals:

  • Indlæsningshastighed målt ved Largest Contentful Paint (LCP)
  • Layoutstabilitet målt ved Cumulative Layout Shift (CLS)
  • Responsivitet på brugerinteraktion målt ved Interaction to Next Paint (INP)

Optimering af webydeevne betyder, at dine kunder med større sandsynlighed bliver på dit website og konverterer.

På denne side

Optimeringer til din webshop

Din webshop har indbygget weboptimering, og det gælder også for alle nye funktioner. Du behøver ikke at gøre noget særligt for at drage fordel af følgende funktioner:

  • Din webshop hostes på hurtige, globale servere og begrænser ikke din butiks båndbredde. Du kan tjekke status for din Shopify-butik på Shopify Status.
  • Din webshop har et CDN (Content Delivery Network), der drives af Cloudflare, som sikrer, at din webshop indlæses hurtigt i hele verden. Du kan tjekke CDN-status på statussiden for Cloudflare.
  • For at holde indlæsningstiderne nede optimeres billeder automatisk ved hjælp af et billed-CDN. Kombineret med din temakode kan billed-CDN'et levere det bedste billedformat, som også tilpasses i størrelse og komprimeres for at holde filstørrelserne små.

Faktorer, der påvirker webydeevnen

For Shopify-butikker er følgende de største faktorer, der påvirker webydeevnen:

  • Temaet for din webshop
  • De apps, du har installeret
  • Al yderligere tredjepartskode, som du manuelt har føjet til din butik, herunder tag-styringsværktøjer og de tags, de indeholder

Det betyder, at du bør fokusere på følgende for at forbedre din webydeevne:

  • Brug et opdateret og optimeret tema. Alle temaer i Horizon-temafamilien og Online Store 2.0-temaer fra Shopify er gratis og optimeret til webydeevne. Derudover er mange andre tredjepartstemaer også optimeret til webydeevne. Du kan gennemgå de seneste data om temaydeevne.
  • Hvis dit tema tilbyder sideovergange eller andre animationer, skal du sammenligne din webydeevne, før og efter du aktiverer dem. Animationer kan gøre siderne langsommere.
  • Undgå at føje for mange sektioner til sideskabeloner i dit tema. Et stort antal sektioner på sider kan forringe webydeevnen.
  • Hvis du har kollektioner med mange produkter, kan du overveje at aktivere sideinddeling for at begrænse antallet af produkter, der indlæses ad gangen.
  • Evaluer dine installerede apps og din tredjepartskode for at sikre, at de skaber nok værdi til at opveje eventuelle tab i ydeevne.
  • Gennemgå dit tag-styringsværktøj for at fjerne alle ubrugte tags eller tags med lav værdi. Få mere at vide om bedste praksis for tags og tag-styringsværktøjer.

Testværktøjer

Du kan bruge følgende værktøjer til at undersøge din webshops ydeevne:

  • Rapporter over webydeevne: Shopifys rapporter over webydeevne bruger Core Web Vitals til at måle, hvordan rigtige brugere oplever din webshop.
  • PageSpeed Insights: Du kan køre dine egne rapporter ved hjælp af Googles PageSpeed Insights for at se mere detaljerede metrikværdier for sider i din butik.

Forståelse af anbefalinger til ydeevne fra tredjeparter

Scanningsværktøjer til ydeevne fra tredjepart foreslår muligvis ændringer for at forbedre din butiks hastighed. Mange af disse anbefalinger er dog allerede implementeret af Shopify eller gælder ikke for Shopify-butikker.

Optimeringer, der allerede er inkluderet i Shopify

Din Shopify-butik inkluderer automatisk følgende ydeevneoptimeringer:

CDN (Content Delivery Network): Shopify tilbyder et CDN i verdensklasse uden yderligere gebyrer, hvilket sikrer hurtig, global ydeevne. Alle aktiver leveres ved hjælp af HTTP/2, hvilket reducerer belastningen sammenlignet med ældre protokoller.

Browser-cache: Shopify indstiller browser-cachen for ressourcer, der kan cachelagres, til et år, hvilket er den maksimalt mulige varighed. Det betyder, at tilbagevendende besøgende i din butik vil opleve hurtigere indlæsningstider.

Gzip-komprimering: Shopify anvender gzip-komprimering på CSS, JavaScript, dokumenter og sider for at reducere båndbredden og forbedre indlæsningstiderne. Keep-alive er også aktiveret for hentning af flere filer.

Billedoptimering: Shopify komprimerer automatisk JPG-billeder ved hjælp af avancerede algoritmer, der afbalancerer komprimering og visuelt udtryk. Billeder leveres ofte i WebP-format for at opnå bedre komprimering og hurtigere indlæsning.

Filminimering: Shopify minimerer automatisk CSS- og JavaScript-filer, når de anmodes af dit butikslayout, hvilket reducerer filstørrelserne uden at påvirke funktionaliteten.

Når anbefalinger fra tredjeparter ikke gælder

Scanningsværktøjer fra tredjepart foreslår muligvis ændringer, der ikke er relevante for Shopify-butikker:

  • Konfigurationer på serverniveau: Anbefalinger om serveropsætning, HTTP-sidehoveder eller cachelagringspolitikker er allerede optimeret af Shopifys infrastruktur.
  • CDN-implementering: Forslag om at tilføje et CDN er unødvendige, da Shopify som standard inkluderer et højtydende CDN.
  • Indstillinger for komprimering: Anbefalinger om at aktivere komprimering er allerede implementeret på tværs af Shopifys platform.

Håndtering af relevante anbefalinger

Fokuser på anbefalinger, der relaterer til din butiks specifikke indhold og funktioner:

  • Billedoptimering: Sørg for, at dine uploadede billeder har en passende størrelse og bruger de anbefalede formater.
  • Appevaluering: Overvej, om installerede apps giver nok værdi til at opveje en eventuel påvirkning af ydeevnen.
  • Temaoptimering: Vælg temaer, der er optimeret til ydeevne, og begræns antallet af sektioner på sideskabeloner.

Fejlfinding af sider, der indlæses langsomt

Hvis din butik indlæses langsomt, skal du følge disse trin for at identificere og løse problemet:

Trin 1: Bekræft problemet

  1. Test selv din butiks indlæsningshastighed fra forskellige enheder og internetforbindelser.
  2. Bed andre om at teste din butik for at bekræfte, at det ikke er et lokalt problem med din internetforbindelse.
  3. Brug testværktøjer som PageSpeed Insights for at få specifikke metrikværdier for ydeevnen.

Trin 2: Find årsagen

Tjek for for mange apps: For mange apps, der indlæser aktiver på dit butikslayout, kan nedsætte ydeevnen. Gennemgå dine installerede apps, og fjern dem, der ikke er afgørende for dit salg.

Gennemgå store billeder: Sider med mange billeder i høj kvalitet kan indlæses langsomt. Optimer dine billeder, eller reducer antallet, der vises. Få mere at vide om anbefalede billedstørrelser.

Find langsomme scripts: Hvis dit website hænger på en blank side, før det hele indlæses på én gang, skal du bruge din browsers udviklerværktøjer til at finde langsomme scripts. Kontakt app- eller temaudvikleren for at få løst problemet.

Trin 3: Handling

Fjern unødvendige apps: Når du afinstallerer en app, fjernes dens kode ikke automatisk fra dit tema. Du skal muligvis kontakte appudvikleren for at få en komplet vejledning til fjernelse.

Optimer billeder: Brug passende filformater (JPG til fotos, PNG til grafik med gennemsigtighed), og tilpas størrelsen på billeder, så den matcher deres visningsstørrelse.

Evaluer temaets ydeevne: Overvej at skifte til et tema, der er optimeret til ydeevne, hvis dit nuværende tema forårsager betydelige hastighedsnedsættelser.

Få support til din webshops ydeevne

Hvis du bruger et gratis tema fra Shopify, kan Shopify Support muligvis hjælpe dig med grundlæggende forbedringer af ydeevnen.

Hvis du bruger et tredjepartstema og har brug for hjælp, skal du kontakte din temaudvikler, ansætte en Shopify-ekspert i webydeevne eller ansætte en Shopify-partner til websiteydeevne og -hastighed. Få mere at vide om at ansætte en Shopify-partner.

Hvis dit problem med ydeevnen skyldes en app, kan du kontakte din appudvikler.

Hvis du har et udviklingsteam eller en bureaupartner, kan du også kontakte dem for at få yderligere hjælp.

Tekniske oplysninger og ressourcer til fejlfinding

Hvis du er udvikler og vil forbedre ydeevnen for et Shopify-butikslayout, -tema eller en -app, kan du gennemgå følgende ressourcer for hver Core Web Vital. Få mere at vide om bedste fremgangsmåder for ydeevne for Shopify-temaer.

Indlæsningshastighed

Largest Contentful Paint (LCP) måler indlæsningshastigheden baseret på, hvor hurtigt det største element på skærmen bliver synligt. Time to first byte (TTFB) og first contentful paint (FCP) er understøttende metrikværdier, som hjælper dig med bedre at forstå, hvor den primære årsag til problemet stammer fra. Du kan få mere at vide om fejlfinding af almindelige årsager til langsom indlæsning i Shopify Liquid-butikslayouts.

Visuel stabilitet

Cumulative Layout Shift (CLS) måler visuel stabilitet baseret på, hvor meget indholdet flytter sig uventet under indlæsning. Du kan læse How to optimize Cumulative Layout Shift (CLS) on Shopify sites for at få en dybdegående vejledning til fejlfinding af CLS.

Interaktivitet

Interaction to Next Paint (INP) måler interaktivitet baseret på, hvor lang tid det tager for siden at blive responsiv over for de fleste brugerhandlinger. For eksempel brugerhandlinger såsom at klikke på et link eller en knap.

Hvis du oplever dårlig INP, har du højst sandsynligt for meget JavaScript i din butik fra enten temakode, appkode eller tredjeparts-/tag manager-kode. Arbejd på at rydde op i dine værste syndere. Få mere at vide i 3 ways to find your worst JavaScript offenders for page load. Hvis du stadig har problemer med INP, kan du få mere at vide via ressourcerne på web.dev.