Nueva plataforma zenith-watches.com

Zenith, manufactura de relojería suiza del grupo LVMH fundada en 1865, nos ha solicitado la creación de su nueva plataforma digital de comercio electrónico. Con el deseo de ofrecer a sus clientes conectados una experiencia innovadora y vanguardista, Zenith y WIDE han colaborado en la elaboración de este nuevo entorno digital.

Más allá de un simple sitio de comercio electrónico, le ofrecemos un espacio arquitectónico y la visión de WIDE, autor de esta plataforma.

El sitio de Zenith se gestionaba con Magento1 y no ofrecía a sus visitantes la posibilidad de comprar en línea. Como sin duda sabrá, Magento 1 lleva a término su vida útil, tras el anuncio por parte de Adobe del fin de su soporte. WIDE ha asistido a la marca, a la altura de sus expectativas, en su transición a Magento2.

 

Nuestra visión del comercio electrónico.
A fecha de hoy, construir un sitio de comercio electrónico es sencillo. Escoja cualquier solución del mercado, personalícela en su back-office y, listo: estará vendiendo sus productos en línea.

Pero cuando hablamos de una empresa internacional, presente en varios países, con equipos de comercio electrónico específicos y de márketing locales, una dirección centralizada de servicios informáticos y dificultades específicas por cuestiones de mercado, no podrá funcionar de esta manera y deberá pensar en una plataforma a la altura de su posición y de sus necesidades.

Con la evolución de Internet y las incesantes innovaciones del sector, WIDE ha tenido ocasión de mostrar su capacidad de considerar todas las dificultades de sus clientes y responder, en cada ocasión, de la forma más adecuada a sus necesidades.

Un sitio web de comercio electrónico es, hoy, un canal de venta a la altura de las redes sociales, las tiendas y los diferentes puntos de contacto del ecosistema de marca. De esta manera, está obligado a interconectarse al conjunto de los componentes de negocio de la empresa:

• Gestión de la información de producto - PIM
• Gestión de archivos digitales - DAM
• Gestión de la relación con el cliente - CRM
• Planificación de los recursos de la empresa - ERP
• Plataforma de contenidos
• Proveedor de servicios de pago - PSP
• Automatización de márketing
• Gestión de accesos e identidades - IAM

y el resto de sistemas...

 

Mantener esta visión.
La arquitectura técnica de la plataforma de comercio digital debe estar al servicio de la marca y no a la inversa. ¿Qué razón existe para hacer concesiones funcionales, técnicas, económicas o editoriales a causa de decisiones técnicas y tecnológicas?
La creación de un sitio de comercio electrónico puede contemplarse desde tres perspectivas:

• Una plataforma orientada al comercio electrónico: CMS, comercio electrónico clásico y soluciones todo en uno; Rápido, eficaz y robusto. Su creación impondrá una arquitectura monolítica; cualquier integración deberá someterse a la solución elegida;
• Una plataforma orientada DXP, relativamente similar a la precedente. Le ofrecerá la posibilidad de exponer su contenido basándose en una API de comercio electrónico. Esta solución impulsará su visión digital de marca a través de una única solución interconectada con el resto de su ecosistema, pero implicará un conocimiento elevado de la solución elegida.
• Una plataforma orientada API: interconectar sistemas mediante API REST, GraphQL u otro, manteniendo una visión orientada al servicio o los microservicios. Este tipo de plataforma no le exigirá la elección de una solución general y le permitirá adaptar con rapidez su ecosistema a la evolución del mercado.

 

Diferentes enfoques de las plataformas de comercio electrónico

Con el paso de los años, WIDE y sus expertos ayudan así a sus clientes en el despliegue de la mejor arquitectura para sus necesidades.
 

Por qué comprometerse
La imagen de Zenith, en el ámbito de la relojería, es una imagen de excelencia e innovación. Su plataforma de comercio electrónico debe crearse a su imagen.

Con esta idea en nuestra cabeza, hemos diseñado el nuevo sitio zenith-watches.com.

Las reglas son sencillas:

• Un sitio de comercio electrónico internacional que sea referencia del sector
• Un contenido rico
• Una plataforma de alto rendimiento e interconectada con los sistemas de información de la marca
• Una plataforma abierta a la innovación que mira hacia el futuro

