Home Cómo hacerlo Asegure la carga de subsegundos para su sitio de comercio electrónico
Applications

Asegure la carga de subsegundos para su sitio de comercio electrónico

About The Author

Outline

Asegurar tiempos de carga de subsegundos para su sitio de comercio electrónico es un trabajo duro. En Layer0, hemos intentado que sea un proceso mucho más simple, y Layer0 está aquí para ayudarte a lograr este hito. Lo que hemos hecho aquí es crear una lista de verificación que pueda seguir para asegurarse de que su sitio de producción sea increíblemente rápido y que pase la menor cantidad de tiempo lográndolo.

Primero, hablemos de cómo medimos la velocidad:

Medición del rendimiento

** Utilizamos SpeedCurve (SC) en este caso, pero puede usar WebPageTest o cualquier otro producto
Nos estamos centrando en las métricas de LCP para nuestras mediciones. Nuestros objetivos son:

  • Página de inicio < 1.5s
  • PLP a PDP Navegación: 0.5s

También es importante tener en cuenta los siguientes 3 casos, ya que afecta la experiencia del consumidor cuando (A) ir directamente a PLP/PDP como resultado del tráfico orgánico de búsqueda y (b) al navegar a las páginas de carrito / pago – crucial para nuestros clientes desde una perspectiva de negocio:

  • PLP como landing page
  • PDP como landing page
  • PWA -> origen/legado (por ejemplo, al carrito/checkout)

Comencemos con algunas comprobaciones básicas que podrían ayudarnos a obtener algunas ganancias de velocidad importantes

  • Asegúrese de que se utilicen esqueletos y que el diseño sea estable.
  • ‘Esperando…’ Mensaje (o similar) en la ventana del navegador (un problema conocido en WebPageTest que usa SC): Inspeccione las imágenes de cascada para ver si esa es la única causa de degradación en las métricas.
  • El cambio de imagen de baja resolución a imagen de alta resolución también podría causar degradación en las métricas en SC: Inspeccione las imágenes de cascada para ver si esa es la única causa.
  • Artefactos de componentes personalizados (en comparación con los componentes nativos de RSF que se construyen teniendo en cuenta las mejores prácticas): Estilos/elementos que hacen que los componentes se rendericen excesivamente. Una vez más, inspeccione las imágenes de la cascada para ver si hay artefactos visibles (por ejemplo, imagen de baja resolución -> carrusel de imagen en la transición PLP->PDP)

PLP a navegación PDP

Navegar desde las páginas PLP (Resultados de búsqueda o Páginas de categoría/marca) a las páginas PDP es el elemento de navegación más importante del recorrido completo del consumidor. Por cada compra realizada, un usuario promedio navega a 8,8 páginas PDP. Incluso una menor desaceleración de la página en tan alta frecuencia puede tener un gran impacto perjudicial en la experiencia del usuario. Aquí hay algunas cosas que puede seguir para garantizar una experiencia de usuario perfecta de PLP a PDP:

  • Utilice un esqueleto para la página de arriba del pliegue y asegure la estabilidad del diseño
  • Asegúrese de que el contenido encima del pliegue coincida con la altura de la pantalla del dispositivo del usuario.
  • Asegúrese de que el almacenamiento en caché esté configurado adecuadamente. Esto significa el almacenamiento en caché de datos genéricos de página y no el almacenamiento en caché de puntos de datos específicos del usuario. (Echa un vistazo a nuestra guía sobre el almacenamiento en caché para más detalles)
  • Use Prefetching (Consulte nuestra guía sobre Prefetching para más detalles)
  • Utilice la misma instancia de miniaturas en todas partes para evitar parpadear con el componente ForwardThumbnail
  • Pase tanta información de PLP a PDP en los accesorios de página para mostrar esa información en PDP

Home Page Load

Home Page suele ser la primera interacción que un usuario tiene con el sitio web. Garantizar un buen comienzo del viaje es clave para proporcionar un flujo de usuario feliz a través de la salida y la colocación del pedido. Las siguientes son algunas de las cosas que puede seguir para garantizar una gran experiencia en la página de inicio:

  • Asegúrese de que el almacenamiento en caché esté configurado adecuadamente. Esto significa el almacenamiento en caché de datos genéricos de página y no el almacenamiento en caché de puntos de datos específicos del usuario.
  • Carga perezosa debajo del contenido del pliegue
  • Utilice la etiqueta preconnect
  • Optimiza las imágenes
  • Retarde la hidratación hasta que se complete la carga de la página
  • Otras mejoras

PDP Carga de página

Gastar tiempo optimizando la página principal y PLP a la navegación PDP no valdría la pena si el usuario no tiene una gran experiencia en la página PDP en sí. Garantizar que la información más importante esté disponible para el usuario lo antes posible y retrasar objetos que no son visibles o procesables inmediatamente es clave para optimizar las cargas de página PDP. A continuación se presentan algunas de las cosas a tener en cuenta al optimizar las páginas PDP:

  • Almacenar en caché los activos y datos genéricos, incluidas las respuestas de API, para garantizar la recuperación inmediata de datos y reducir los cuellos de botella en los sistemas de back-end.
  • Contenido de carga perezosa debajo del pliegue
  • Utilice una primera imagen optimizada para reducir los tiempos de carga.
  • Utilice miniaturas separadas e imágenes de pellizco y zoom, y solo cargue imágenes bajo petición.

PLP Carga de página

  • Precarga imágenes PDP para resultados por encima del pliegue.
  • Contenido de carga perezosa debajo del pliegue
  • Reduzca o evite las solicitudes para determinar los cambios de página PLP, por ejemplo, los cambios de color de fondo u otros elementos visuales.

Algunos más punteros

Los métodos mencionados anteriormente cubren la mayoría de las cosas con las que un usuario interactúa a través del viaje. Pero hay más en una plataforma de lo que es visible. Asegurarnos de que el funcionamiento interno de la plataforma esté optimizado es el siguiente paso que debemos dar. A continuación se presentan algunas cosas para comprobar para recuperar ganancias adicionales en el rendimiento:

  • TTL: Comprobar el tamaño del paquete usando Analyze=True npm run build
  • FCP: Si un cliente elige usar una WebFont, se pueden experimentar caídas de puntuación de LH.
  • Índice de velocidad: Tener ventanas emergentes en la pantalla reduce el índice de velocidad de la página
  • Evite las tareas de ejecución largas en el ámbito del módulo, es decir, del lado del cliente.
  • Los ganchos React son propensos a una renderización innecesaria. Aunque es poco probable que afecten a las métricas, hacen que sea un sitio web lento.
  • Utilice las puntuaciones PSI para comprender el impacto de los cambios de código en lugar de las puntuaciones LH de la máquina local y/o los resultados de SpeedCurve. Utilice el modo 4G en la construcción de producción para obtener puntuaciones de LH realistas.