Cómo obtener una puntuación de 90+ Core Web Vitals para una tienda de comercio electrónico (estudio de caso)

En esta publicación, aprenderá cómo obtener una puntuación de más de 90 en su Google Core Web Vitals (escritorio y móvil) para una tienda de comercio electrónico, incluso si usa muchos complementos.

Cuando Google lanzó por primera vez su evaluación principal de web vitals , muchos propietarios de tiendas de comercio electrónico comenzaron a entrar en pánico.

A diferencia de un sitio de contenido básico o un blog, una tienda de comercio electrónico tiene muchas imágenes y requiere muchos más elementos funcionales para cerrar una venta. Y cada característica agregada ralentiza su sitio.

Por ejemplo, el chat en vivo puede tardar entre 6 y 10 segundos en cargarse por sí solo. La carga del seguimiento de correo electrónico básico con Klaviyo puede tardar entre 1 y 2 segundos. Incluso agregar el píxel de Facebook puede tardar cien milisegundos en cargarse.

No importa si su código utiliza carga diferida o asincrónica. Cada elemento adicional en su sitio web tendrá un impacto negativo en sus principales elementos vitales web.

En este momento, de acuerdo con Searchmetrics, el 96% de los sitios probados en los EE. UU. No pasan la Evaluación de Vitales de la Web Principal de Google para computadoras de escritorio, dispositivos móviles o ambos.

Y la tasa de fallas es aún mayor para las tiendas de comercio electrónico debido a la funcionalidad requerida para realizar transacciones en línea.

En esta publicación, le mostraré los pasos exactos que tomé para lograr una calificación de más de 90 en Google Core Vitals para el sitio web de mi tienda de comercio electrónico de 7 cifras.

Obtenga mi mini curso gratuito sobre cómo iniciar una tienda de comercio electrónico exitosa

Si está interesado en iniciar un negocio de comercio electrónico, reuní un paquete completo de recursos que lo ayudarán a lanzar su propia tienda en línea desde cero. ¡Asegúrate de agarrarlo antes de irte!

Haga click aquí para descargar

¿Qué son Google Core Vitals?

Google Core Web Vitals es un conjunto de factores que Google incorpora en los rankings de búsqueda para medir la calidad de la experiencia del usuario.

Google Core Vitals consta de 3 componentes.

• La pintura con contenido más grande (Google requiere 2,5 segundos o menos) : esta es una medida de cuánto tiempo se tarda en ver el contenido más grande que se muestra en la pantalla. Básicamente, se trata de la rapidez con la que se carga su sitio.
• Retraso de la primera entrada (Google requiere 100 milisegundos o menos) : esta es una medida de la capacidad de respuesta y usabilidad de su página. Específicamente, Google mide el retraso entre un visitante que hace clic en una función interactiva y la rapidez con la que la página responde a ese clic.
• Cambio de diseño acumulativo (Google requiere una puntuación de .1 o menos) : esta es una medida de la estabilidad de su página mientras se carga. ¿Su contenido se mueve hacia arriba y hacia abajo a medida que se representa la página? Esta es la única métrica de Google Core Web Vital que no tiene nada que ver con la velocidad de la página. También es el más difícil de depurar si no sabe lo que está haciendo.

Las secciones restantes de esta publicación detallarán EXACTAMENTE cómo arreglé estas 3 métricas para que mi tienda de comercio electrónico logre una puntuación de más de 90 Google Core Vitals tanto en computadoras de escritorio como en dispositivos móviles.

La tienda de comercio electrónico utilizada para este estudio de caso

La mayoría de los propietarios de tiendas de comercio electrónico están en Shopify, WooCommerce, BigCommerce o Shift4Shop y todas estas estrategias se aplican sin importar en qué plataforma se encuentre.

Mi tienda de 7 figuras se encuentra en BumblebeeLinens.com. Siéntase libre de ejecutar la prueba de velocidad de la página de Google en mi tienda mientras lee esta publicación para ver mis resultados de primera mano.

En primer lugar, mi tienda utiliza muchas de las últimas novedades en comercio electrónico porque doy un curso de comercio electrónico en Profitable Online Store.

De hecho, trato a mi tienda como un laboratorio para probar nuevas funciones a medida que aparecen e informar sobre ellas en este blog.

Estos son los complementos y servicios que estoy ejecutando en mi tienda para este caso de estudio.