Al analizar todos estos puntos, optamos por una arquitectura desacoplada orientada API que diera respuesta a un concepto clave que nos ha guiado a lo largo de toda la creación de la plataforma: la separación de las preocupaciones.
 

Separación de las preocupaciones.
El principio de separación de las preocupaciones es un concepto informático que tiene por objetivo aislar cada bloque aplicativo para concentrarse en la tarea que mejor realiza.

Este enfoque permite abrir una arquitectura informática, en oposición a las viejas arquitecturas monolíticas del pasado.

Al optar por una arquitectura orientada API, garantizamos una plataforma óptima, capaz de conectar las mejores soluciones para Zenith en función de sus necesidades de negocio. El sitio de comercio electrónico se convierte así en un canal de venta rico, sólido, de amplia interconexión con todos los sistemas de la marca y que responde a todos los problemas, ya que está abierto a las mejores soluciones del mercado.
 

Arquitectura zenith-watches.com  👷

 

 

Este esquema presenta los componentes clave de la arquitectura desacoplada para Zenith:

• Una solución de comercio electrónico: Magento2 y su API;
• Un PIM, Easy Docmaker, que facilita los datos de producto a Magento
• Una solución CRM, Salesforce Sales Cloud, que facilita los datos de las tiendas y los clientes
• Un CMS sin cabeza: Prismic
• Una App Web adaptable (PWA): Vue Storefront
• Un CDN: Akamai

 

Enfoque DevOps
El flujo de trabajo para la producción que se empleó en el nuevo sitio Zenith se enmarca en la gestión interna de WIDE, de calidad y con enfoque DevOps, y apoyado por la totalidad de nuestros equipos técnicos:

• Empleo de Docker para uso local de los equipos
• Integración continua mediante Gitlab
• Planificación de despliegue para los controles de calidad automatizados
• Auditorías de calidad de código (code review y SonarQube)
• Auditorías de calidad de código (code review y SonarQube y Detectify)
• Pruebas unitarias y de funcionamiento
• Auditoría de rendimiento automatizada (Sitespeed)
• Construcción y despliegue continuo en nuestro clúster de Kubernetes
• Despliegue en producción de las imágenes generadas
• Seguimiento aplicativo y generación de informes de error (Uptime robot, Sentry)

El proyecto Zenith se integra perfectamente en nuestro proceso de trabajo. Su arquitectura desacoplada nos permite separar de manera óptima los bloques de programa desarrollados y así optimizar los rendimientos y la calidad.

Hemos realizado un esfuerzo particular en la integración de GKE (Google Kubernetes Engine) en nuestro flujo de trabajo. En colaboración con los equipos de alojamiento de Zenith, el conjunto de bloques aplicativos de la solución se desplegó tras su construcción según nuestra planificación Gitlab en los entornos de Zenith, en GKE. Este enfoque orientado a contenedores nos ofrece así un máximo de seguridad, extensiblidad y flexibilidad.

 

El resto de componentes
El ecosistema de Zenith integra también otras herramientas orientadas hacia el negocio y el márketing (One Trust, GTM, Google Maps, Google RecaptchaV3, ABTasty, …). Se adapta de manera nativa a nuestra arquitectura y permite el control de la actividad de comercio electrónico de manera pertinente: 

• Datos;
• Vendedores;
• Personalización y recomendación de contenidos;
• GDPR;
• Spam;
• Envío de correos electrónicos. 

💡 La integración de sus soluciones puede tener un fuerte impacto en el rendimiento del sitio. Trabajar de la mano de los colaboradores, analizando el impacto de su solución y encontrar el mejor compromiso para la carga de sus herramientas (implementación de una carga asíncrona, incorporar el script en su CDN, utilizar módulos de JavaScrpit dedicados y aislados,...).

Contenido ✍️El contenido editorial es un componente mayor de la estrategia de la marca. Zenith no escapa a la regla y su historia, su posicionamiento y su riqueza requieren el empleo de una solución que le permita exponerlo de manera eficaz.

Al diseñar la arquitectura de la plataforma, nos esforzamos en inventar una solución de gestión de contenido robusta, modulable y a la altura de sus necesidades.

 

El contenido como un servicio

El enfoque evidente, cuando construye un sitio web grande o pequeño, de comercio electrónico o no, es decirse:

Despliego mi sitio, basado en una solución de comercio electrónico o un CMS clásico y utilizo su bloque CMS... y haré lo mismo para cada nuevo sitio.

Al adoptar tal estrategia, chocará con varios problemas importantes:

• Una solución de comercio electrónico gestionará de manera correcta y sencilla mi estrategia editorial?
• Mi sitio será capaz de distribuir su contenido a mis puntos de contacto digital futuros (aplicaciones móviles, soluciones internas, POS, e-learning, minisitios,...) ?
• Si mañana creo un nuevo sitio, ¿deberé depender de otro sitio para mi contenido que no tiene ninguna relación con el actual?

 

La respuesta es un no.

Una arquitectura desacoplada le permitirá adoptar con facilidad una postura totalmente diferente ante su contenido y dirigir una estrategia editorial mucho más transversal y centralizada.

Despliego un servicio de gestión de contenidos, como si se tratara de un PIM o un DAM, que publicaré con unas API y que me permitirá centralizar y capitalizar en torno a una sola base de contenidos... en todos mis puntos de contacto digital.

 

La clave es, hoy, el contenido. Sirve para:

• La imagen de marca
• La visión de la marca
• El control editorial de la marca
• El rendimiento económico de la marca
• La estrategia SEO de la marca
• La experiencia del usuario

 
Prismic como sistema de gestión de contenidos de la marca
WIDE y Zenith han utilizado Prismic, solución SaaS de gestión de contenidos, ideal para establecer esta visión desacoplada.
Prismic solo hace dos cosas, y las hace bien: gestionar su contenido y distribuirlo. Expone un back-office completo, rico y totalmente modulable según sus necesidades. En él, encontrará todas las funcionalidades necesarias para una experiencia de contribución ideal:

• Multilingüe
• Multientorno
• Previsualización
• Despliegue de contenido planificado
• Despliege por lote de contenidos
• Versionado del contenido
• Búsqueda instantánea
• Webhooks
• Estado de los contenidos
• y muchos otros

La otra fuerza de Prismic reside en su modularidad. Puede construir de manera muy intuitiva la estructura de sus contenidos sin tener problemas con la herramienta. 

Modelización de la estructura de los contenidos con Prismic

Su editor nos permite modelizar el enfoque atómico y orientado a los componentes.

Contribución de los componentes desde el back-office Prismic

«Cualquier página del sitio de Zenith puede enriquecerse con contenidos editoriales».

El CMS posicionado de esta manera en nuestro ecosistema nos permite propulsar un contenido rico y distribuirlo con facilidad en nuestro sitio a través de su API JSON o GraphQL. Otra función clave de Prismic, los campos de integración, que establecen un enlace entre contenido editorial y productos.

Al asociar el contenido editorial y económico a través de un conector interno, Zenith puede ofrecer a sus visitantes una experiencia rica en cualquier contenido de su sitio con enorme facilidad.

 

Conectar el contenido al sitio

WIDE se ha esforzado en desarrollar un módulo JavaScript específico para Vue Storefront con el fin de retranscribir este enfoque modulable en el sitio de Zenith.
Cada componente Vue.js es la traducción técnica de un componente CMS de Prismic, atómico y personalizable en su totalidad, funcionando al mismo tiempo de ambos lados, cliente y servidor.

Capitalizar sobre el contenido

El despliegue de Prismic se inscribe en la visión CaaS (el contenido como servicio) que WIDE propugna. Se integra a la perfección en la arquitectura desacoplada del ecosistema de Zenith y se convierte en punto central de la estrategia editorial de la marca.

En el futuro, la solución alimentará todos los puntos de contacto digital de Zenith. Representa una mayor ventaja en la estrategia de control de la marca. Se aplica en cualquier tipo de sitio o aplicación o cualquier presupuesto y representa una ventaja importante en el control de su TCO (coste total de propiedad). 

 

 

El front-end del sitio de Zenith ⭐️

El nuevo sitio de Zenith es un proyecto digital en el que el servicio de comercio electrónico se basa en Magento 2, una solución reconocida en la que WIDE colabora desde hace varios años con Adobe.

La arquitectura desacoplada de Zenith nos ofrece múltiples soluciones de implementación para el bloque front-end del nuevo sitio y deja amplio margen para la innovación. 

