Rendimiento web

Supervise y mejore las Core Web Vitals de su tienda Align con los informes de rendimiento web de Shopify.

Toda la documentación de primeros pasos Documentación de referencia

Enlaces destacados

Videos útiles

Vídeo de Shopify sobre rendimiento web

Rendimiento web de la tienda online

El panel Web Performance de Shopify mide la experiencia de los visitantes en su tienda online Align, incluida la velocidad de carga, la capacidad de respuesta a las interacciones y la estabilidad visual. Úselo para comprender el recorrido del cliente desde la primera carga de la página hasta los movimientos inesperados causados por contenido como las ventanas emergentes.

Estas mediciones le ayudan a priorizar mejoras que favorezcan una experiencia de compra más fluida, la conversión y la visibilidad. Company XYZ puede ayudarle con preguntas específicas sobre Align; use los informes de Shopify para determinar si debe investigar una personalización del tema, una aplicación o el contenido de la tienda.

Cómo se mide el rendimiento web

El rendimiento web se mide mediante métricas clave conocidas como Core Web Vitals.

Métrica	Qué mide	Buen resultado
Largest Contentful Paint (LCP)	Velocidad de carga, en función de la rapidez con la que se hace visible el elemento más grande o el contenido principal	El contenido principal se carga en un plazo de 2,5 segundos desde el inicio de la carga de la página
Interaction to Next Paint (INP)	Capacidad de respuesta, en función del tiempo que tarda la página en proporcionar una respuesta visual tras una interacción, como seleccionar un enlace o un botón	Menos de 200 milisegundos
Cumulative Layout Shift (CLS)	Estabilidad visual, en función de cuánto se desplaza inesperadamente el contenido durante la carga	Menos de 0,1

Google también evalúa la compatibilidad con dispositivos móviles, la navegación segura, la seguridad HTTPS y la ausencia de intersticiales intrusivos. Los intersticiales intrusivos impiden ver todo el contenido, como sucede con las ventanas emergentes promocionales o las solicitudes de verificación de edad. En conjunto, estos factores ayudan a evaluar el rendimiento y la experiencia de usuario de una página.

Por qué es importante el rendimiento web

El rendimiento de su tienda puede afectar a la experiencia del cliente, la tasa de conversión y la visibilidad.

Experiencia y conversión

Una tienda que carga rápidamente y ofrece interacciones fluidas crea una mejor experiencia en distintos dispositivos y velocidades de conexión. Cuando un sitio es lento o difícil de recorrer, es más probable que los visitantes lo abandonen antes de comprar algo

Mejorar el rendimiento web puede facilitar las compras y favorecer unas tasas de conversión más altas.

Visibilidad

Los motores de búsqueda como Google utilizan la velocidad de la página como factor de posicionamiento. Las páginas con malos resultados en las Core Web Vitals podrían aparecer en posiciones inferiores, aunque la tienda esté optimizada para los motores de búsqueda en otros aspectos.

Mejorar el rendimiento puede aumentar las probabilidades de que su tienda obtenga una posición superior y una mayor visibilidad en las búsquedas.

Equilibrar las funciones y el rendimiento de la tienda

Su tienda Align puede incluir personalizaciones del tema, aplicaciones, imágenes, vídeos, carruseles, feeds sociales y analíticas. Estas funciones pueden mejorar la experiencia del visitante y ampliar las posibilidades de su tienda, pero cada función adicional puede afectar a las Core Web Vitals.

Algunas funciones ralentizan una página o provocan comportamientos inesperados. Antes de añadir o conservar una función, compare el beneficio que aporta al cliente con su efecto sobre el rendimiento.

Hágase estas preguntas:

¿Qué ayuda a los clientes a decidirse a comprar? Considere si los clientes se beneficiarían más de una página de inicio sencilla con enlaces a páginas de producto detalladas o de una página de inicio con más funciones que les permita ver y comprar productos rápidamente.
¿Qué debe aparecer cerca de la parte superior de la página? La identidad de marca, las imágenes destacadas y el carrito de compra pueden afectar al rendimiento, pero también pueden favorecer la conversión.
¿Qué puede cargarse después de que los clientes se desplacen? Las analíticas y las reseñas de productos no tienen que cargarse de inmediato cuando llega un visitante. Consulte al desarrollador del tema o de la aplicación si necesita confirmar si una función se carga inmediatamente.