• Klaviyo - Mi plataforma de marketing por correo electrónico
• Postscript - Mi plataforma de marketing por SMS
• Vizury - Mi proveedor de notificaciones push
• ManyChat - Mi proveedor de marketing de Facebook Messenger que implementa mi chat en vivo
• Gorgias - Mi software de servicio al cliente que maneja toda la correspondencia del cliente.
• Spin To Win Popup: mi principal imán de clientes potenciales para mi tienda
• Pixel de Facebook : realiza un seguimiento de todas mis ventas de Facebook
• Google Analytics : realiza un seguimiento de las ventas de mi sitio web
• Notify Slide Up : proporciona una prueba social al mostrar las ventas a medida que ingresan

Solo por diversión, así de rápido se carga mi sitio SIN ninguna optimización .

Así de rápido se ejecuta con las optimizaciones que estoy a punto de enseñarles cómo implementar.

Cómo solucionar problemas de pintura con contenido grande (LCP) y retardo de la primera entrada (FID)

Las bajas puntuaciones de LCP y FID se deben a velocidades de página lentas . Si puede hacer que su sitio web sea más rápido, sus puntuaciones LCP y FID se corregirán solas.

Para el 99% de las tiendas de comercio electrónico, los problemas de LCP y FID son causados ​​por ...

• Carga de JavaScript y CSS que bloquea la representación : sin ninguna optimización, los archivos javascript y css se cargan secuencialmente, lo que puede bloquear la representación visual de su página. La mejor manera de acelerar su javascript es cargar su código de forma diferida o diferir el renderizado para que no bloquee nada.
• Carga de fotos y / o videos grandes: cuanto más grandes y de mayor resolución sean sus imágenes, más tardarán en cargarse. Nunca debe cargar una imagen más grande que la que se muestra en su sitio web. Además, nunca debe cargar ninguna imagen que no esté visible en la pantalla.
• Un servidor lento : un servidor lento no debería ser un problema con plataformas totalmente alojadas como Shopify, BigCommerce o Shift4Shop, pero si estás en WooCommerce, elegir un host más rápido como WPEngine podría acelerar tu sitio dramáticamente.

En un nivel alto, si aborda los 3 problemas mencionados anteriormente, tendrá un sitio web ultrarrápido.

Cómo lograr velocidades de carga de página de 1 segundo

A continuación se muestra una lista completa de mis optimizaciones de velocidad junto con una calificación de 1 a 5, donde 5 indica el mayor impacto en la mejora de la velocidad.

En general, debes concentrarte en los 5 e implementar los 1 y 2 solo si tienes tiempo o si eres súper anal :)

Si quieres saber cómo logré una velocidad de carga de página de 1 segundo , ¡puedes saltar directamente a las armas grandes con una calificación de 5 :)!

Habilitar el almacenamiento en caché del navegador (calificación 1 de 5)

El almacenamiento en caché del navegador le dice al navegador del cliente que almacene en caché las imágenes y otros elementos de su sitio web en la máquina local del usuario para que la navegación por su sitio web sea mucho más rápida DESPUÉS de la carga inicial de la página.

El almacenamiento en caché del navegador SIEMPRE debe estar activado, pero tenga en cuenta que el almacenamiento en caché del navegador NO afectará a Google Core Web Vitals . Google solo se preocupa por cómo se carga su sitio web desde un estado completamente frío.

Minimizar archivos CSS / JS (calificación 1 de 5)

Minimizar su CSS / JS elimina todo el espacio en blanco de sus archivos CSS y javascript para ahorrar algunos bytes aquí y allá.

En general, la minificación de sus archivos CSS / JS no mejorará drásticamente la velocidad de su página.

Realice esta optimización si está tratando de obtener hasta el último milisegundo de velocidad de su sitio.

Combine archivos HTML, CSS y JS (calificación 2 de 5)

La combinación de sus archivos HTML, CSS y JS en menos archivos puede afectar la velocidad de su página porque su servidor tiene que buscar menos archivos.

Pero con la última tecnología de servidor web, se pueden recuperar varios archivos al mismo tiempo en paralelo, lo que mitiga drásticamente esta optimización . No dedicaría demasiado tiempo a esto.

Limpia tus redireccionamientos (calificación 2 de 5)

Su sitio web cambia constantemente y, a veces, es posible que tenga redireccionamientos de ciertas imágenes y / o páginas a otras.

Por ejemplo, cuando migré todas mis páginas de http: // a https: // hace muchos años, emití redireccionamientos 301 de ciertas páginas e imágenes a sus contrapartes seguras como una solución rápida.

Cada redireccionamiento en su página ralentizará su sitio, así que asegúrese de usar una herramienta como GTMetrix para detectar cualquier redireccionamiento en los elementos de su página y eliminarlos.

