El e-commerce más rápido de 2024: errores comunes, lo que funciona y las características del ganador

En el anterior blogpost anunciamos el e-commerce más rápido de 2024. Se trata de iWant.cz, a cuyos creadores felicitamos cordialmente, al igual que a los autores de los sitios Hornbach.cz y Altisport.cz, que también subieron al podio.

Pero ¿qué nos dicen los datos y qué pueden aprender de ellos, además de compararse con los mayores (y más rápidos) e-commerces checos? En este texto nos enfocaremos en los errores comunes que los e-commerces cometen repetidamente, recomendaciones de optimización que siempre funcionan y finalmente echaremos un vistazo al ganador del certamen.

Errores comunes de los e-commerces cuando se trata de velocidad#

Cuando observamos los e-commerces menos exitosos en nuestra lista, encontramos errores muy similares a los que vemos en muchos de nuestros clientes al inicio de la colaboración en velocidad web.

1. Implementación incorrecta del lazy loading en imágenes. El lazy loading a menudo está ausente o se aplica erróneamente a todo, incluyendo el elemento principal para la métrica LCP. En general, la gestión de prioridades de carga es frecuentemente deficiente por parte de los desarrolladores.
2. No se mantienen las dimensiones de las imágenes, lo que empeora la métrica CLS. Aunque basta con poco, simplemente agregando los atributos width y height a los elementos <img>.
3. Falta de optimizaciones básicas como la gestión del volumen de datos de imágenes, fuentes web, archivos CSS o JS.
4. Olvidar que la respuesta del servidor es fundamental. Los sitios web en el fondo de la lista tienen la métrica TTFB significativamente peor en promedio que los más rápidos. Por ejemplo, bauhaus.cz muestra un valor del percentil 75 de respuesta del servidor en móvil de 1,84 s, mientras que su competidor Hornbach.cz maneja la respuesta del servidor tres veces más rápido – a 0,58 s.
5. Analítica mal optimizada y exceso de scripts de terceros. Con la llegada de la métrica INP podemos medir las demoras de interacción causadas por la analítica. Todos los e-commerces más rápidos logran mantener el INP en móvil por debajo del valor recomendado de 0,2 s, pero por ejemplo, el sitio Bibloo.cz tiene el percentil 75 de esta métrica cinco veces mayor, es decir, más de un segundo.

En nuestras actividades de divulgación sobre la velocidad web siempre decimos que la optimización de la velocidad no es una lista de verificación para completar ni "un poco de magia" (como podría ser el SEO). La optimización de la velocidad es una disciplina exacta, en la que buscamos el problema y su solución lo más eficaz posible.

Sin embargo, el examen de los e-commerces más rápidos, así como nuestra propia experiencia en PageSpeed.ONE, muestran que hay certezas en las que siempre se puede confiar y que funcionarán muy bien.

¿Qué casi siempre funciona al optimizar la velocidad de un e-commerce?#

1. Métrica LCP: Coloca imágenes en formato WebP en todas partes, ya que son casi siempre más eficientes en términos de datos que JPG y sustituyen incluso a PNG. Los más valientes pueden optar por el formato AVIF.
2. Métrica LCP: loading=lazy, es decir, lazy loading de imágenes, aplícalo a todos los <img> fuera de la primera pantalla.
3. Métrica LCP: usa <link preload> para precargar las fuentes web que se utilizan en el primer viewport del usuario.
4. Métrica CLS: Siempre añade los atributos width y height a todas las imágenes de contenido, es decir, elementos <img>.
5. Métrica CLS: utiliza el descriptor size-adjust en tipografía para igualar el tamaño de la fuente del sistema con la fuente web.
6. Métrica INP: responde en la interfaz inmediatamente, da retroalimentación instantánea al usuario.
7. Considera optimizar para tipos de navegación rápidos como son las Reglas de Especulación, back/forward cache.
8. La velocidad siempre empeora con el tiempo. Por eso, el monitoreo de la velocidad es fundamental.

Análisis del ganador iWant.cz#

¿Qué se ha resuelto de manera inspiradora en iWant.cz desde el punto de vista de la optimización de velocidad web?

Tomemos algunos consejos:

1. Los servidores aquí funcionan a pleno rendimiento. El valor de la métrica TTFB en móvil para todo el dominio iWant.cz es de 0,37 s, lo cual es un resultado fabuloso, la mitad del valor recomendado por Google. Sólo Zalando.com es más rápido (0,24 s), lo cual es un valor que realmente nos deja boquiabiertos para un proyecto internacional tan grande.
2. Buena gestión de prioridades de carga. Observamos un lazy loading ajustado para imágenes menos importantes (loading=lazy) y, por el contrario, se acelera la carga de elementos importantes mediante <link preload>.
3. Imágenes optimizadas en formato WebP. Dada la naturaleza del sitio y los productos presentados, ya no es muy posible reducir el volumen de datos, por ejemplo, disminuyendo la calidad. El único espacio para optimización adicional sería el cambio al formato AVIF.
4. Trabajo muy eficiente con CSS y JavaScript. Los estilos propios en la página tipo importante de detalle de producto sólo tienen alrededor de 15 kB (!), y los archivos de JavaScript algo más de 100 kB. En estos tiempos de descarga de archivos de megabytes que el usuario no necesita en ese momento, esto es todo un fenómeno.

Nos complace enormemente haber tenido el honor de ayudar al equipo de Smarty.cz con las optimizaciones de velocidad. Sin embargo, es importante decir que, por nuestra parte, recientemente sólo hemos realizado pequeñas correcciones. El equipo web ya está muy capacitado y puede seguir mejorando la velocidad por sí mismo.

Eso es todo para el estudio de este año sobre los e-commerces checos más rápidos. Esperamos con interés los resultados de los próximos años y les deseamos, tanto a ustedes como desarrolladores web como a los usuarios, sitios rápidos.

---

¿Necesitas ayuda con la velocidad de tu e-commerce o monitoreo? Contáctanos.

Etiquetas:PageSpeed.ONEWeb Performance