Ver los datos de rendimiento web

Para consultar los informes de rendimiento web, necesita el permiso de personal Informes. Para rellenar el panel con métricas de usuarios reales (RUM), elimine la protección con contraseña de su tienda online

Puede abrir los informes de rendimiento web a lo largo del tiempo desde el resumen de métricas de rendimiento de la página Themes. También puede encontrar todos los informes de rendimiento web en la lista Reports del panel de control de Shopify.

Ver el resumen de métricas de rendimiento

El resumen de métricas de rendimiento de la página Themes ofrece una vista rápida de la evolución de sus tres Core Web Vitals. Obtenga más información sobre el resumen de métricas de rendimiento

Desde el panel de control de Shopify, vaya a Online Store > Themes
Opcional: use el selector de fecha para mostrar Today, Last 7 days o Last 30 days.
Opcional: seleccione una métrica del resumen para abrir su informe.
- Seleccione LCP P75 (ms) para consultar el informe Largest Contentful Paint: A lo largo del tiempo
- Seleccione INP P75 (ms) para consultar el informe Interaction to Next Paint: A lo largo del tiempo
- Seleccione Cumulative Layout Shift para consultar el informe Cumulative Layout Shift: A lo largo del tiempo
- Seleccione Sessions by Device Type para consultar el informe de sesiones por tipo de dispositivo

Ver los informes de rendimiento web

Hay varios informes de rendimiento web disponibles en la lista Reports. Use el panel de configuración o el editor de consultas de ShopifyQL para adaptar un informe a los datos que necesita. Obtenga más información sobre cómo usar los informes de Shopify

Desde el panel de control de Shopify, vaya a Analytics > Reports
Busque el informe que desee.
- Busque : para mostrar todos los informes de rendimiento web.
- Busque contentful para ver los informes de Largest Contentful Paint.
- Busque next para ver los informes de Interaction to Next Paint.
- Busque cumulative para ver los informes de Cumulative Layout Shift.
Seleccione el nombre del informe para abrirlo.

Comprender el resumen de métricas de rendimiento

El resumen de métricas de rendimiento web utiliza datos de usuarios reales de los últimos 30 días para evaluar su tienda según las tres Core Web Vitals. Cada métrica recibe una clasificación Buena, Necesita mejoras o Deficiente basada en la experiencia del 75 % de usuarios con mejores resultados.

El resumen incluye:

Largest Contentful Paint (LCP), que refleja la velocidad de carga y la rapidez con la que aparece el elemento visible más grande.
Interaction to Next Paint (INP), que refleja la capacidad de respuesta y el tiempo que transcurre hasta que el navegador muestra el siguiente fotograma o cambio visible después de una interacción, como seleccionar un enlace o un botón.
Cumulative Layout Shift (CLS), que refleja cuánto se desplaza inesperadamente el contenido mientras se carga la página o se navega por ella.
Sesiones de visitantes online por tipo de dispositivo.

Core Web Vital	Clasificación	Métrica objetivo	Qué significa
Largest Contentful Paint (LCP)	Buena	Menor o igual que 2500 ms	La mayoría de los usuarios experimenta una carga rápida de la página
	Necesita mejoras	Mayor que 2500 ms y menor que 4000 ms	Algunos usuarios experimentan una carga rápida, pero hay margen de mejora
	Deficiente	Mayor que 4000 ms	La mayoría de los usuarios experimenta una carga lenta de la página, por lo que debe mejorarse
Interaction to Next Paint (INP)	Buena	Menor o igual que 200 ms	La mayoría de los usuarios experimenta una buena capacidad de respuesta de la página
	Necesita mejoras	Mayor que 200 ms y menor que 500 ms	Algunos usuarios experimentan una buena capacidad de respuesta, pero hay margen de mejora
	Deficiente	Mayor que 500 ms	La mayoría de los usuarios experimenta una respuesta lenta y frustrante, por lo que debe mejorarse