Utilice un alojamiento web más rápido (calificación 3 de 5)

Si está en una plataforma de código abierto como WooCommerce o Magento, su primer instinto podría ser tirar dinero a un servidor nuevo para solucionar los problemas de velocidad de su página.

Pero la mayoría de las veces, un servidor más rápido no resolverá sus problemas de velocidad . Sin embargo, si actualmente está utilizando un alojamiento compartido barato , un VPS o un servidor dedicado podrían marcar una diferencia significativa.

Utilice un CDN (calificación 2-3 de 5)

Las redes de entrega de contenido o CDN almacenan múltiples copias de su sitio web e imágenes en múltiples servidores en todo el mundo para que su contenido sea entregado por el servidor más cercano, ubicado geográficamente.

Si tiene clientes en todo el mundo y su sitio tiene muchas imágenes , entonces el uso de una CDN podría tener un impacto significativo en la velocidad de su página.

Pero para los sitios más pequeños como el mío que sirven principalmente a los Estados Unidos, el uso de un CDN solo tiene un impacto marginal en la velocidad de la página .

Precargar imágenes y guiones más grandes (calificación 3 de 5)

Métricas como "pintura con contenido más grande" miden la velocidad del elemento más grande en su página. Como resultado, tiene sentido "precargar" los elementos más grandes en su página proporcionando pistas en su código HTML.

Las sugerencias de precarga son instrucciones en su código HTML que le dicen al navegador qué recursos son más importantes para la página.

Por ejemplo, si tiene una imagen de presentación grande , tiene sentido comenzar a cargar esta imagen primero para mejorar su LCP.

Si bien precargar elementos importantes en su sitio puede ayudar a su puntaje LCP, no tendrá un impacto en la velocidad general de su página.

Reduzca sus imágenes (calificación 4 de 5)

La mayoría de los nuevos propietarios de tiendas de comercio electrónico utilizan tamaños de imagen mucho más grandes de lo requerido . Si el tema de su tienda en línea utiliza imágenes de 1000 × 1000, nunca debe cargar una imagen de más de 1000 x 1000.

Si su sitio web utiliza la misma imagen en varias páginas de diferentes tamaños , debe crear una imagen separada (y más pequeña) para cada versión.

Por ejemplo, la imagen de un producto en mi tienda se muestra en tamaño completo, 50% de tamaño, 33% de tamaño y 25% de tamaño según la página.

Como resultado, tengo 4 archivos de imagen diferentes (1 para cada tamaño) en mi sitio y solo muestro la imagen más pequeña requerida sin pérdida de calidad.

Además, debe comprimir todos sus archivos JPG hasta un máximo de 50 de calidad en Photoshop (o cualquier programa de imágenes que utilice).

Comprime y almacena en caché tus páginas (calificación 4 de 5)

Si se encuentra en una plataforma totalmente alojada como Shopify, BigCommerce o Shift4Shop, es probable que sus páginas ya estén comprimidas y completamente almacenadas en caché antes de que se sirvan.

Pero si está en una plataforma de código abierto como WooCommerce , asegúrese de usar un complemento como WP Rocket.

WP Rocket pre-renderizará todas sus páginas web para que su tienda ofrezca páginas estáticas que requieran poco o ningún uso de CPU.

WP Rocket también comprimirá su página web al 90% de su tamaño.

Use menos complementos que carguen código externo (calificación 4 de 5)

Cada complemento que agregue a su sitio web lo ralentizará . Como resultado, debe tener mucho cuidado siempre que decida instalar una nueva herramienta de software.

¡Las características aparentemente inocuas a veces pueden ralentizar drásticamente su sitio!

Por ejemplo , agregar un botón para compartir de Facebook o un botón pin-it de Pinterest puede hacer que se descargue una nueva pieza de código JavaScript desde una fuente externa.

Para botones como Twitter, Facebook o Pinterest, siempre utilizo versiones "sin javascript" que no requieren código cargado externamente.

Si desea agregar un botón para compartir de Facebook a su sitio, debe usar la versión con hipervínculo como se muestra a continuación.

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

Carga perezosa tus imágenes y código Javascript (calificación 5 de 5): ¡lo más importante!

Cuando se trata de mejorar la velocidad de carga de su página, solo debe cargar elementos de su sitio que sean obligatorios o visibles.

Por ejemplo, si hay una imagen enterrada 5 pergaminos hacia abajo en su página, no debe mostrar esa imagen hasta que su cliente baje lo suficiente para verla.

De manera similar, para el código javascript, no debe cargar ninguna funcionalidad para su sitio web hasta que realmente necesite cargarse.

