Compartir a través de

Optimizar imágenes en las páginas de detalles del producto

Este artículo describe cómo optimizar las imágenes en las páginas de detalles del producto (PDP) en Microsoft Dynamics 365 Commerce.

Una forma de mejorar el rendimiento de los PDP es optimizar la forma en que se representan las imágenes del producto. De forma predeterminada, el módulo de la galería de medios no carga imágenes hasta después de que se haya completado la representación del cuadro de compra de PDP en el lado del cliente. Primero se realiza una llamada para obtener la ubicación de los archivos multimedia, luego todas las imágenes se validan con llamadas de red adicionales y luego solo las imágenes válidas se representan en la página. Estas llamadas de red del lado del cliente afectan el tiempo total de carga de las páginas del sitio, lo que resulta en un rendimiento degradado. Con el lanzamiento de la versión 10.0.26 de Commerce, se agregó una opción al módulo de la biblioteca de medios para mejorar el rendimiento al cargar primero las imágenes en el lado del servidor y validar que existan.

Soporte de biblioteca de módulos

La versión 10.0.26 de la biblioteca del módulo de comercio contiene código dentro del módulo de la galería de medios para cargar imágenes en el lado del servidor, utilizando la cadena de consulta de marcador de posición de la API de CMS al solicitar imágenes. El módulo de galería de medios obtiene imágenes de productos llamando a la API GetMediaLocations, pero no valida las imágenes en el lado del servidor. Todas las imágenes se pasan al módulo para renderizar y luego se cargan desde el sistema CMS. Las imágenes que no se procesan se ocultan. Una vez que las imágenes se procesan en el lado del servidor, el módulo de la galería de medios realiza las llamadas de red de imágenes en el lado del cliente para verificar que las imágenes existen y luego procesa solo las imágenes válidas.

Se requiere alguna configuración para activar la función de optimización de imágenes de la galería de medios. Los pasos de configuración necesarios dependen de si está utilizando o no el módulo de galería de medios predeterminado sin ninguna personalización.

Dado que el cambio en el comportamiento es diferente, para usar la función de optimización de imágenes debe optar por garantizar la compatibilidad con versiones anteriores para las implementaciones existentes. Los pasos necesarios para habilitar la función de optimización de imágenes multimedia para el módulo de galería multimedia predeterminado difieren de los pasos necesarios para un módulo de galería multimedia personalizado.

Para habilitar la optimización de imágenes para el módulo de galería de medios predeterminado (no personalizado), siga estos pasos.

  1. Agregue el conmutador "enableImageOptimizeEvents": true al archivo platform.settings.json.
  2. Una vez que se haya agregado el conmutador y se haya implementado el paquete en un entorno, vaya al creador de sitios de Commerce y abra la página de detalles del producto.
  3. Dentro del módulo Buybox del PDP, seleccione la ranura del módulo Galería multimedia.
  4. En el panel de propiedades del módulo de la galería multimedia, seleccione la casilla de verificación Omitir validación de imagen.
  5. Vaya a Configuración del sitio > Extensiones y debajo de Imagen de marcador de posición vacía, ingrese el nombre de una imagen de marcador de posición que se ha cargado en la galería multimedia (por ejemplo, "Marcador de posición.png").

Si el módulo de la galería de medios se ha clonado o personalizado previamente, no contendrá el código necesario para admitir la función de optimización de imágenes de la galería de medios. Para habilitar la optimización de imágenes, las actualizaciones de código del módulo de galería de medios predeterminado deben fusionarse en el módulo personalizado.

La siguiente lista contiene los principales cambios en el módulo de galería de medios predeterminado que admiten la optimización de imágenes.

  • Se mantiene una propiedad a nivel de estado para identificar si el módulo se está representando por primera vez. El valor de la propiedad será "verdadero" para la carga inicial del módulo en el lado del servidor.
  • El método render del módulo lee el resultado de get-media-locations-for-selected-variant acción de datos y utiliza el conjunto resultante de imágenes para representar el módulo. En esta etapa, imageFallbackOptimize = true y loadFailureBehavior='hide' se pasan a Imagen componente para garantizar que las imágenes se reproduzcan en el lado del servidor y que las imágenes rotas estén ocultas.
  • En la etapa ComponentDidMount del módulo, las URL de imagen se validan con llamadas de red y solo se conservan las URL con 200 respuestas de CMS. Luego, el estado del módulo de la galería de medios se actualiza con el nuevo conjunto de imágenes, lo que desencadena una nueva representación del módulo. La representación llama al componente Imagen con imageFallbackOptimize = false.