Cumulative Layout Shift (CLS)	Buena	Menor o igual que 0,1	La mayoría de los usuarios experimenta un diseño estable mientras se carga la página
	Necesita mejoras	Mayor que 0,1 y menor que 0,25	Algunos usuarios experimentan un diseño estable, pero hay margen de mejora
	Deficiente	Mayor o igual que 0,25	La mayoría de los usuarios experimenta un diseño inestable, lo que puede resultar molesto y debe mejorarse

Cuando una métrica es Necesita mejoras o Deficiente, use los informes de Web Performance para investigar las causas probables y decidir qué debe mejorar.

Usar los informes de rendimiento web

Cuando el resumen de métricas de rendimiento tenga datos suficientes para puntuar las Core Web Vitals, use los informes para delimitar las páginas y los cambios que podrían estar afectando a sus resultados. Esto le permite tomar decisiones mejor fundamentadas sobre qué debe optimizar.

El dispositivo, la red y la ubicación del cliente están fuera de su control. Los visitantes utilizan distintos dispositivos y conexiones a Internet en todo el mundo, por lo que determinadas fechas o páginas pueden obtener resultados moderados o deficientes aunque la métrica general sea buena. Céntrese en el resultado general y no en valores atípicos aislados.

Revisar el rendimiento a lo largo del tiempo

Use estos informes para ver cómo cambia cada Core Web Vital con el tiempo:

De forma predeterminada, estos informes muestran el percentil 75 de la Core Web Vital correspondiente en milisegundos. Use el panel de configuración para personalizar un informe y ajuste Dimensions y Filters, como el intervalo de tiempo, la agrupación de fechas y el tipo de dispositivo. Obtenga más información sobre cómo personalizar sus informes

El gráfico de líneas muestra cómo los cambios, como la instalación de aplicaciones, las actualizaciones del tema Align y el código nuevo, pueden haber afectado a una Core Web Vital a lo largo del tiempo. Incluye:

Una puntuación de Summary del rendimiento web para el intervalo de fechas seleccionado.
Anotaciones verticales numeradas de eventos sobre las que puede colocar el cursor para ver los cambios de la tienda que podrían afectar al rendimiento.
Líneas horizontales de umbral que muestran los límites entre los resultados Buena, Necesita mejoras y Deficiente.

La columna de la métrica de distribución de la tabla de datos incluye un gráfico de barras que muestra las visitas a páginas de cada categoría: buenas (verde), moderadas (amarillo) y deficientes (rojo).

Revisar el rendimiento por URL de página

Use estos informes para encontrar URL concretas que podrían requerir atención:

De forma predeterminada, estos informes muestran el percentil 75 de la Core Web Vital correspondiente en milisegundos. Use el panel de configuración, Dimensions y Filters para ajustar el intervalo de tiempo, la agrupación de fechas, el tipo de dispositivo y otros detalles. Consulte cómo personalizar sus informes

Los informes por URL de página no incluyen una visualización gráfica. Solo muestran la tabla de datos, con Page path como dimensión principal predeterminada. El gráfico de barras de la métrica de distribución muestra las visitas a páginas que son buenas (verde), moderadas (amarillo) o deficientes (rojo).

Revisar el rendimiento por tipo de página

Use estos informes para comprobar si una categoría de páginas contribuye a un problema de rendimiento:

De forma predeterminada, estos informes muestran el percentil 75 de la Core Web Vital correspondiente en milisegundos. Personalícelos con el panel de configuración, Dimensions y Filters, como el intervalo de tiempo, la agrupación de fechas y el tipo de dispositivo. Obtenga más información sobre cómo personalizar sus informes

Los informes por tipo de página no incluyen una visualización gráfica. Muestran la tabla de datos, con Page type como dimensión principal predeterminada, y una barra de distribución para las visitas a páginas buenas (verde), moderadas (amarillo) y deficientes (rojo).

