Garantizar tiempos de carga de sub-segundo 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 puede seguir para asegurarse de que su sitio de producción es increíblemente rápido y que dedica la menor cantidad de tiempo a lograrlo.
Primero, hablemos de cómo medimos la velocidad:
Medición del rendimiento
** Utilizamos SpeedCurve (SC) en este caso, pero puedes usar webpagetest o cualquier otro producto
Nos estamos centrando en las métricas LCP para nuestras mediciones. Nuestros objetivos son:
- Página de inicio <1.5s
- Navegación PLP a PDP: 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 de búsqueda orgánica 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 utilizan esqueletos, y el diseño es estable.
- Mensaje “Esperando…” (o similar) en la ventana del navegador (un problema conocido en la página web que usa SC): Inspeccione las imágenes de la cascada para ver si esa es la única causa de degradación en las métricas.
- El interruptor 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 RSF nativos que se construyen teniendo en cuenta las mejores prácticas): Estilos/elementos que hacen que los componentes vuelvan a renderizarse 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)
Navegación PLP a PDP
Navegar desde las páginas PLP (Resultados de búsqueda o Categoría / Marca) a las páginas PDP es el elemento de navegación más importante de la experiencia completa del consumidor. Por cada compra realizada, un usuario promedio navega a 8,8 páginas PDP. Incluso una menor ralentización de 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 PLP perfecta para PDP:
- Usa un esqueleto para la página de arriba del pliegue y asegura 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 almacenar en caché datos genéricos de página y no almacenar en caché puntos de datos específicos del usuario. (Echa un vistazo a nuestra guía sobre el almacenamiento en caché para más detalles)
- Utilice 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 la 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 compra y la colocación de pedidos. 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 almacenar en caché datos genéricos de la página y no almacenar en caché ningún punto de datos específico del usuario.
- Carga perezosa debajo del contenido del pliegue
- Utilice la etiqueta de preconexión
- Optimiza las imágenes
- Retrasa la hidratación hasta que se complete la carga de la página
- Otras mejoras
Carga de página de PDP
Invertir tiempo optimizando la página de inicio y PLP a la navegación PDP no valdría nada si el usuario no tiene una gran experiencia en la página PDP en sí. Asegurar que la información más importante esté disponible para el usuario lo antes posible y retrasar objetos que no son inmediatamente visibles o accionables 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 páginas PDP:
- Almacene en caché 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 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 a petición.
PLP Page Load
- Pre-carga imágenes PDP para resultados por encima del pliegue.
- Contenido de carga perezosa debajo del pliegue
- Reduzca o evite las solicitudes para determinar cambios de página PLP, por ejemplo, cambios de color de fondo u otros elementos visuales.
Algunos indicadores más
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 que lo que es visible. Asegurarnos de que el funcionamiento interno de la plataforma esté optimizado es el siguiente paso que debemos dar. Las siguientes son algunas cosas a comprobar para recuperar ganancias adicionales en el rendimiento:
- TTL: Compruebe el tamaño del paquete usando Analyze=True npm run build
- FCP: Si un cliente elige usar un WebFont, se pueden experimentar caídas de puntuación LH.
- Índice de velocidad : Tener ventanas emergentes en la pantalla reduce el índice de velocidad de la página
- Evite tareas de ejecución largas en el ámbito del módulo, es decir, del lado del cliente.
- Los hooks React son propensos a renderizar innecesariamente. Aunque es poco probable que afecte a las métricas, lo hacen para un sitio web de sensación lenta.
- Utilice los puntajes PSI para comprender el impacto de los cambios de código en lugar de los puntajes 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 LH realistas.
