Ottimizzare le immagini

Annotazioni

Il Retail Interest Group di Dynamics 365 Commerce è passato da Yammer a Viva Engage. Se non si ha accesso alla nuova community di Viva Engage, compilare questo modulo (https://aka.ms/JoinD365commerceVivaEngageCommunity) da aggiungere e rimanere impegnati nelle discussioni più recenti.

Questo articolo illustra come migliorare le prestazioni del sito Web ottimizzando l'uso delle immagini in Microsoft Dynamics 365 Commerce durante il processo di aggiornamento o live.

Applicabile a

Questo articolo si applica alle seguenti configurazioni:

• Versione: Commerce 10.0.16 o successiva
• Componente: Business-to-consumer (B2C) o business-to-business (B2B)
• Area di funzionalità: prestazioni di siti Web commerciali

Prerequisiti

Installare il Dynamics 365 Commerce software development kit (SDK) online. Per altre informazioni, vedere Installare l'SDK online.

Passaggi per ottimizzare le immagini

Il download delle immagini può influire significativamente sulle prestazioni di una pagina Web. Per ridurre le dimensioni delle immagini e contribuire a migliorare le prestazioni effettive e percepite del sito Web, seguire questa procedura:

1. Utilizza Cascading Style Sheets (CSS) per generare immagini per elementi come i pulsanti ogni volta che puoi.

2. Caricare immagini di marketing o prodotti di alta qualità e ad alta risoluzione nel Catalogo multimediale di Commerce Site Builder. Il ridimensionatore di immagini ridimensiona automaticamente le immagini durante il rendering.

3. Includi le proprietà di larghezza e altezza per ciascuna immagine:

   1. Per ogni modulo che utilizza immagini, apri il file tema.settings.json nella directory /src/settings del percorso di installazione dell'SDK.
   2. Trova il modulo che desideri aggiornare.
   3. Assicurati che le proprietà dell'immagine includano i parametri di larghezza e altezza. Per ulteriori informazioni, vedere la sezione Configurare le impostazioni del tema.

4. Disabilitare il caricamento lento delle immagini:

   1. Apri il generatore di siti di Commerce
   2. Vai al modulo che include un'immagine che non deve essere caricata in modo lazy.
   3. Per i moduli di raccolta di prodotti, deselezionare la casella di controllo Abilita caricamento lazy modulo. Per gli altri moduli, selezionare la casella di controllo Disabilita caricamento lazy.
   4. Salvare, visualizzare in anteprima e pubblicare il contenuto.

Convalida

Usare il metodo seguente per verificare che l'uso dell'immagine sia ottimizzato.

• Descrizione o scopo: verifica le prestazioni della pagina.
• Passaggi da eseguire: esegui il test delle prestazioni prima e dopo aver ottimizzato le immagini.
• Risultato: le prestazioni sono migliorate dopo aver ottimizzato le immagini.

Risorse aggiuntive

Le migliori pratiche per lo sviluppo di Dynamics 365 Commerce