Investigar un problema

Revise el resumen de métricas de rendimiento para identificar la Core Web Vital que requiere atención.
Para esa métrica, use las tres vistas de informes para delimitar el problema.
- Use Over Time para identificar cuándo cambió una puntuación.
- Use Page Type para comprobar si se ven afectadas determinadas plantillas de página
- Use Page URL para identificar las páginas concretas afectadas.
Compare el momento con los cambios realizados en su tienda y, a continuación, use las páginas y los elementos identificados para realizar una mejora específica.
Para obtener instrucciones detalladas de mejora, consulte Mejorar el rendimiento de su tienda online

Preguntas frecuentes

¿Por qué se eliminó la puntuación de velocidad de Google Lighthouse?

Google Lighthouse utiliza entornos simulados para calcular las puntuaciones de velocidad. Resulta útil para obtener una instantánea rápida, pero no representa las experiencias de usuarios reales. Google ahora da prioridad a las Core Web Vitals para el posicionamiento SEO; obtenga más información de Google

¿Por qué todavía no tengo puntuaciones?

Su tienda está protegida con contraseña. Una tienda protegida con contraseña no recibe el tráfico de usuarios reales necesario para generar las Core Web Vitals. Elimine la página de contraseña para permitir que los usuarios visiten el sitio.
Su tienda todavía no tiene tráfico. Sin visitas a páginas, no existen métricas de usuarios reales que puedan mostrarse.

¿Por qué tengo tráfico, pero no puntuaciones de Core Web Vitals?

Las Core Web Vitals son un producto de Google y actualmente solo están disponibles en navegadores basados en Chromium. Los navegadores modernos como Safari y Safari iOS utilizan tecnologías similares, por lo que las métricas siguen representando con precisión la experiencia de los usuarios en su sitio web.

¿Por qué tengo puntuaciones para algunas métricas, pero no para otras?

Cada métrica mide una parte diferente de la experiencia y depende de distintas actividades de los visitantes. Por ejemplo, Largest Contentful Paint mide la carga de la página, mientras que Interaction to Next Paint mide la rapidez con la que la página responde visualmente después de una interacción. Si los visitantes no interactúan con la página, es posible que la métrica INP no reciba una puntuación.

¿Por qué cambió una puntuación?

Las puntuaciones pueden cambiar debido al volumen de tráfico o a las actualizaciones de la tienda. Si el poco tráfico provoca grandes fluctuaciones, pruebe un filtro semanal o mensual.

Las puntuaciones también pueden cambiar después de importar productos, crear colecciones, cambiar Align, personalizar su código o añadir una aplicación. Infórmese sobre los factores que pueden afectar al rendimiento de su tienda online

¿Cómo puedo mejorar mi puntuación o clasificación?

Consulte Mejorar el rendimiento de su tienda online para obtener instrucciones de mejora.

¿Por qué las puntuaciones del panel difieren de las de otras herramientas?

El panel Web Performance puede diferir de otras herramientas por estos motivos:

Zona horaria. Los datos del panel utilizan el estándar UTC, que puede ser distinto de la zona horaria de otra herramienta.
Recopilación de datos. El panel recopila un conjunto de datos más amplio de navegadores Chromium, incluidos Chrome, Opera, Edge y Samsung Internet, además de Firefox. Herramientas como PageSpeed Insights de Google utilizan el informe CrUX para los navegadores Chrome cuyos usuarios han aceptado participar. Obtenga más información sobre los datos de CrUX
Orientación sobre rendimiento. Revise Mejorar el rendimiento de su tienda online antes de comparar resultados o planificar cambios.

Mejorar el rendimiento de la tienda online

Muchos factores afectan al rendimiento de la tienda online. Algunos están bajo su control, mientras que otros dependen de sus clientes o de la infraestructura. Empiece por consultar su informe de Web Performance para comprender los resultados actuales.

Factores que no puede controlar

Dispositivo, red y ubicación del cliente

