Cómo optimizar Core Web Vitals en Shopify

Hay mucha información en línea sobre cómo medir Core Web Vitals y si su sitio tiene una puntuación buena o mala. Pero hay muy pocos consejos prácticos sobre lo que debe hacer para realizar mejoras, específicamente en Shopify.

En este artículo, veremos cómo puede mejorar exactamente su puntaje Core Web Vitals en su tienda Shopify. Hemos intentado que muchas de estas recomendaciones sean factibles sin un desarrollador, pero algunas requieren una implementación técnica experta.

Desglosaremos cada métrica fundamental de la web a su vez, explicaremos qué factores afectan su rendimiento y luego te mostraremos cómo mejorar cada métrica de CWV en cualquier tienda de Shopify.

Haga clic en los encabezados a continuación para ir directamente a esa sección:

• Cómo se calculan los Core Web Vitals en Shopify
• Cómo mejorar LCP en Shopify
• Cómo mejorar CLS en Shopify
• Cómo mejorar FID en Shopify
• Aplicaciones de Shopify Core Web Vitals

¿Qué son los principales web vitals?

Recapitulemos muy brevemente qué son los Core Web Vitals.

Core Web Vitals es un conjunto de métricas que utiliza Google para medir el rendimiento de la página web y la experiencia de los usuarios. Para cada métrica, las URL se marcan como "Verde - Bueno", "Ámbar - Necesita mejorar" o "Rojo - Malo".

Las puntuaciones de Core Web Vitals tienen un impacto directo en las clasificaciones de los motores de búsqueda.

LCP: pintura con contenido más grande

¿Cuánto tiempo tarda el elemento más grande de su página en mostrarse en la pantalla?

CLS - Cambio de diseño acumulativo

¿Cuánto cambia el diseño de la página a medida que se carga la página?

FID - Retraso de la primera entrada

¿Cuánto tarda la página en responder a las interacciones?

Cómo se calculan los Core Web Vitals en Shopify

Es importante entender cómo Google calcula las puntuaciones de Core Web Vitals porque esto afecta la forma de realizar mejoras significativas. Los datos de Core Web Vitals provienen de los datos de CrUX que miden el rendimiento de los visitantes reales del sitio web que utilizan el navegador web Chrome. Esto se llama 'datos de campo'.

Para cada métrica de CWV, hay un puntaje promedio mínimo que debe alcanzar para no ser marcado como 'Deficiente'. Esto se basa en los puntajes promedio registrados contra grupos de páginas. Es importante comprender que su sitio web de Shopify no se califica en función de una métrica de vitales web central; las URL en su sitio web son.

Cuando su tienda Shopify falla en una métrica de Core Web Vitals, Search Console le mostrará una muestra de las URL que se vieron afectadas por el problema. Esto le ayuda a delimitar dónde está el problema y aplicar la mejora de objetivos. Antes de comenzar cualquier trabajo de optimización de Core Web Vitals en su tienda Shopify, primero identifique qué áreas de mejora tendrán el mayor impacto. No pierda su tiempo en un trabajo que no producirá un resultado positivo.

Consejos de optimización de métricas vitales de Shopify Core Web

Core web vitals se trata de entregar su contenido y recursos más importantes lo más rápido posible.

La optimización de la velocidad de la página no es cosa de una sola vez. Su organización necesita adoptar una cultura en la que el impacto de la velocidad de la página se tenga en cuenta en todas las decisiones. Por cada mejora que considere realizar en su tienda, considere cuál será la compensación en la velocidad de la página.

Cómo mejorar LCP en Shopify

LCP se refiere al elemento más grande de su página y cuánto tarda el navegador en cargar y mostrar ese elemento en la pantalla. Normalmente será una imagen, pero también podría ser un elemento de texto.

Para mejorar LCP en una tienda Shopify, es útil comprender los factores que afectan a LCP. Hay cuatro etapas que tienen lugar para cargar su elemento LCP.

