Optimaliser bilder

Denne artikkelen forklarer hvordan du kan bidra til å forbedre nettstedets ytelse ved å optimalisere bildebruken i Microsoft Dynamics 365 Commerce under oppgraderingen eller publiseringen.

Gjelder for

Denne artikkelen gjelder for følgende konfigurasjoner:

• Versjon: Commerce 10.0.16 eller senere
• Komponent: Bedrift-til-forbruker (B2C) eller bedrift-til-bedrift (B2B)
• Funksjonsområde: Ytelse for Commerce-nettsted

Forutsetninger

Installer nett-SDK (Software Development Kit) for Dynamics 365 Commerce. Hvis du vil ha mer informasjon, kan du se Installer nett-SDK.

Trinn for å optimalisere bilder

Nedlasting av bilder kan påvirke ytelsen til en nettside betydelig. Følg disse trinnene for å redusere størrelsen på bildene og bidra til å forbedre den faktiske og oppfattede ytelsen på nettstedet:

1. Bruk Cascading Style Sheets (CSS) til å generere bilder for elementer som knapper når du kan.

2. Last opp høykvalitets, høyoppløselig markedsføring eller produktbilder til Mediebiblioteket for Handelsnettstedsbyggeren. Bilderenseren endrer deretter automatisk størrelsen på bilder under gjengivelsen.

3. Ta med egenskaper for bredde og høyde for hvert bilde:

   1. For hver modul som bruker bilder, åpner du theme.settings.json-filen i /src/settings-katalogen på SDK-installasjonsstedet.
   2. Finn modulen du vil oppdatere.
   3. Sørg for at bildeegenskapene inkluderer bredde- og høydeparametere. Hvis du vil ha mer informasjon, kan du se delen Konfigurer temainnstillinger.

4. Deaktiver forsinket lasting for bilder:

   1. Åpne Commerce-nettstedsbygger.
   2. Gå til modulen som inneholder et bilde som ikke skal lastes inn.
   3. For produktinnsamlingsmoduler fjerner du merket for Aktiver modul for forsinket innlasting. For andre moduler velger du Deaktiver forsinket innlasting-avmerkingsboksen.
   4. Lagre, forhåndsvis og publiser innholdet.

Velg et bildeutgangsformat

Bildedimensjoner, utdataformat og komprimeringskvalitet påvirker nedlastingsstørrelsen på ulike måter. Endring av størrelse reduserer pikseldimensjonene. Å velge et utdataformat kan redusere antall bytes som kreves for å representere disse pikslene. Kvalitetsinnstillingen styrer komprimering med kvalitetstap. Den reduserer ikke filstørrelsen når utdataformatet er tapsfri PNG.

Når bildeformat er tilgjengelig i en moduls bildeinnstillinger, bruk følgende veiledning:

• WebP (minste filstørrelse): Vurder dette alternativet for ugjennomsiktige produktbilder og markedsføringsbilder. Sammenlign nedlastet størrelse og visuell kvalitet med eksisterende output.
• JPEG (uten gjennomsiktighet): Bruk dette alternativet for fotografier når JPEG-utgang kreves.
• PNG: Bruk dette alternativet for bilder som krever gjennomsiktighet. Konvertering av et JPEG-fotografi til PNG kan øke nedlastingsstørrelsen uten å forbedre detaljnivået.
• Original (ingen konvertering): La utdataformatet være uspesifisert og behold eksisterende oppførsel til bildeskalereren. Andre innstillinger kan fortsatt påvirke resultatet.

I et mediegalleri konfigurerer du miniatyrbilder, hovedgalleribilder og zoomede bilder separat. Se Konfigurer bildeutgangsformat for instruksjoner. Et formatvalg påvirker det leverte bildet, ikke kildefilen i Media-biblioteket.

Mindre bilder kan lastes ned raskere og redusere dataoverføringen, spesielt på tregere forbindelser. De garanterer ikke tilsvarende forbedring i total sidelastetid eller Largest Contentful Paint (LCP). Mål disse metrikkene separat.

Valider

Bruk følgende metode for å validere at bildebruken din er optimalisert:

• Beskrivelse eller formål: Bekreft sideytelse.
• Trinn som skal kjøres: Kjør ytelsestester før og etter at du har optimalisert bildene.
• Bestått resultat: Ytelsen forbedres etter at du har optimalisert bildene.

Når du endrer bildeformatet, utfør også disse sjekkene:

1. Åpne nettleserens utviklerverktøy, deaktiver cachen, og last inn siden under de samme nettverksforholdene for hver sammenligning.
2. Undersøk bildeforespørsler. Bekreft responsen Content-Type og overføringsstørrelsen i stedet for å stole på kildefilendelsen. Der formatinnstillingen er brukt, inkluderer URL-en til bildeendringsverktøyet f=webp, f=jpg eller f=png.
3. Sjekk miniatyrbilder, hovedbilder, produktvarianter, zoom og fullskjermvisning separat. Ikke anta at én forespørsel representerer hver bildesti.
4. Sammenlign visuell kvalitet, gjennomsiktighet og nedlastingstid før og etter endringen.
5. Mål sidelastetid og LCP separat fra nedlastingstiden for bildet. Publiser endringen først etter at du har bekreftet akseptabelt utseende og ytelse.

Flere ressurser

Beste praksis for Dynamics 365 Commerce-utvikling