Todos desean emplear un tema eficiente. En la comparación del rendimiento entre temas populares, Shopify busca suministrar los datos esenciales para que los desarrolladores identifiquen oportunidades de mejora y, al mismo tiempo, acelerar las tiendas en toda la plataforma de Shopify.
En este artículo, te proporcionaremos un enlace al rendimiento de algunos de los temas más destacados en Shopify, evaluados por el equipo de Rendimiento Web de Shopify, junto con más información sobre las métricas que te encantara aprender.
¿Mi tema parece lento? ¿Es eso malo?
En resumen, no necesariamente. El rendimiento final de una tienda está sujeto a diversos factores, tales como:
- El diseño y la disposición de las páginas individuales.
- Personalizaciones realizadas en el código del tema.
- Aplicaciones de terceros integradas en la tienda.
- La versión específica del tema que estás utilizando.
Imagina un tema como un conjunto de ladrillos. Si dos personas recibieran la tarea de construir un edificio con el mismo conjunto de ladrillos, seguramente obtendrían resultados bastante diferentes. Un tema se asemeja a esos ladrillos, y para lograr el mejor rendimiento, es crucial tomar decisiones acertadas durante la construcción.
Aplicando estas consideraciones, podemos tomar nuestra página y este blog como ejemplo, utiliza el tema Dawn y aprueba la evaluación de CWV. Sin embargo, al observar los resultados de Dawn, vemos que el 60% de las tiendas no superan los CWV. Esto indica que el tema subyacente es rápido y listo para usar, pero otros elementos están ocasionando ralentización en muchos sitios. Entender por qué sería el siguiente paso para mejorar los datos subyacentes.
Es vital tener en cuenta que los datos del tema se agregan e incluyen todas las versiones de ese tema. Simplemente actualizar a la última versión de un tema a menudo puede impulsar significativamente el rendimiento web.
✔️La metodología
Hasta ahora, las mejores opciones para evaluar el rendimiento de un tema eran:
- Ejecutar Lighthouse en la versión demo de la tienda.
- Probar la tienda de demostración en una herramienta sintética como WebPageTest.
- Buscar el Informe de experiencia del usuario de Chrome para una tienda que ya utilice el tema.
El problema con las primeras 2 opciones es que las herramientas sintéticas no siempre reflejan la experiencia de los usuarios reales. En cuanto a la opción 3, lleva mucho tiempo y presupone que conoces una tienda que utiliza el tema y que tomaría decisiones de diseño similares a las de la tienda que estás comparando. El rendimiento final de la tienda va más allá del rendimiento básico del tema.
Al emplear datos de usuarios reales en tiendas reales, Shopify pudo observar cómo funcionan los temas en el mundo real cuando se añaden funciones y aplicaciones adicionales.
👉Así es como lo hicieron: agregaron 7 días de datos de usuarios reales en 100 temas principales según la cantidad de tiendas que los tenían instalados. Para cada tienda, midieron la mayor pintura con contenido, el retraso de la primera entrada y el cambio de diseño acumulativo en el percentil 75.
Los resultados indican el porcentaje de tiendas que alcanzan niveles bueno, moderado y necesita mejora, según los estándares de Core Web Vitals de Google.
Shopify Web Performance ha publicado un análisis exhaustivo de cada TEMA de Shopify; 👉aquí puedes ver los resultados en la tabla de datos de rendimiento del tema.
✔️Resultados clave
Pintura con contenido más grande (LCP) - Largest Contentful Paint:
Esta métrica destaca por tener el menor porcentaje de tiendas que superan la evaluación CWV y también tiene el mayor impacto en la conversión.
- El 8% de las tiendas superan el LCP como mínimo.
- El 73% de las tiendas superan el LCP al máximo.
Retraso de la primera entrada (FID) - First Input Delay:
El retraso de la primera entrada nunca ha reflejado bien la capacidad de respuesta de una página. Esta es una de las razones por las que Interaction to Next Paint (INP) reemplazará a FID en 2024.
- El 44% de las tiendas superan FID como mínimo.
- El 95% de las tiendas superan FID al máximo.
Cambio de diseño acumulativo (CLS) - Cumulative Layout Shift:
Hubo una gran variabilidad en el rendimiento de los temas con CLS. No vemos que esta métrica se correlacione tan estrechamente con la conversión como otras métricas. Los problemas de CLS pueden ser fáciles de solucionar y representan una forma sencilla de eliminar la frustración del usuario.
- El 13% de las tiendas superan CLS como mínimo.
- El 87% de las tiendas superan CLS al máximo.
Evaluación general de CWV - Overall CWV Assessment:
Para aprobar la evaluación, una tienda debe aprobar todas las métricas simultáneamente. Aproximadamente 3 de cada 5 tiendas aprobaron la evaluación en el tema de mejor rendimiento. El tema de menor rendimiento solo tuvo aprobación en 1 de cada 30 tiendas.
- El 3% de las tiendas superan los CWV como mínimo.
- El 57% de las tiendas superan los CWV al máximo.
✔️Cómo mejorar el rendimiento del tema
LCP y CLS son las dos métricas que necesitan la mayor mejora. Las tres principales causas de degradación en estas métricas son:
- Carga diferida de tu imagen LCP.
- Se requiere carga asincrónica de CSS para el contenido en la parte superior de la página.
- No reservar espacio para imágenes.
- No reservar espacio para contenido inyectado por aplicaciones o scripts de terceros.
✔️Pasos inmediatos para los comerciantes y Marcas:
Si eres un comerciante leyendo esta publicación, considera los siguientes pasos para mejorar el rendimiento:
- Asegúrate de tener la última versión de tu tema para aprovechar nuevas funciones y optimizaciones.
- Revisa todas las aplicaciones instaladas en tu tienda para confirmar que aún se utilizan y proporcionan valor.
- Audita las personalizaciones que has realizado y asegúrate de que aún sean necesarias. Actualizar al tema más reciente puede significar que algunas funciones sean compatibles de forma nativa.
- Supervisa el rendimiento una vez que hayas terminado. Recomendamos utilizar datos de usuario reales de CrUX.
En resumen 👋
El rendimiento del tema puede depender de diversos factores. La misión de Shopify es crear tantas tiendas como sea posible para mejorar el comercio electrónico para todos. Los temas desempeñan un papel crucial en esta misión.
Los datos de evaluación comparativa de Shopify deberían ayudar a los desarrolladores de temas a comprender dónde podrían estar fallando, para que puedan profundizar y descubrir por qué. Utiliza los consejos aquí para implementar tus mejoras. Asegúrate de actualizar tu tema periódicamente para aprovechar las nuevas funciones y optimizaciones disponibles.