Los clientes acceden desde distintas ubicaciones, dispositivos y conexiones a Internet. Como resultado, la misma tienda puede cargarse más rápido o más despacio para distintos visitantes.

Cuando un cliente indique que la tienda funciona lentamente, pídale que confirme lo siguiente:

Su navegador está actualizado.
Ha borrado recientemente la caché del navegador.
Su proveedor de servicios de Internet no está experimentando una interrupción ni una degradación del servicio.

Infraestructura de Shopify

Shopify aloja las tiendas online en servidores globales rápidos sin limitar el ancho de banda de la tienda. Compruebe el estado de su tienda Shopify mediante Shopify Status

Las mejoras continuas de la infraestructura y el código pueden reflejarse en las métricas de rendimiento. Los siguientes servicios y funciones también pueden afectar a la velocidad.

Red de distribución de contenido (CDN)

Una CDN, o red de distribución de contenido, almacena imágenes y otros archivos, incluido el contenido subido en Content > Files. Shopify proporciona una CDN global gestionada por Cloudflare para ayudar a que las tiendas se carguen rápidamente en todo el mundo.

Compruebe la disponibilidad de la CDN en la página de estado de Cloudflare

Caché local del navegador

Su tienda guarda temporalmente algunos elementos en el almacenamiento local del navegador de un cliente. En una visita posterior, el navegador puede cargar los recursos almacenados en caché en lugar de realizar otra solicitud al servidor.

Shopify establece en un año el periodo de almacenamiento en caché de los recursos de la tienda para cada archivo. Los recursos que pueden almacenarse en caché incluyen imágenes, archivos PDF, archivos JS y archivos CSS.

Caché de páginas del servidor

Las páginas también se almacenan en caché en el servidor. La primera carga de la página puede ser más lenta, mientras que las posteriores pueden ser más rápidas porque los visitantes reciben una copia almacenada en caché.

Recursos en `content_for_header`

El objeto de Liquid content_for_header añade recursos utilizados por diversas funciones de la tienda online, incluidas las analíticas de rendimiento y funciones opcionales como los botones de pago dinámico. La carga de este objeto y de sus recursos relacionados afecta a la velocidad de la tienda, y Shopify sigue optimizando la etiqueta y sus recursos.

Factores que puede controlar

Aplicaciones

Las aplicaciones que cambian la funcionalidad o la apariencia de su tienda pueden añadir código a Align para poder ejecutarse. Eliminar, reordenar o desactivar funciones innecesarias de las aplicaciones puede mejorar el rendimiento.

Si una aplicación podría estar ralentizando su tienda:

Desactive las funciones de aplicaciones que no utiliza o elimine la aplicación si ya no la necesita. Tenga en cuenta el equilibrio entre las funciones y la velocidad de la tienda online
Al eliminar una aplicación, considere también eliminar el código añadido durante la instalación. La mayoría de las aplicaciones eliminan su propio código automáticamente, pero confírmelo con el desarrollador de la aplicación. Algunas aplicaciones identifican su código con etiquetas {% comment %} que incluyen el nombre de la aplicación. Eliminar el código de aplicaciones que no se utiliza evita ejecutar código de funciones que ya no usa y facilita el mantenimiento del tema.
Consulte al desarrollador de la aplicación para obtener orientación.

Tema Align y personalizaciones

Align utiliza Liquid, HTML, CSS y JavaScript. Las personalizaciones pueden aumentar el tamaño de los archivos y afectar al rendimiento web.

Si Align o una personalización pueden estar contribuyendo a un rendimiento lento:

Desactive las funciones del tema que no utiliza. Tenga en cuenta el equilibrio entre las funciones y la velocidad de la tienda online
Considere utilizar una fuente del sistema
Para una pregunta específica sobre Align, consulte la documentación de Company XYZ o póngase en contacto con el servicio de asistencia de Company XYZ.

Funciones del tema o de las aplicaciones

Las funciones activadas pueden afectar al rendimiento. Por ejemplo, una ventana emergente de vista rápida podría precargar información de todos los productos de una página de colección. Cargar datos que los clientes no utilizan puede ralentizar la página sin aportar valor.

