De vez en cuando, Google lanza una iniciativa para hacer de la Web un lugar mejor. Por ejemplo, en 2014 hubo una iniciativa para promover la implementación de certificados HTTPS o SSL al vincular una ventaja de clasificación a esto.

Luego, en 2015, se produjo el ominosamente llamado ‘Mobilegeddon’, donde Google quería presionar para que todos los sitios web fueran diseñados para dispositivos móviles y los desarrolladores web pensaran más en dispositivos móviles primero. Y en 2018 también hubo una actualización sobre el tiempo de carga del sitio web.

Por lo tanto, Google nunca se queda quieto, y cada pocos años hay otro aro por el que los propietarios de sitios web idealmente saltan para obtener y / o mantenerse altos en los resultados de búsqueda de Google. El desarrollo más reciente en esta lista es Core Web Vitals.

Contenidos

¿Qué son Core Web Vitals?

A mediados de junio de 2021, Google introdujo un nuevo factor de clasificación como parte de la actualización del algoritmo de experiencia de la página de Google que mide varios aspectos de la experiencia del usuario de un sitio web. Esto se llama Core Web Vitals y el lanzamiento inicial evaluará un sitio web en tres métricas:

First Input Delay (FID): cuando presionas un botón, ¿cuánto tiempo tarda el sitio web en responder?

Largest Contentful Paint (LCP): la mayor parte de una página web, ¿qué tan rápido se carga?

Cumulative Layout Shift (CLS): mientras se carga una página, ¿cambian los elementos (lo que provoca que, involuntariamente, a veces hagas clic en algo incorrecto, como un anuncio)?

Core Web Vitals en contexto

Antes de definir estas unidades de medida en detalle, es importante comprender Core Web Vitals en su contexto. Core Web Vitals sigue la misma dirección general que otras actualizaciones cuando se trata de medir la experiencia del usuario de un sitio web.

La experiencia del usuario y la calidad del sitio son de gran importancia para Google. Con cada actualización, incluida Core Web Vitals, Google continúa encontrando nuevas formas de determinar qué hace que la experiencia del usuario sea mejor y qué hace que un sitio web de mayor calidad. Además, Google continúa encontrando nuevas formas de medir cuantificablemente cosas que antes no eran cuantificables dentro de la experiencia del usuario de un sitio web.

Las métricas de Core Web Vitals son una consecuencia de este tema: estas métricas representan nuevas formas de medir cuantificablemente diferentes aspectos de la experiencia del usuario de un sitio web. Lo más importante a tener en cuenta en Core Web Vitals es que esta no es la última vez que Google implementará un cambio relacionado con la experiencia del usuario. A veces lleva a los propietarios de sitios web a la locura y hace que la subcontratación de SEO sea atractiva.

Mis Métircas de PageSpeed Insights

Pero no temas, debes tomarte el tiempo para tratar de comprender que esto no es una matemática superior. Si bien lo ideal sería continuar concentrándote en mejorar las métricas de Core Web Vital, la conclusión más amplia es que los administradores de sitios web deben encontrar otras formas de mejorar todos los aspectos de la experiencia del usuario de su sitio web.

First Input Delay (FID) o el retardo de la primera entrada

First Input Delay (FID) mide la rapidez con la que se puede utilizar el sitio web. Esto es diferente de las mediciones de velocidad anteriores que solo evaluaban qué tan rápido se cargaba el sitio web. En cambio, FID mide algún aspecto de cómo las personas interactúan con el sitio web, lo que lo convierte en una medida más directa de la experiencia del usuario.

En lo que respecta a FID, un sitio web es útil si las personas pueden interactuar con él. Eso significa que las personas tienen que hacer clic o tocar un enlace, completar formularios o reproducir videos. Por ejemplo, supongamos que alguien presiona el ‘botón de reproducción’ en un video en tu sitio web, ¿Cuánto tiempo tarda ese video en comenzar a reproducirse? Es importante tener en cuenta que hacer zoom, arrastrar y desplazarse no se consideran interacciones cuando se trata de FID.

¿Qué es una buena puntuación FID?

Google clasifica los puntajes FID en tres grupos: bueno, necesita mejorar o malo. Para obtener un buen resultado de clasificación de Core Web Vitals, FID (y las otras dos métricas de Core Web Vitals) deben estar en el rango correcto. Aquí están los rangos de FID:

Bueno <= 100ms
Necesita mejorar <= 300ms
Malo> 300ms

Eso significa que cuando un visitante de tu sitio web intenta por primera vez interactuar con el sitio web, el sitio web debe responder a esa interacción dentro de 100 milisegundos para ser considerado bueno. Por ejemplo, si visitas el sitio web y haces clic en un botón, algo debería suceder dentro de una décima de segundo en respuesta a tu clic en ese botón.