LCP tiene que ver con cuánto tiempo le toma al navegador web pintar/renderizar su elemento más grande en la página. Cargar y pintar no son lo mismo. Incluso si su elemento LCP está optimizado para un tamaño de archivo pequeño, LCP aún puede tardar mucho tiempo debido a:

• Retraso de carga de recursos. El navegador tarda demasiado en comenzar a descargar el elemento.
• Retardo de procesamiento de elementos. Una vez que el navegador ha descargado el elemento LCP, lleva demasiado tiempo mostrar el elemento en la página.

La idea para llevar aquí es que LCP es más que solo el tamaño de archivo de su elemento más grande. Es el tiempo que lleva completar el proceso de 4 etapas anterior. Para mejorar sus puntajes LCP, concéntrese en todo el proceso de carga y representación de su elemento LCP.

Cómo encontrar el elemento LCP en cualquier página de Shopify

Para mejorar LCP necesita saber qué elemento en una página es el LCP. Esto es fácil en Shopify. Simplemente vaya a PageSpeed ​​Insights y analice la URL para la que necesita encontrar el LCP. Cuando el informe haya terminado, desplácese hasta la parte inferior y busque en la sección 'Diagnósticos'. Habrá una fila llamada 'Elemento de pintura con contenido más grande'. Amplíe esto para ver detalles sobre qué elemento es el LCP en esta página.

No realice la carga diferida del elemento LCP

La carga diferida es un método utilizado para cargar un elemento solo cuando se vuelve visible en la ventana gráfica. Esto ayuda a que el contenido de la mitad superior de la página se cargue más rápido. No debe cargar de forma diferida su elemento LCP porque retrasará la rapidez con la que el navegador comienza a descargar el elemento.

En las tiendas Shopify, el elemento LCP en una página de producto normalmente será la imagen principal del producto. O en una publicación de blog, el elemento LCP probablemente será una imagen de encabezado de blog. Algunos temas de Shopify agregarán automáticamente la carga diferida a cada imagen, incluso a las que aparecen en la mitad superior de la página. Revisa cada una de tus plantillas de Shopify y averigua qué es el elemento LCP. Si aparece en la mitad superior de la página, asegúrese de que el siguiente atributo no esté incluido en la etiqueta HTML:

cargando = "perezoso"

Precargar el elemento LCP

Puede usar rel=”preload” para indicar a los navegadores web que descarguen un recurso específico lo antes posible. Al aplicar rel=”preload” en su elemento LCP, el navegador priorizará la carga de ese recurso en la página.

Puede hacerlo usted mismo editando el código de su tema. Para los desarrolladores de temas de Shopify, hay un filtro que se puede agregar a las plantillas líquidas de Shopify que generará una etiqueta precargada.

Usar imágenes de próxima generación

Los nuevos formatos de imagen, como WebP, tienen un tamaño de archivo más pequeño que los formatos tradicionales, como JPG y PNG. Si su elemento LCP es una imagen, usar un formato de imagen Nextgen acelerará el tiempo de descarga. Siempre que sea posible, use imágenes WebP, pero recuerde incluir una alternativa para los navegadores heredados que no admiten imágenes de próxima generación.

Los nuevos temas de Shopify convertirán automáticamente sus imágenes en WebP y las mostrarán en los navegadores apropiados.

Asegúrese de que el elemento LCP esté incluido en la respuesta HTML inicial

Reduzca el "retraso de carga de recursos" asegurándose de que su elemento LCP se entregue dentro de la respuesta HTML inicial. Si el elemento LCP se carga en la página mediante un recurso externo (como un script JS), el navegador tardará más en comenzar a descargar el elemento LCP.

Si esto afecta a tu tienda Shopify dependerá del tema de la tienda que utilices. Una forma rápida de probar esto es determinar cuál es su elemento LCP y luego ver la página con JS desactivado. Si el elemento LCP no se muestra en la página HTML, eso significa que no se entrega dentro de la respuesta HTML inicial.