Desactive las funciones que no necesite. Tenga en cuenta el equilibrio entre las funciones y el rendimiento de la tienda online
Pregunte a los desarrolladores del tema y de las aplicaciones si una función precarga datos.

Código Liquid complejo o ineficiente

Se puede editar casi todo el código Liquid utilizado para renderizar una tienda, pero las operaciones complejas repetidas pueden aumentar el tiempo de renderizado de Liquid y afectar al rendimiento general. Por ejemplo, ordene los productos de una colección por precio antes de recorrerlos en un bucle, en lugar de ordenarlos dentro del bucle. El orden no cambia para cada producto, por lo que recalcularlo repetidamente añade tiempo de procesamiento.

Si le preocupa que el código no esté optimizado:

Ejecute Shopify Theme Inspector for Chrome para identificar las líneas de código que ralentizan las páginas de la tienda.
Contrate a un Shopify Partner para identificar código ineficiente o innecesario.

Imágenes y vídeos

Las imágenes demasiado grandes y las que permanecen ocultas pueden retrasar contenido más importante de la página. Cuando los clientes tienen que esperar a que se carguen imágenes grandes, la tienda puede parecer lenta.

Shopify incluye medidas de protección que ayudan a limitar este efecto:

Las páginas de colección no pueden tener más de 50 productos y las páginas de inicio no pueden tener más de 25 secciones.
Muchos temas aplazan la carga de las imágenes que no aparecen en pantalla en ese momento.
Muchos temas cargan un tamaño de imagen basado en el tamaño de la pantalla donde aparece.

Estas medidas de protección no evitan por completo que las imágenes y los vídeos afecten al rendimiento. Si los elementos multimedia podrían estar ralentizando su tienda:

Consulte la guía de optimización de imágenes
Limite las presentaciones de imágenes destacadas a dos o tres diapositivas, o use una sola imagen destacada.
Pregunte al desarrollador del tema cuál es la mejor forma de usar imágenes en su tema.

Fuentes

Las fuentes afectan al rendimiento porque cualquier fuente que no esté ya disponible en el dispositivo del visitante debe descargarse antes de que el navegador pueda renderizar texto con ella. Las fuentes personalizadas añaden archivos a la página, y los archivos grandes o sin optimizar aumentan la cantidad de datos que cada visitante debe descargar.

Use las fuentes personalizadas con cuidado. Siempre que sea posible, elija archivos de fuentes modernos y optimizados, y evite pesos, estilos y conjuntos de caracteres innecesarios. Las fuentes de la biblioteca propia de Shopify ya están optimizadas para su uso con temas de Shopify, pero aun así es recomendable mantener bajo el número de familias tipográficas.

Como pauta general, no use más de dos familias tipográficas personalizadas por tienda, por ejemplo, una para los encabezados y otra para el texto principal. Un mayor número de familias tipográficas implica más archivos que descargar, lo que puede ralentizar la carga, especialmente en dispositivos móviles y conexiones más lentas.

Notas de uso

Empiece por la tendencia general. Dé prioridad a una Core Web Vital cuando la clasificación de su resumen sea sistemáticamente Necesita mejoras o Deficiente, en lugar de reaccionar ante una sola página o fecha con malos resultados.
Investigue en orden. Use los informes a lo largo del tiempo para averiguar cuándo se produjo un cambio y, después, los informes por tipo de página y por URL de página para localizar las plantillas y páginas afectadas.
Compare los cambios con el valor para el cliente. Mantenga las funciones que ayudan a los compradores a comprar, pero desactive o aplace las que aportan poco valor y cargan datos innecesarios.
Tenga en cuenta el volumen de tráfico. Use filtros semanales o mensuales cuando el poco tráfico provoque fluctuaciones pronunciadas en los datos diarios.
Realice cambios específicos. Siempre que sea posible, cambie una sola causa probable cada vez y deje que se acumulen suficientes datos de usuarios reales antes de evaluar el resultado.