El límite de 100 ms no es arbitrario. En ese momento, la reacción se sentirá inmediata. Entre 100-300ms (en la categoría de necesita mejorar), el sitio web todavía se sentirá bastante rápido, pero un visitante notará una desaceleración. Aunque parezca rápido, por encima de 300ms, el sitio web comenzará a sentirse lento.

Ten en cuenta que FID no significa que tu sitio web deba cargarse por completo en 100 ms. El tiempo de carga total es otra métrica y esa métrica no es Core Web Vital. Por supuesto, cuanto más rápido se cargue tu sitio web y más eficientemente tu servidor y código trabajen juntos para cargar el sitio web, más rápido será el FID del sitio web.

Largest Contentful Paint (LCP) o la pintura con contenido más grande

La pintura de contenido más grande o Largest Contentful Paint (LCP) mide cuándo aparece en el navegador el elemento más grande en una página determinada del sitio web. LCP no significa que todo tu sitio web deba cargarse en ese período de tiempo determinado. En cambio, LCP mide cuánto tiempo debe esperar un visitante de tu sitio web antes de ver el contenido principal de una página: cuanto más tiempo tengan que esperar las personas, peor será la experiencia del usuario de ese sitio web.

Una suposición con LCP es que los elementos más grandes de una página representan el contenido principal de la página. La mayoría de las veces, esa suposición resulta ser cierta. Los elementos más grandes, como imágenes, videos y bloques de texto, suelen ser más importantes para que los vean los visitantes, por lo que esos elementos deben ser visibles lo antes posible.

Pero cuando ves tu sitio web, los elementos más grandes pueden ser menos importantes para los visitantes. En ese caso, es posible que no solo necesites optimizar los elementos más grandes para la velocidad, sino que también reconsideres el propósito de esa página.

¿Qué es una buena puntuación LCP?

De manera similar a FID, Google clasifica las puntuaciones de LCP en tres grupos: bueno, necesita mejorar o malo. Para obtener la ventaja de clasificación de Core Web Vitals, LCP (y las otras dos métricas de Core Web Vitals) deben estar en el rango correcto. Estos son los rangos para LCP:

Bueno <= 2,5 s
necesita mejorar <= 4 s
Malo> 4 s

Esto significa que los elementos más grandes en la página de tu sitio web deberían estar visibles dentro de los primeros 2.5 segundos después de que un usuario cargue la página. Por ejemplo, si el elemento más grande en una página es una infografía, entonces debes optimizar la imagen de la infografía y el resto del sitio web para que la imagen se pueda mostrar en el navegador dentro de los primeros 2.5 segundos después de que un visitante cargue la página.

En este punto, los elementos medidos son texto e imágenes. En el futuro, es probable que LCP también incluya video en esta métrica. Sería aconsejable optimizar los videos junto con el texto y las imágenes ahora, incluso si no afectará directamente esta métrica. De esa manera, planificas con anticipación la posible revisión de la métrica y haces aún más para que el sitio web se cargue todavía más rápido.

Cumulative Layout Shift (CLS) o el cambio de diseño acumulativo

La métrica final de Core Web Vitals es Cumulative Layout Shift (CLS). CLS mide la estabilidad visual. En otras palabras, mide cuánto cambian los distintos elementos de la pantalla del visitante a medida que se carga la página. Puede ser cualquier elemento de la página, incluidas imágenes, anuncios, texto, videos y más. Es aceptable e incluso esperado algún cambio inesperado durante la carga del sitio web, dada la forma en que ciertos elementos se cargan en el navegador (como las fuentes). Sin embargo, la idea detrás de CLS es minimizar la cantidad de cambios inesperados.

Una de las palabras clave de esta definición es “inesperado”. Si los elementos cambian en respuesta a la interacción de un visitante con tu página, no es un problema para CLS, siempre que el usuario comprenda que el cambio es en respuesta a su interacción. Por ejemplo, si hay un enlace “leer más” en una página, hacer clic en ese enlace “leer más” hará que el texto oculto sea más grande.

Cuando ese texto oculto crece, los otros elementos se desplazan hacia abajo en la página. Siempre que el texto oculto se expanda inmediatamente después de hacer clic en el enlace “leer más”, ese cambio es aceptable; la gente esperaría que ese cambio ocurriera en respuesta a hacer clic en “leer más”.

¿Qué es una buena puntuación CLS y qué significa esta puntuación?

CLS se basa en una fórmula que devuelve un valor decimal que mide la cantidad total de cambios inesperados que ocurren en un sitio web. Al igual que con las otras mediciones de Core Web Vitals, esta puntuación se divide en tres categorías:

Bueno <= 0.1
Necesita mejorar <= 0,25
Malo> 0,25

Cuanto menor sea la puntuación CLS, mejor. Sin embargo, las puntuaciones de CLS no son tan intuitivas como las otras métricas de Core Web Vitals.

Metricas Web Vitals

Core Web Vitals en pocas palabras

Resumamos lo que significan las Core Web Vitals:

First Input Delay (FID) mide la rapidez con la que el sitio web puede responder a la interacción de un usuario.
Largest Contentful Paint (LCP) mide cuándo se muestra en el navegador el elemento más grande dentro del campo de visión en una página determinada del sitio web.
Cumulative Layout Shift (CLS) mide si los elementos se desplazan o se mueven inesperadamente en la pantalla del usuario a medida que se carga la página.

Recuerda, estas tres métricas deben caer en la categoría “Bueno” para obtener un impulso de clasificación de Core Web Vitals de Google. Más importante aún, recuerda que optimizar estas métricas es más que solo SEO. Estas estadísticas hacen que el sitio web sea más fácil de usar para los visitantes y son parte de los criterios de Google para la experiencia del usuario de la página, que también incluye:

Compatibilidad con dispositivos móviles. La página cumple con los estándares de Google de compatibilidad con dispositivos móviles.
Navegación segura. La página no incluye ningún contenido dañino o engañoso.
HTTPS. La página se ofrece a través de una conexión segura.
Sin ventanas emergentes ni pancartas intrusivas. Estos están bien para la verificación de edad y las notificaciones de cookies, pero no para las expresiones comerciales (como una ventana emergente de registro de boletín que ocupa toda la pantalla y la cruz cercana es difícil de encontrar y hacer clic).

Herramientas para revisar los elementos fundamentales de la Web

Para cada evaluación, se recomienda que se utilice una variedad de herramientas para probar y comparar las puntuaciones de rendimiento de cada herramienta para obtener una puntuación media y utilizar datos del mundo real siempre que sea posible. Los recursos a continuación se pueden utilizar para este propósito.

PageSpeed Insights: Verás una especie de banderín azul junto a las métricas de Core Web Vitals. Pero solo para estar seguros, estos también están encerrados en un círculo rojo.

Lighthouse (herramientas de desarrollo de Chrome)
Informes de experiencia de usuario de Chrome
Informes de velocidad de Google Analytics
WebPageTest.org

Tenga en cuenta qué herramientas utilizas para poder replicar fácilmente el análisis cuando revises la implementación. Cuando ejecutas una evaluación, es importante que lo hagas con la menor cantidad posible de funciones adicionales en ejecución. Eso significa borrar tus cookies, ejecutar las comprobaciones de incógnito y asegurarte de que todas las extensiones que usas estén deshabilitadas para obtener los datos más precisos posibles.

El más fácil de usar para personas no técnicas de la lista anterior es probablemente Google PageSpeed Insights. Lighthouse y las otras herramientas mencionadas son más adecuadas para un especialista en SEO o un desarrollador web.

Core Web Vitals: Camino a una mejor web

Entonces, Core Web Vitals es el próximo aro que los propietarios de sitios web deben superar. Google tiene una zanahoria al prometer una ventaja de clasificación en los resultados de búsqueda orgánicos del motor de búsqueda. Esta es una forma probada y comprobada, mira a tu alrededor y casi todos los sitios web de hoy se ejecutan en https / SSL.

Por favor, debes comprender que el gigante de los motores de búsqueda no está haciendo esto para molestar a los propietarios de sitios web ni para imponer castigos. A todos nos interesa que la experiencia del usuario, especialmente en dispositivos móviles, se eleve a una plataforma superior.

Si los elementos también comienzan a moverse durante la carga (CLS) y presionas la cosa incorrecta, casi se convierte en autoflagelación. Con suerte, con Core Web Vitals, todos podemos hacer que este tipo de experiencia sea cosa del pasado y dar un gran paso adelante para hacer de la navegación móvil una experiencia más fluida, agradable y sin fricciones.

Core Web Vitals y hosting

Core Web Vitals se trata principalmente de ofrecer una experiencia de usuario óptima y el rendimiento juega un papel importante en esto. Especialmente en la siguiente sección, “LCP”, se trata de rendimiento, ya que mide la rapidez con la que se cargan los elementos grandes en una página.

El alojamiento tiene un gran impacto en el rendimiento de su sitio web. Tenga en cuenta que un sitio web rápido no garantiza una experiencia de usuario óptima. Pero que un sitio web rápido juega un papel importante en la realización de una experiencia de usuario óptima.