Elimine los recursos que bloquean el renderizado

El consejo "Eliminar los recursos que bloquean el renderizado" existe desde hace mucho tiempo. Pero, ¿qué significa realmente? Algunos recursos, como secuencias de comandos y hojas de estilo, bloquean la representación de una página web. Cuando un navegador descubre un recurso, dejará de descargar la página y, en su lugar, descargará y ejecutará ese recurso. Esto retrasa la presentación de la página para los usuarios.

Un informe de faro le mostrará los recursos de bloqueo de procesamiento para cualquier página. Por lo tanto, debe determinar cuáles de sus secuencias de comandos y hojas de estilo bloquean el procesamiento y luego optimizar la forma en que se entregan.

Eliminar el bloqueo de procesamiento JS

Primero, debe comprender dos atributos llamados aplazamiento y asíncrono. Estos atributos HTML se pueden adjuntar a scripts externos y decirle al navegador cuándo descargar/ejecutar el recurso.

Entonces, al aplicar async o diferir a sus scripts JS, puede minimizar su impacto en la representación de la página. Shopify no sincronizará ni aplazará automáticamente sus scripts, por lo que deberá acceder a las plantillas líquidas del tema y agregar el atributo usted mismo. Pero tenga mucho cuidado al realizar este proceso, ya que debe considerar qué impacto podría tener el aplazamiento de un script en la funcionalidad de su tienda.

También encontrará que las aplicaciones y los complementos que instala en su tienda Shopify generarán secuencias de comandos JS que bloquean el renderizado. Puede identificarlos a través de un informe de Lighthouse. Considere detenidamente cada aplicación que instale en su tienda y piense en el impacto potencial en la velocidad de la página. Algunos comerciantes ni siquiera se darán cuenta de que las aplicaciones no utilizadas todavía están instaladas en una tienda y afectan la velocidad de la página. Cuando desinstales una aplicación, asegúrate de que no deje ningún código heredado en tu tema.

Elimine las hojas de estilo CSS que bloquean el renderizado

Para eliminar el CSS que bloquea el renderizado, debe alinear los estilos críticos necesarios para renderizar el contenido de la mitad superior de la página. No es eficiente descargar toda la hoja de estilo inmediatamente para cada visitante, ya que no se utilizará la mayor parte del CSS.

La solución es alinear el CSS crítico necesario para representar la sección de la mitad superior de la página incluyéndolo dentro de una etiqueta de estilo en su cabeza . A continuación, agregue el siguiente código a la de su theme.liquid.js para cargar su hoja de estilo principal de forma asíncrona.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Antes de lanzar esto a su tienda en vivo, experimente con un tema de prueba para validar que su página aún se vea correcta visualmente.

Cómo mejorar CLS en Shopify

CLS tiene que ver con cuánto cambia el diseño de la página a medida que se carga una página. La causa normalmente son las imágenes que mueven el contenido a medida que se cargan y procesan.

Agregue atributos de ancho y alto a sus imágenes

La solución CLS más fácil es asegurarse de que sus etiquetas img generen atributos explícitos de ancho y alto. Estos atributos se aplican al HTML de la imagen y le indican al navegador el ancho y el alto de la imagen. Con esta información, el navegador puede calcular la relación de aspecto y las dimensiones de la imagen y reservar el espacio necesario para esa imagen. Esto evita que el diseño se desplace cuando se agrega la imagen a la página.

Para hacer esto en una imagen en tu propia tienda Shopify, inicia sesión y ve a la sección de temas. Y vaya a 'Editar código' para su tema. Luego busque el fragmento de código dentro de su plantilla líquida que genera la imagen y agregue el siguiente fragmento a la etiqueta img.

 height="{{img.height}}" width="{{img.width}}

Mire las plantillas líquidas que usa para su página de inicio, colecciones, productos y blogs de Shopify y asegúrese de que las etiquetas img hagan referencia a los atributos de ancho y alto.