Fiel a las expectativas de la marca, a nuestra visión y nuestro dominio en la materia, lo natural es que escogiéramos la solución Vue Storefront.

 

Una PWA orientada al comercio electrónico: Vue Storefront

Vue Storefront es un proyecto de código abierto basado en el marco front-end Vue.js. Expone una PWA (aplicación web progresiva), sin cabeza y agnóstica, capaz de establecer una interfaz con cualquier back-end de comercio electrónico.

Muy popular en la comunidad Magento y Vue.js por su rendimiento, Vue Storefront responde también a las necesidades funcionales relacionadas con las actividades digitales de comercio electrónico de la marca:

• PWA (modo sin conexión, notificaciones push, sincronización en segundo plano, para instalar en el móvil como una aplicación móvil, etc.)
• Cobertura funcional casi completa para Magento2
• Solución orientada al rendimiento
• Renderizado del servidor (SSR) gestionado nativamente
• Enfoque móvil prioritario
• Sin límite en la personalización y el diseño del sitio (interfaz de usuario)

Tras estas simples nociones, se esconde una solución completa que ofrece resultados y calidad en los intercambios de datos entre el back-end de comercio electrónico y los visitantes. La vista Storefront se basa en dos componentes esenciales:

• Una Aplicación PWA, responsable del sitio, su tema, llamadas dinámicas a Magento (sesiones, cestas, almacén,...);
• Una API que sirve de pasarela entre la aplicación, los datos del catálogo de productos (mediante Elasticsearch) y los diferentes servicios que se interconectan.

 

Arquitectura de la vista Storefront

Una vez que se ha desplegado la aplicación, no queda sino dedicarse a la implementación del tema de Zenith y los conectores hacia los servicios implicados en la arquitectura:

• Implementación orientada hacia el componente de diseño del sitio mediante Vue.js, HTML5 y CSS3
• Desarrollo de los módulos hacia los servicios específicos (Prismic, lista de deseos, comprobación externa, localizador de tiendas, ABTasty, Google RecaptchaV3, One Trust, etc.)
• Desarrollo de endpoints para API específicos

Vue Storefront nos ofrece así una respuesta pertinente a las dificultades que afectan a las soluciones front-end. Ya que ofrece al mismo tiempo un renderizado de ambos lados, cliente y servidor (mediante VueSSR), nos permite concentrar nuestros esfuerzos en el rendimiento general del sitio.

 

Rendimiento 🚀

Si pregunta a un desarrollador web qué es un sitio con buen rendimiento, recibirá tantas respuestas como desarrolladores a los que pregunte. El rendimiento de un sitio web no se limita a su calidad técnica.

Por sí mismo, el rendimiento es un todo y debe ser considerado como tal al crearse una plataforma digital. A causa de nuestro dominio en la materia, abordamos este asunto de manera transversal. El rendimiento técnico implica rendimiento SEO, que está íntimamente relacionado con el rendimiento de la accesibilidad y del entorno. Todo ello juega un papel importante en el rendimiento económico del proyecto de Zenith.

Como esta presentación desea ser técnica, nos centraremos en algunos puntos de rendimiento abordados en este proyecto, de manera especial el front-end.

Resultados del análisis Lighthouse en una página de producto de Zenith.

Conceptos clave
La arquitectura aplicada en el proyecto Zenith es desacoplada, basada en un marco front-end Vue.js de alto rendimiento, en el que el tráfico se basa en usuarios conectados.
Una vez que la solución se ha llevado a cabo, esta última nos permitirá trabajar en los aspectos fundamentales del rendimiento:

• Renderizado de las páginas HTML
• Almacenamiento en caché
• Optimización de la experiencia del usuario

 
Dar servicio con rapidez,... con mucha rapidez, a las páginas HTML.
Vue Storefront y el sitio de Zenith se apoyan en una aplicación universal. Se presentan así numerosos conceptos clave en la búsqueda del rendimiento:

• Usted ejecutará el código JavaScript tanto del lado del cliente como del servidor. De esta manera, una parte del trabajo de generación de la página se delega en el back-end de nodo JS y la potencia del terminal del visitante ya no estará involucrada en una gran parte del trabajo de renderizado.
• Vue.js nos permite adoptar una arquitectura de código orientada hacia los componentes, modular y optimizada.
• Webpack (y Yarn) intervienen para optimizar transpilado, HMR, optimización del código generado, separación del código, PostCSS, …
• Una API gateway sirve de capa proxy entre el front-end y el back-end de la arquitectura para no apoyarse en el tiempo de respuesta de las soluciones de comercio electrónico u otras, y reforzando la seguridad.
• Elasticsearch, base de datos NoSQL, se encargan de reenviar la información estática con rapidez (productos, categorías, atributos, comentarios, …).
• Redis para la optimización y el almacenamiento de caché de las páginas en el back-end del servidor Origin.

Estos puntos clave nos permiten construir una aplicación intrínsecamente optimizada, pero el rendimiento no se queda solo en eso.

 

Almacenamiento en caché;
Si puede generar páginas dinámicas con rapidez, es aún mejor no regenerarlas si ya existen: la petición más rápida es la que no hace trabajar a su servidor, se trate de elementos estáticos o de páginas HTML.

El sitio de comercio electrónico de Zenith es internacional y debe ofrecer la misma experiencia de usuario en cualquier rincón del mundo.

 

Y ahí interviene Akamai...
La mayor parte de los sitios web utilizan Akamai (u otras soluciones del mercado) como CDN (red de distribución de contenidos) para almacenamiento de caché de sus ficheros de elementos estáticos (imágenes, vídeos, documentos). Adoptar una política de caché agresiva en estos archivos es una buena práctica.

Si es capaz de acercar al máximo estos elementos estáticos al visitante mediante la red de servidores de la plataforma, ¿por qué no hacer lo mismo con las páginas HTML generadas?

Configurar los comportamientos de Akamai en cada petición de usuario le permitirá acelerar de manera tajante el lapso de tiempo hasta la entrega del primer byte (TTFB) de nuestra aplicación; dará igual la ubicación del visitante (de media, un TTFB 10 veces menor con Akamai activado). Con el almacenamiento en caché de las páginas HTML en el CDN, el servidor Origin ya no se sobrecargará en cada visita y su sitio preservará su velocidad.

Ya solo queda configurar y sincronizar la purga de esta caché en el momento de actualización del contenido (comercio electrónico y editorial) mediante webhooks en Magento2 y Prismic.

Akamai le permitirá acercarse a sus visitantes con el servidor más rápido, en función de la petición http solicitada. También permite gestionar el redireccionamiento HTTP directo a su infraestructura (sin ida y vuelta hacia el servidor Origin) y proporciona toda una paleta de instrucciones para la optimización de los tiempos de renderizado.

Experiencia del usuario
Una vez que el contenido se ha almacenado, la última etapa en la estrategia de optimización del rendimiento reposa en la estrategia de visualización y carga de UI del lado del visitante.
 

Medir los rendimientos...
En esta etapa, nos disponemos a seguir las buenas prácticas tenidas en cuenta en todas las herramientas de referenciación del rendimiento (Lighthouse, PageSpeed, Dareboost, GTMetrix, Webpage Test, …).

En WIDE, la fase de análisis está automatizada con nuestras herramientas de integración continua. Gitlab nos permite crear builds del proyecto de Zenith y arrancar de manera sistemática el análisis de los diferentes entornos desplegados a través de una instancia Sitespeed.io, con la que analizaremos en directo los resultados y corregiremos con rapidez cualquier problema.

 

Ejemplo de relación Sitespeed para Zenith

💡 No se detenga en un único umbral para conocer los puntos de bloqueo. Multiplique las mediciones, en sobremesa y móvil al mismo tiempo, para garantizar la claridad de los resultados.

... y optimizar la experiencia
La construcción del sitio de Zenith en torno a un marco front-end como Vue.js le abre muchas oportunidades de optimización, además de las clásicas, de fragmentos elegidos:

Compresión
Como elemento básico para la optimización, Akamai nos ayuda comprimir los recursos que carga el visitante mediante Gzip. De manera concreta, el recurso llamado se compromete en el servidor, pasa por la red y se descomprime en el cliente, lo que reduce considerablemente la cantidad de datos que se descargan.

