Optimizar imágenes

Este artículo explica cómo puede ayudar a mejorar el rendimiento del sitio web optimizando el uso de imágenes en Microsoft Dynamics 365 Commerce durante la actualización o el proceso de puesta en marcha.

Se aplica a

Este artículo se aplica a las siguientes configuraciones:

• Versión: Commerce 10.0.16 o posterior
• Componente: empresa a consumidor (B2C) o empresa a empresa (B2B)
• Área de característica: rendimiento del sitio web de Commerce

Requisitos previos

Instale el kit de desarrollo de software (SDK) en línea de Dynamics 365 Commerce. Para obtener más información, consulte Instalar el SDK en línea.

Pasos para optimizar imágenes

Uno de los mayores impactos en el rendimiento de una página web puede ocurrir cuando se descargan imágenes. Para reducir el tamaño de sus imágenes y ayudar a mejorar el rendimiento real y percibido de su sitio web, siga estos pasos.

1. Utilice hojas de estilo en cascada (CSS) para generar imágenes para elementos como botones siempre que pueda.

2. Cargue imágenes de productos o marketing de alta calidad y alta resolución en la Biblioteca multimedia del creador de sitios de Commerce. El cambio de tamaño de la imagen se utilizará automáticamente durante la representación.

3. Incluya propiedades de ancho y alto para cada imagen:

   1. Para cada módulo que utiliza imágenes, abra el archivo theme.settings.jsonen el directorio /src/settings, en la ubicación de instalación del SDK.
   2. Busque el módulo que desea actualizar.
   3. Asegúrese de que las propiedades de la imagen incluyan parámetros de ancho y alto. Para obtener más información, consulte Configurar opciones de tema.

4. Deshabilite la carga diferida para imágenes:

   1. Abra el generador del sitio de Commerce.
   2. Vaya al módulo que incluye una imagen que no debe cargarse de forma diferida.
   3. Para los módulos de recopilación de productos, borre la casilla Habilitar carga diferida de módulo. Para otros módulos, marque la casilla Deshabilitar la carga diferida.
   4. Guardar, obtener una vista previa y publicar su contenido.

Validar

Utilice el siguiente método para validar que el uso de la imagen se haya optimizado.

• Descripción o propósito: Verificar el rendimiento de la página.
• Pasos para ejecutar: Ejecutar pruebas de rendimiento antes y después de optimizar sus imágenes.
• Resultado de aprobación: el rendimiento mejora después de optimizar las imágenes.

Recursos adicionales

Prácticas recomendadas para Dynamics 365 Commerce el desarrollo