Optimice sus fuentes

Esas fuentes web sofisticadas que carga desde lugares como las fuentes de Google pueden causar problemas de CLS debido a un problema llamado FOUS (flash de texto sin estilo). Aquí es donde el navegador web carga inicialmente una fuente alternativa y, luego, cuando se carga la fuente web principal, el texto se vuelve a representar, lo que provoca un cambio de diseño.

Reduzca la dependencia de las fuentes web de terceros En primer lugar, intente reducir su dependencia de las fuentes web de terceros. Cuando importe fuentes web, importe solo las familias de fuentes que necesite. No importe los diferentes pesos y estilos de fuente si nunca se usan, ya que esto aumentará el tamaño del archivo de fuente.

Precargar fuentes Las fuentes web a veces se cargan desde una hoja de estilo. Esto retrasa la rapidez con la que el navegador puede comenzar a descargar la fuente. En su lugar, precargue sus archivos de fuentes en el de tu tienda Esto le indicará al navegador que cargue el archivo de fuente con alta prioridad.

Use font-display:opcional Font-display es una propiedad de CSS que le dice al navegador qué hacer cuando una fuente no se ha descargado en 100 ms. El navegador cargará inicialmente la fuente alternativa y, si la fuente personalizada no ha terminado de descargarse en 100 ms, el navegador mantendrá la fuente alternativa representada en la página. Esto reduce el riesgo de que la fuente personalizada se cargue demasiado tarde y provoque un cambio de diseño.

Cómo mejorar FID en Shopify

En nuestra experiencia, FID es la métrica Core Web Vital menos común que vemos que afecta a las tiendas de Shopify. Piense en FID como una forma de medir la capacidad de respuesta de una página durante la carga. Nada frustra más a los usuarios que hacer clic/tocar y no pasa nada.

FID es similar a otra métrica llamada Tiempo total de bloqueo (TBT). TBT mide el tiempo entre el momento en que la página comienza a renderizarse (First Contentful Paint o FCP) y el momento en que la página se vuelve receptiva (Time to Interactive o TTI).

TBT es causado por 'tareas largas' que bloquean el procesamiento del subproceso principal. El hilo principal es donde el navegador procesa todo lo necesario para cargar una página. Si las tareas largas bloquean el procesamiento del hilo principal, retrasa la rapidez con la que una página se vuelve interactiva para los usuarios.

¿Cuál es la diferencia entre FID y TBT?

La principal diferencia entre FID y TBT es que FID se basa en datos de campo (datos de usuarios reales que han visitado tu tienda Shopify). Mientras que TBT es medible en laboratorio y se calcula ejecutando pruebas en un entorno artificial con condiciones de red definidas.

Como no puede medir FID al probar sus propias páginas, debe medir TBT en su lugar.

Para mejorar la FID, debe acelerar la rapidez con la que su tienda Shopify responde a la primera interacción de un usuario. Esto se hace haciendo que tus páginas de Shopify se carguen de la manera más eficiente posible. Enfócate en estas tres áreas:

Reduzca el impacto del código de terceros

Al igual que con todas las métricas básicas de Web Vitals, JavaScript de terceros suele ser la causa de los problemas. Cualquier tercero que bloquee el hilo principal durante más de 250 ms se marcará en un informe de Lighthouse. Ejecute sus páginas a través de Lighthouse para identificar qué scripts de terceros causan problemas. Luego, decida cuáles se pueden configurar como asincrónicos o diferidos.

Reducir el tiempo de ejecución de JavaScript

El tiempo que tarda en ejecutarse JavaScript también es importante. En primer lugar, ejecute sus páginas a través de Lighthouse e identifique qué scripts tardan más en ejecutarse. Lighthouse marcará cualquier script que tarde más de 2 segundos.