Cómo cargar de forma diferida su código JavaScript y CSS

La carga diferida de sus imágenes es bastante sencilla y la mayoría de los temas ya tienen la carga diferida de imágenes incorporada.

Pero, ¿cómo puede cargar el código javascript de forma perezosa de forma segura en su sitio?

Aquí está el secreto de cómo lo hago.

Para cada página de mi sitio, primero cargo los elementos visuales de mi sitio . Luego, solo cargo el código funcional de JavaScript en mi sitio una vez que el usuario realiza una acción en la página .

Por ejemplo , si va a Bumblebee Linens en este momento, notará que mi sitio web se carga muy rápido (a veces en menos de un segundo).

Pero si hace clic en la página o mueve o desplaza el mouse , solo entonces se carga el chat en vivo junto con la otra funcionalidad de "compra" en mi tienda.

En otras palabras, no puedo cargar la funcionalidad del carrito de compras de mi sitio solo cuando el usuario está realizando una acción o comprando en mi tienda.

Como resultado, mi página se carga muy rápido porque solo estoy cargando los elementos gráficos HTML / CSS de mi sitio.

Desde la perspectiva del usuario, la experiencia de compra es perfecta porque cada página se carga a la velocidad del rayo. Mientras tanto, Google también ve una página de carga rápida.

Cómo implementar la carga diferida de JavaScript

El primer paso necesario para cargar de forma diferida su javascript es averiguar qué se puede cargar de forma diferida SIN romper su sitio.

Recuerde, debe cargar todo el código "esencial" en su sitio para que la experiencia de compra "visual" de su cliente no se vea afectada.

Como resultado, debe cargar cada fragmento de código que afecte la representación de los elementos gráficos de su sitio.

A continuación, le indicamos cómo averiguar qué es esencial.

Vaya a GTMetrix y analice su gráfico de cascada . Su gráfico de cascada le dirá todo lo que está cargado en su página y cuánto tiempo tarda en cargarse.

Según el gráfico anterior, klaviyo_subscribe.js tarda 450 ms en cargarse. Además, klaviyo_subscribe.css tarda otros 420ms.

Klaviyo es mi herramienta de marketing por correo electrónico y sé con certeza que Klaviyo NO afecta la representación de mi sitio en absoluto.

Como resultado, puedo cargar Klaviyo fácilmente sin afectar los elementos visuales de la página.

De hecho, ¡eliminar el código Klaviyo reducirá casi un segundo completo de la velocidad de mi página!

Con GTMetrix, cree una lista de todo el código de carga lenta que no es necesario para representar los elementos visuales de su sitio y luego cargue el código de forma diferida cuando ocurra CUALQUIERA de los siguientes eventos.

• Movimiento del raton
• Desplazamiento de página
• Pantalla táctil

Aquí hay un pequeño fragmento de código que ilustra mi implementación de JavaScript.


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

// Una matriz de eventos DOM que debe interpretarse como
//actividad del usuario.
var activityEvents = [
'mousedown', 'mousemove', 'keydown', 'scroll',
'touchstart'
];

window.onload = function () {
// agrega estos eventos al documento.
// registra la función de actividad como parámetro de escucha.
activityEvents.forEach (function (eventName) {
document.addEventListener (eventName, activity, true);
});
}

Una vez que implemente este paso, debería poder lograr velocidades de carga de página inferiores a 1 segundo en dispositivos móviles y computadoras de escritorio.

Cómo solucionar sus problemas de cambio de diseño acumulativos

El 90% de sus problemas de cambio de diseño acumulativo serán causados ​​por las siguientes 2 razones.

Carga de elementos sin dimensiones

Los parámetros de tamaño de la imagen son los que permiten a un navegador web conocer el tamaño del contenido a medida que se carga.

Por ejemplo, si define las dimensiones de la imagen en su código HTML, el navegador reservará espacio para su imagen mientras se carga para que la página no salte.

Sin embargo, si faltan los parámetros de tamaño, no se realiza ninguna reserva y la página tendrá que reorganizarse cuando finalmente se cargue la imagen.

La solución simple a este problema es especificar las dimensiones de cada elemento en su sitio como se muestra a continuación.

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

Agregar contenido dinámicamente con Javascript

Muchos complementos de Shopify usan javascript para mostrar funciones dinámicamente en su sitio web. Y, a veces, este código se carga tarde, lo que puede hacer que su página suba y baje.

Por ejemplo, si muestra anuncios en su sitio, su sitio puede subir y bajar a medida que se carga el anuncio.