Minificación de los archivos CSS y JavaScript
Webpack, el empaquetador de módulos que hemos empleado en el proyecto, nos permite ejecutar, durante la producción del build, 2 plugins en particular: TerserPlugin y Optimize CSS Assets Webpack Plugin. Estos últimos recuperan los recursos CSS y JavaScript que se han generado y realizan una serie de operaciones para reducir la cantidad de código generado:

• Agrupacion de las propiedades CSS
• Eliminación de los espacios inútiles
• Eliminación de los comentarios en el código
• Eliminación de los mensajes de la consola (console.log())

Carga diferida y separación del código de los componentes JavaScript.
Cuanto más crezca su aplicación, mayor será el código generado y mayor impacto tendrá sobre la cantidad de datos que se mueven por la red.

Y aquí entra en juego el concepto de separación de código. Con Webpack y los marcos modernos (Vue.js en este caso) podrá cortar su código JavaScripts en varios «fragmentos» que cargará en función de su necesidad en la página solicitada.

- ¿Necesita cargar el código JavaScript de la página «Store Locator» cuando está en la página de inicio? 
- Claro que no.  😥

Así se reduce de manera tajante la cantidad de código que su sitio requiere para funcionar y cargar sobre la marcha los módulos necesarios para mostrar su contenido, utilizando Vue.js (también funciona con los demás marcos front-end).

Puede gestionarlo en su enrutamiento aplicativo o a nivel de sus componentes:

💡 Utilice Chrome Devtool y su módulo de medición de cobertura de código para comprender y optimizar la manera en que se emplea su código JavaScript y analice sus resultados con el plugin Webpack Bundle Analyzer.

 

Informe de build de proyecto realizado con el plugin Bundle Analyzer

HTTP2, preconexión y precarga de los recursos
Si aplica todas estas recomendaciones, encontrará muchos archivos para cargar. De esta manera, deberán cargarse con rapidez para no penalizar el tiempo de carga medido de su aplicación.

Y aquí aparece HTTP2 para ayudar.
HTTP2 y las instrucciones de preconexión y precarga le permitirán resolver el DNS, establecer las conexiones TCP y terminar la negociación TLS con mayor rapidez en la cascada de carga de su página y sus recursos.

• El atributo preconnect le permitirá indicar al navegador que, si tiene tiempo entre dos cargas prioritarias, estaría bien que cargara el recurso solicitado ya que es posible que se emplee pronto:
  <link rel="preconnect" href="https://example.net/">
• El atributo preload indicará al navegador que debe cargar con prioridad imperativa el recurso:
  <link rel="preload" href="user-later.js" as="script">

 

Estas técnicas de precarga permiten acelerar el tiempo de renderizado de la página y dar fluidez a futuras experiencias de navegación en el sitio de Zenith.

Puesto que el sitio se basa en una aplicación universal, sus reglas de prioridad se emplearon del lado del servidor con Vue SSR y su bucle de renderizado. El concepto es sencillo:

• Intercepto los elementos cargados (fuentes, archivos JavaScript separados, archivos CSS separados, imágenes, etc.)
• Decido precargarlos o no, en función de mi configuración de la aplicación
• Los inyecto en la etiqueta <head/> de mis páginas

Esto es lo que implica:

 

Y esto el resultado:

Imágenes adaptables y carga diferida (imagen y vídeo)
El equipo editorial de su cliente le preguntará:

«Puede entregarme TODOS los tamaños de TODOS los componentes de TODAS las páginas? ».

La respuesta es sencilla:
«No ».

Y la respuesta perfecta:😎 :
«Facilítenos las imágenes en el mayor tamaño posible, nosotros nos ocupamos del resto. ».
 

Con la multiplicación de los terminales (móviles, tablets, sobremesa), las resoluciones, las densidades de píxel, la imagen adaptable... no es posible, es sobrehumano, dar una respuesta correcta.

Pero ahora disponemos de soluciones y es aquí donde entra en juego Akamai Image Manager. Se encarga de optimizar de manera inteligente las imágenes y los vídeos, asociando la calidad, el formato y el tamaño adaptados a cada terminal y navegador.

¿Qué significa esto? Que Akamai es capaz de proporcionar una imagen redimensionada al vuelo, con una resolución precisa y en el mejor formato para su navegador, almacenarla en caché y distribuirla con su CDN,... de manera especial gracias a IMQuery.
Un ejemplo:

• Imaginemos que tenemos la siguiente imagen, que pesa 4Mb porque es de alta resolución https://zenith-watches.com/img/defy.png
• Si necesito mostrarla con una resolución de 800 x 600 píxeles, puedo, con Akamai IMQuery, generarla de esta manera:

La imagen se redimensionará según la necesidad, optimizada en el mejor formato del navegador,... y puedo encadenar las transformaciones.

Una vez que se aplica la función de redimensionado al vuelo de las imágenes, aparecen dos conceptos muy relacionados: imágenes adaptables y carga diferida.

«La imagen de carga más rápida es la que no tiene que cargarse».

De esta manera, JavaScript y HTML, gracias a estos dos conceptos, le permitirán:

• Facilitar al navegador información sobre el tamaño de una imagen (atributo srcset)
• Entregar al navegador información sobre el ancho de la imagen en función del tamaño de la pantalla (atributo sizes)
• Inyectar esta información solo cuando la imagen debe estar visible en la pantalla del visitante (API IntersectionObserver en JavaScript).

 

 

La implementación de un componente Vue.js «LazyImage» nos permite sistematizar este comportamiento en el sitio de Zenith y disminuir aún más el tiempo de carga de las páginas.

Este es un ejemplo de código generado cuando la imagen es visible en la pantalla del visitante:

💡 Para una mejor compatibilidad SEO, no deje el atributo src de sus imágenes vacío, genere una imagen de baja calidad, ultrarrápida en la carga.

💡 Puede aplicar los mismos conceptos a los vídeos (lo que ya hemos hecho); la mecánica es la misma 😃

Hemos visto algunas «técnicas» de optimización de renderizado empleadas en el sitio de Zenith. Intencionadamente, no me he detenido en el conjunto de puntos sobre los que hemos trabajado. Habría podido citar otros en los que hemos prestado o vamos a prestar una atención particular:

• Visualización de las fuentes
• Cambio de diseño
• Carga asíncrona de los scripts externos
• Optimización de los scripts WebGL
• Purga CSS
• Rendimiento ambiental y Tecnologías verdes
• y muchos otros

Me he concentrado en el rendimiento técnico y he presentado algunas nociones importantes que en estos momentos tienen impacto en la calidad de los desarrollos web.

 

El objetivo de la accesibilidad y el rendimiento ambiental de las aplicaciones web son otros ámbitos que en estos tiempos se han convertido en protagonistas de los desarrollos de WIDE. Muy pronto, serán objeto de nuestra atención. 😉

Conclusión...  😓

La arquitectura desacoplada en proyectos de comercio electrónico se ha convertido en un estándar.

Reservada a sitios pequeños en el pasado, es hoy suficientemente madura y robusta como para desplegarse en sistemas de información complejos.

Los editores de soluciones (Adobe, Salesforce, Acquia, Sitecore,...) se han dado cuenta de ello y animan a las marcas a desplegarse de esta manera.

Gracias a su enfoque orientado hacia el servicio, podrá focalizar, como marca, la elección de la solución que más le conviene sin olvidar ningún servicio de su empresa y sin limitarle a una solución todo en uno honerosa y con difícil mantenimiento a lo largo del tiempo.

Como agencia digital mundial, nos permite centrarnos en el rendimiento general de los ecosistemas que desplegamos, tanto desde el punto de vista económico como técnico y nos abre más puertas a la innovación.

El sitio de Zenith es una perfecta ilustración de ello. Lo que WIDE pudo desplegar en estrecha colaboración con la marca es solo una base robusta que nos permitirá, en los años venideros, apoyar a la marca hacia sus objetivos de calidad e innovación. 

 

Para conocer más:

 

• Vue Storefront : https://www.vuestorefront.io/
• Prismic : https://prismic.io
• Precarga de alta prioridad, precarga de baja prioridad y preconexión:  https://blog.dareboost.com/fr/2020/05/preload-prefetch-et-preconnect-resource-hints/
• Carga diferida y separación de código: https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/
• Tecnologías verdes: https://www.greenit.fr/

... y, por supuesto: https://www.wideagency.ch/

🚨 Acceda al sitio de Zenith para encontrar novedades en las semanas venideras.