Use la división de código En lugar de entregar todo su código JavaScript en un solo archivo, divida su código en partes más pequeñas y entregue solo el código necesario para esa página. Esto no es fácil y requiere el apoyo de los desarrolladores que administran su código. Encontrarás esto mucho más fácil si está integrado en el desarrollo de tu tema de Shopify al comienzo del proyecto.

Minimice y comprima su código Cuando minimiza su código, elimina espacios en blanco y comentarios innecesarios. Esto reduce el tamaño del archivo pero acelera la rapidez con la que un navegador puede ejecutar el código. Una de las mejores cosas de Shopify es que la mayoría de los temas js se minimizan automáticamente.

Al igual que la minificación, comprimir su js reduce el tamaño del archivo y acelera la rapidez con la que el navegador web puede ejecutar el código.

Minimice el trabajo de subprocesos

El hilo principal hace todo el trabajo de procesamiento y cálculo de cómo construir una página. Cuando el hilo principal está ocupado por tareas intensivas, tu TBT será peor. Esto se reduce principalmente a cuán robusto es tu tema de Shopify. Los temas baratos creados por desarrolladores pobres no se cargarán tan eficientemente como los desarrollados por los expertos de Shopify.

¿Cómo puedes minimizar el trabajo de subprocesos en tu tienda Shopify? Como se mencionó anteriormente, es mucho más fácil si esto se integra en su tema desde el principio. Recomendamos comprar un tema premium de Shopify con excelentes críticas. O si está creando su propia tienda Shopify, asegúrese de trabajar con desarrolladores expertos de Shopify que puedan garantizar que su tema esté optimizado para minimizar el trabajo de subprocesos.

Cómo medir el rendimiento de Core Web Vitals

Ahora que comprende cómo mejorar Core Web Vitals en su tienda Shopify, a continuación necesita saber cómo medir el progreso de Core Web Vitals.

Consola de búsqueda

La forma más rápida de ver el rendimiento actual de su tienda Shopify para Core Web Vitals es a través de Search Console. Vaya al informe Core Web Vitals desde el menú de la izquierda para obtener datos sobre el rendimiento actual de su sitio. Incluirá un desglose de dónde tiene problemas de Core Web Vitals y le mostrará una muestra de las URL afectadas.

Perspectivas de velocidad de página/Lighthouse

Pagespeed insights es una herramienta gratuita de Google que te permite medir la velocidad de cualquier página. Ejecute sus URL de Shopify a través de la herramienta para obtener un desglose detallado de su rendimiento junto con las acciones recomendadas para lograr una puntuación más alta.

Informe CruX

CrUX es el propio conjunto de datos de velocidad/rendimiento de Google para millones de páginas reales. Puede acceder a los datos de CrUX para su propia tienda Shopify mediante el panel de Google CrUX Data Studio. El panel proporciona un desglose detallado del rendimiento de su sitio en las métricas de Core Web Vitals durante los últimos 16 meses.

¿Qué significan todos esos términos CWV?

Cuando comience a mirar Core Web Vitals, encontrará muchas terminologías complicadas, esto es lo que significa:

Core Web Vitals Aplicaciones de Shopify

Hay muchas aplicaciones de Shopify que afirman poder mejorar las puntuaciones de Core Web Vitals. Algunas de estas aplicaciones son eficaces y ofrecen una mejora del rendimiento. Si bien esto puede mejorar sus puntajes de Core Web Vitals, no hay garantía de que verá algún efecto. Esto se debe a que las puntuaciones de Core Web Vitals son únicas para cada tienda Shopify. Si los puntajes de Core Web Vitals de su tienda son bajos debido a un problema de tema específico, una aplicación probablemente no hará ninguna diferencia.

Si desea tomar la ruta de la aplicación, le recomendamos probar una aplicación y observar el efecto que tiene en el rendimiento. Aquí hay algunas aplicaciones sugeridas para probar:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

Si necesita algún consejo o ayuda con su negocio de comercio electrónico, comuníquese con nuestro equipo y estaremos encantados de ayudarle.