La mejor manera de evitar que esto suceda es preasignar espacio en su página para que se muestre el contenido agregado.

Agregar espacios en blanco pre-renderizados puede ser problemático para ciertos complementos, así que asegúrese de comunicarse con el creador del complemento si esto es un problema con su tienda.

Cómo resolver problemas de CLS más complicados

Como se mencionó anteriormente, el 90% de sus problemas de CLS se pueden resolver agregando dimensiones a sus elementos. Pero el 10% restante puede ser EXTREMADAMENTE difícil de resolver sin utilizar un conjunto específico de herramientas.

Para mis sitios, me tomó literalmente 3 semanas solucionar mis problemas de CLS porque la prueba de velocidad de página de Google NO refleja los puntajes de CLS medidos en el campo.

Por ejemplo, mi blog en MyWifeQuitHerJob.com obtuvo puntuaciones CLS perfectas en la prueba de laboratorio de velocidad de página, pero falló la prueba CLS en el campo.

Si no sabe de lo que estoy hablando, aquí hay un desglose rápido de la Prueba de velocidad de la página de Google.

La puntuación más alta son los datos recopilados de usuarios reales que utilizan el navegador Chrome. La puntuación más baja es la ejecución de la prueba en condiciones ideales .

Cuando los 2 puntajes no coinciden, es difícil arreglarlo porque Google no le dice qué está mal . De hecho, puede tener una puntuación CLS perfecta en el laboratorio pero fallar completamente CLS en el campo.

Esto es lo que Google NO le dice sobre CLS.

La prueba de velocidad de página solo mide su CLS por encima del pliegue en condiciones ideales. En la vida real, un usuario se desplaza hacia arriba y hacia abajo en una conexión a Internet potencialmente mucho más lenta.

Para resolver sus problemas de CLS, DEBE emular una conexión lenta y comportarse como un usuario humano real.

Cómo emular a un usuario real para reparar CLS

La mejor forma de hacerlo es mediante el depurador integrado de Chrome.

A continuación, le mostramos cómo depurar sus problemas de CLS paso a paso.

Paso 1: abre el depurador de Chrome

Paso 2: reduzca la velocidad de su red

En la pestaña "Red", reduzca la velocidad de la página a "3G lento". Esto reducirá drásticamente la velocidad de carga de la página para que pueda detectar fácilmente los cambios de diseño.

Paso 3: Renderizar regiones de cambio de diseño

Haga clic en la pestaña "Rendimiento" y luego asegúrese de que la casilla "Regiones de cambio de diseño" esté marcada en "Representación".

Paso 4: actualice la página

Una vez que haya configurado su depurador de Chrome, actualice la página y desplácese hacia arriba y hacia abajo en su página como un usuario real.

Asegúrese de buscar áreas resaltadas en azul que indiquen un cambio de diseño.

Paso 5: Analice la línea de tiempo del desempeño

Si ve cambios de diseño en su sitio durante la carga, eche un vistazo más de cerca haciendo zoom en la línea de tiempo de carga de su página .

En el siguiente ejemplo, el diseño está cambiando porque estoy cargando en una fuente diferente que desplaza la página ligeramente hacia abajo porque la nueva fuente es más grande.

Al ejecutar estas pruebas en diferentes regiones de su página varias veces, puede detectar y solucionar fácilmente los problemas de cambio de diseño acumulativo .

La parte más difícil es diagnosticar dónde se encuentran sus problemas de CLS porque la prueba de velocidad de la página de Google solo tiene en cuenta la parte superior de la página.

Puede lograr más de 90 puntajes vitales web principales para una tienda de comercio electrónico

Si sigue todas las instrucciones anteriores, puede lograr velocidades de carga de página inferiores a 1 segundo y obtener una calificación de 90+ en sus Core Web Vitals tanto para dispositivos móviles como para computadoras de escritorio.

En general, siempre debe mantener su sitio web lo más simple posible y evitar el uso de complementos a toda costa.

Pregúntese si es absolutamente necesario una determinada función ANTES de implementarla . Luego, busque soluciones que no requieran agregar código javascript adicional a su sitio.

Como soy súper anal, de hecho examino el código fuente de cada complemento que instalo además de las llamadas de red que tienen lugar.

Una vez, usé a ciegas un complemento que literalmente enviaba información de mi sitio web a varias redes publicitarias y vendía la información de mis clientes sin mi conocimiento.

La mayoría de los problemas de velocidad de la página no son causados ​​por su tema, sino por los complementos que instala . ¡Ten cuidado y feliz venta!