Qué es Core Web Vitals y cómo optimizarlo

En 2021, Google incorporó la experiencia de la página como factor de clasificación. Su objetivo principal es mejorar el rendimiento web. Con Page Experience Update Core Web Vitals se ha convertido en un factor vital a considerar si desea que su sitio se clasifique en los resultados de búsqueda de Google.

Cuando alguien busca en Google una palabra clave específica, Google determinará qué sitio debe aparecer en la parte superior y cuál en la parte inferior. Bueno, sin duda considera primero el contenido. El contenido siempre dominará las clasificaciones, pero además del contenido, Google también mide muchos otros elementos de la página web, como palabras clave, uso de esas palabras clave en su página, vínculos de retroceso y muchos otros. El rendimiento de la página también es uno de ellos. Google mide el rendimiento de la página por los principales datos vitales de la web.

En este artículo, analizaremos Core Web Vitals y cómo puede optimizarlo para obtener una clasificación más alta en los resultados de búsqueda y adquirir más tráfico.

¿Qué es Core Web Vitals?

La pintura con contenido más grande, el retraso de la primera entrada y el cambio de diseño acumulativo son las tres métricas de rendimiento clave que componen Core Web Vital, y miden la rapidez y eficiencia con la que se carga una página para los usuarios, así como la interactividad y estabilidad de los elementos del sitio web. permanecer durante todo el proceso de carga.

Vamos a desglosarlo más para una mejor comprensión.

1. LCP (pintura con contenido más grande)

LCP evalúa la rapidez con la que puede cargarse y aparecer el elemento más grande de la mitad superior del sitio (imágenes, videos, animaciones, texto, etc.).

Un buen LCP es de 2,5 segundos, mientras que cualquier valor entre 2,5 y 4 segundos necesita mejoras y Google considera que más de 4 segundos es deficiente.

LAS ESTADÍSTICAS DE PINTURA MÁS GRANDES CONTENIDAS

1. La pintura con contenido más grande representa el 25% de su puntuación de rendimiento de Google Lighthouse.
2. El 43 % de las URL móviles y el 44 % de las URL de escritorio superan el punto de referencia de pintura con contenido más grande de 2,5 segundos.
3. Según la investigación, el sitio web B2B promedio tiene una puntuación de pintura con contenido más grande móvil de 7,05 s, muy por encima de la puntuación de 2,5 s necesaria para recibir una calificación aprobatoria.
4. Según la investigación, el sitio web minorista promedio tiene una puntuación de pintura con contenido más grande móvil de 9,17 s, muy por encima de la puntuación de 2,5 s necesaria para recibir una calificación aprobatoria.

2. FID (retraso de la primera entrada)

El FID de una página es la cantidad de tiempo que tarda el navegador en comenzar a procesar los controladores de eventos en respuesta a la primera interacción del usuario con la página, como un clic o un toque.

Un buen FID está por debajo de 100 ms, mientras que cualquier valor entre 100 y 300 ms necesita mejoras, y por encima de 300 ms se considera deficiente.

ESTADÍSTICAS DE RETARDO DE PRIMERA ENTRADA

1. El retraso de la primera entrada representa el 25 % de la puntuación de rendimiento de Google Lighthouse.
2. El 89 % de las URL móviles y el 99 % de las de escritorio cumplen con el punto de referencia de 100 milisegundos de retraso en la primera entrada.

3. CLS (Cambio de diseño acumulativo)

CLS es una métrica útil centrada en el usuario para medir la estabilidad visual, ya que ayuda a cuantificar la frecuencia con la que los usuarios encuentran alteraciones de diseño inesperadas. Este es un aspecto esencial de la medición de la estabilidad visual.

El CLS bueno está por debajo de 0,1, mientras que cualquier valor entre 0,1 y 0,25 necesita mejoras y por encima de 0,25 se considera malo

ESTADÍSTICAS ACUMULATIVAS DE CAMBIOS DE DISEÑO

1. El cambio de diseño acumulativo representa el 5% de su puntuación de rendimiento de Google Lighthouse.
2. El 46 % de las URL para dispositivos móviles y el 47 % de las URL para computadoras de escritorio superan el punto de referencia de cambio de diseño acumulativo de 0,1.

Ahora, ¿por qué Core Web Vitals es importante?

Una herramienta como Core Web Vitals ayuda a mejorar la posición de su sitio en los resultados de búsqueda. Son cruciales ya que le dicen a Google qué tan bien está funcionando un sitio y dónde se puede mejorar.

Los Core Web Vitals sin duda elevan la importancia de UX como elemento de clasificación.

Por lo tanto, optimizar para Core Web Vitals puede marcar una gran diferencia si está compitiendo en un campo donde la calidad del contenido es casi comparable, lo que significa que si Google tiene que mostrar dos páginas con la misma calidad de contenido, preferirá la que tenga una buena puntuación Core Web Vitals. Recuerde que nada puede reemplazar el contenido de calidad en su sitio web.

Lo que John Mueller de Google tiene que decir sobre Core Web Vitals

La otra cosa a recordar con Core Web Vitals es que es más que un factor de clasificación aleatorio. También afecta la usabilidad de su sitio después de que se clasifica (cuando la gente lo visita). Si obtiene más tráfico (de otros esfuerzos de SEO) y su tasa de conversión es baja, ese tráfico no será tan valioso como cuando tiene una tasa de conversión más alta (suponiendo que UX/velocidad afecte su tasa de conversión, lo que suele ocurrir).

Tener Core Web Vitals sólido es mucho más que la optimización de motores de búsqueda, en pocas palabras. Cada propietario de un sitio web debe hacer un esfuerzo para mejorar la experiencia general de sus visitantes.

Incluso si el contenido de su página es excelente, debe asegurarse de que todos los aspectos de su sitio web estén optimizados para recibir una clasificación alta en los motores de búsqueda, de modo que su sitio sea visible para su público objetivo. Core Web Vitals también enfatiza la importancia de la experiencia del usuario.

Cómo medir Core Web Vitals

Puede examinar los Core Web Vitals de su sitio con la ayuda de varias pruebas, informes y extensiones.

Los más importantes de estos son:

• la evaluación Core Web Vitals de PageSpeed ​​Insights;
• El informe Core Web Vitals en Google Search Console;
• La extensión de Chrome Core Web Vitals.

1. Evaluación Core Web Vitals en PageSpeed ​​Insights

Google PageSpeed ​​Insights (PSI) se divide en dos secciones:

• Determine lo que experimentan sus usuarios reales (evaluación de Core Web Vitals)
• Identificar problemas de rendimiento (datos de laboratorio, puntuación PSI).

Concéntrese en la primera parte para mejorar su puntuación de Core Web Vitals. El informe de datos de campo incorpora este análisis. Los datos de este estudio se recopilan del Informe de experiencia de usuario de Chrome (CrUX). Estos datos se basan en las interacciones reales de los usuarios con su sitio. Google tendrá en cuenta estos resultados de campo al determinar la clasificación de los motores de búsqueda.

La sección "Diagnósticos" de PSI también es un buen recurso para obtener más información sobre los factores que pueden cambiar cualquiera de las tres métricas:

PSI tiene en cuenta las métricas de los usuarios reales y los datos de laboratorio al determinar un puntaje de optimización general y ofrecer recomendaciones de optimización.

Si bien esta información es útil, se recopila en un entorno controlado utilizando dispositivos y redes específicos en el laboratorio. Sin embargo, algunos de los invitados de su sitio pueden usar tecnología obsoleta o conexiones con poca potencia. Es por eso que comparar los resultados del laboratorio con el rendimiento real de su sitio no es una buena idea.

PSI no siempre proporciona un resumen de campo.

Cuando CrUX no ha recopilado suficientes datos del campo, como suele ocurrir con los sitios web más pequeños, surgen problemas como este. Afortunadamente, existen fuentes adicionales de las que podemos recopilar datos de campo.

2. Informe Core Web Vitals en Google Search Console

Se agregaron dos nuevos informes Core Web Vitals, uno para dispositivos móviles y otro para computadoras de escritorio, a Google Search Console (GSC).

Cada informe proporciona información sobre los datos de campo y el rendimiento de grupos de URL.

Estos informes son excelentes para descubrir problemas comunes en varias URL. Por lo tanto, recibirá información de todo su sitio web, no solo de una página.

Por ejemplo, si tiene una gran cantidad de páginas idénticas donde el elemento más grande es una imagen, la métrica LCP será la misma para cada una. En esta situación, GSC descubre problemas de LCP en cada página.

En resumen, estos nuevos informes de GSC son el enfoque más notable para realizar un seguimiento del rendimiento de Core Web Vitals en todo su sitio.

3. Uso del Informe de experiencia de usuario de Chrome (CrUX) para obtener datos de campo

Se puede acceder al conjunto de datos CrUX de las siguientes 2 maneras

• La API de informes de Chrome UX: para acceder a este desarrollador, debe estar familiarizado con JavaScript y JSON.
• BigQuery: requiere un proyecto de Google Cloud y conocimientos de SQL.

Deberá realizar más trabajo que simplemente pasar una página a través de PSI o GSC. Pero ofrecen más opciones para organizar y visualizar los datos. BigQuery, por ejemplo, tiene funcionalidades para dividir datos y unirlos con otros conjuntos de datos.

Pruebe ambas estrategias si tiene los recursos y el conocimiento técnico para implementarlas.

Algunas estadísticas vitales sobre Core Web Vitals

1. El 56% de los 100 principales dominios de escritorio pasan Core Web Vitals
2. Gran efecto de marca: las principales marcas se clasifican alto incluso con un rendimiento deficiente.
3. El 61 % de los 100 mejores móviles aprobaron Core Web Vitals en febrero de 2022
4. En febrero de 2022, el tiempo de carga promedio para los 100 dominios principales en los EE. UU. fue de 2,38 segundos en computadoras de escritorio y 2,32 segundos en dispositivos móviles, por debajo del umbral razonable de Google de 2,5 segundos.
5. En febrero de 2022, las puntuaciones CLS promedio para computadoras de escritorio y dispositivos móviles fueron de 0,11 y 0,08, respectivamente; esta es la primera vez que el CLS promedio en dispositivos móviles para los 100 sitios principales cae por debajo del umbral adecuado de Google de 0,1
6. En enero de 2020, solo el 22 % de los dominios de escritorio y el 27 % de los 100 principales dominios móviles pasaron Core Web Vitals, respectivamente. Avance rápido hasta febrero de 2022, y esta proporción se ha más que duplicado al 56 % en computadoras de escritorio y al 62 % en dispositivos móviles. Esto muestra que los dominios de mayor rendimiento han obtenido ganancias significativas en el rendimiento web.
7. Los sitios Top 100, B2B, Healthcare y Dict/Reference tienen un LCP promedio de 2,5 segundos o menos en ambos dispositivos.
8. En promedio, LCP móvil para viajes es 1,6 veces peor que para sitios de diccionario/referencia.
9. En promedio, el LCP de escritorio para viajes es 1,5 veces peor que para los dominios B2B.
10. Las URL en la posición 1 tienen un 10 % más de probabilidades de aprobar una evaluación de Core Web Vitals que las URL en la posición 9.
11. Desde la posición 1 a la posición 5, hay una disminución del 2 % en la tasa de aprobación de la evaluación Core Web Vitals para cada posición.

Cómo optimizar Core Web Vitals

Ahora que tenemos un conocimiento firme de Core Web Vitals y cómo funcionan, podemos centrar nuestra atención en algunos pasos recomendados para mejorar Core Web Vitals. Recuerde que los resultados de su prueba dictarán los pasos que debe seguir para aumentar sus puntajes. Por lo tanto, es fundamental tener en cuenta los consejos y las sugerencias de PageSpeed ​​Insights (u otras herramientas de prueba que utilice).

Las siguientes son estrategias básicas comprobadas para aumentar sus puntajes de Core Web Vitals.

1. Utilice una red de entrega de contenido

El uso de CDN mejora en gran medida el rendimiento del sitio. Los sitios que usan CDN cargan rápido comparativamente. ¿Por qué? Porque CDN hace que la transferencia de datos entre el servidor y el usuario final sea rápida.

CDN es una vasta red de servidores interconectados. Puede almacenar el contenido de su sitio web en muchos servidores utilizando el CDN. Cuando un usuario accede a su sitio, el servidor geográficamente más cercano le brinda el sitio web, lo que reduce el tiempo de transferencia de datos.

Con el uso de una CDN, puede reducir los tiempos de carga de LCP de los usuarios. El tiempo hasta el primer byte también se puede reducir con su uso (TTFB).

2. Optimizar Imágenes

Otra forma de impulsar LCP es mediante la optimización de imágenes. Las imágenes tienen un tamaño voluminoso si son de alta resolución y tardan un tiempo razonable en cargarse, lo que afecta negativamente a la puntuación LCP.

El uso de imágenes comprimidas hace que la carga sea más rápida. Muchos sitios como TinyJPG pueden reducir el tamaño de una imagen de forma gratuita sin afectar su calidad. Las imágenes se pueden optimizar aún más asegurándose de que tengan el tamaño y las dimensiones correctos.

Por lo tanto, es inteligente asegurarse de no usar dimensiones de imagen innecesarias para ciertas áreas de su sitio. Incluir los atributos adecuados puede ayudar a su navegador a proporcionar la cantidad ideal de espacio para las partes de su página, lo que reduce la necesidad de cambios constantes en el diseño.

Al realizar cambios en el código fuente, puede modificar las propiedades de ancho y alto de sus archivos multimedia.

3. Implementar la carga diferida

Su LCP y el tiempo de carga de la página pueden beneficiarse del uso de la carga diferida. Smush es solo un ejemplo de varios complementos de WordPress que ofrecen carga diferida.

La carga diferida, también conocida como carga bajo demanda, es un método para mejorar el rendimiento del contenido web.

La carga diferida ayuda a cargar solo la parte necesaria y retrasa la carga del resto hasta que el usuario la necesita, a diferencia de la carga masiva, que carga toda la página web a la vez y la procesa de una sola vez.

4. Optimice las fuentes de su sitio web

Las fuentes que usa en su sitio web pueden afectar su tiempo de carga de la misma manera que lo hacen las imágenes. Esto se debe a que cada combinación de peso de fuente requiere que el navegador cargue toda la familia de fuentes.

La optimización de fuentes web es una forma sencilla de aumentar la velocidad de su sitio. Esto se debe a que las fuentes web optimizadas ocupan menos espacio en la computadora del usuario y se cargan mucho más rápido.

Por otro lado, si la fuente web relevante aún no se ha cargado, es posible que el navegador no represente automáticamente los componentes de texto. Sin embargo, cambiar a fuentes alternativas puede provocar cambios de diseño no deseados, lo que reduce su puntaje CLS.

Tenga cuidado al decidir sobre una fuente para su sitio web. Es mejor usar fuentes globales para aplicar selectivamente los tipos y pesos necesarios si está utilizando más de dos fuentes en lugar de aplicar cada una a cada elemento. Con este método, puede restringir las descargas de fuentes a las estrictamente necesarias para el contenido.

5. Actualice su alojamiento de WordPress

Si el tiempo de carga del sitio es demasiado largo, podría ser una indicación para cambiar el plan de alojamiento. Cambiar su alojamiento de compartido a dedicado puede impulsar FCP en gran medida.

En lugar de elegir el más barato, elegir el mejor sitio de alojamiento que ofrezca todas las funciones que necesita es una sabia decisión. La calidad del servicio proporcionado por su host de WordPress es crucial para el éxito de su sitio web. Tiene consecuencias de largo alcance, desde el tiempo de carga de la página hasta la seguridad. Especialmente si tiene un sitio web grande o sofisticado, este no es un lugar para tomar atajos. En cambio, actualizar su proveedor o plan de alojamiento es una de las estrategias más rápidas y poderosas para optimizar su sitio web y mejorar los tiempos de carga.

Para Hosting Lea: Revisión de Bluehost

6. Elimine los recursos que bloquean el renderizado

Las páginas del sitio web no se pueden representar sin los archivos HTML, CSS y JavaScript que las acompañan. Todos estos archivos incluyen secuencias de comandos que podrían prohibir a las personas acceder a las cosas que intentan ver.

Sin embargo, puede evitar que estos scripts afecten negativamente su UX (y, a su vez, ayudar a impulsar Core Web Vitals) eliminando los recursos que bloquean el renderizado y cualquier CSS o scripts innecesarios.

Existen numerosos métodos para lograr esto. El primero es eliminar cualquier espacio adicional o comentario de su JavaScript y CSS. Además, puede reducir el tamaño de su JavaScript y CSS fusionando los archivos.

7. Aplazar la carga de JavaScript

Es otra forma de eliminar los elementos que bloquean el procesamiento, lo que le da a FID un impulso significativo.

Esto hace que las páginas web se carguen más rápido al bloquear la carga de archivos JavaScript.

Carga otro contenido de sus páginas en lugar de esperar a que se carguen los archivos JS. Además de esto, puede configurar su sitio para cargar scripts CSS críticos que aparecen en la mitad superior rápidamente. Puede lograr esto extrayendo el material del archivo CSS principal e insertándolo dentro del código de su sitio web.

8. Implemente el almacenamiento en caché de contenido.

Cuando se trata de mejorar la experiencia del usuario, el almacenamiento en caché de contenido inteligente es una de las herramientas más poderosas a su disposición. La técnica de entrega de contenido central del protocolo HTTP utiliza el almacenamiento en caché o el almacenamiento temporal de contenido de solicitudes anteriores. Si las políticas de almacenamiento en caché del contenido lo permiten, los componentes en cualquier punto de la cadena de entrega pueden almacenar copias del mismo para acelerar las solicitudes posteriores.

El almacenamiento en caché ayuda mucho a mejorar Core Web Vital Scores.

9. Precarga imágenes de héroes

Las imágenes destacadas suelen ser el elemento más significativo que aparece sobre el contenido de la página. Por lo tanto, si se cargan más rápido, la experiencia de usuario general mejora considerablemente. El LCP se puede reducir drásticamente mediante el uso del atributo de enlace "rel=preload" , que es especialmente útil para imágenes de héroes cargadas con CSS o JavaScript.

10. Abstenerse de priorizar la publicidad o las ventanas emergentes sobre otros contenidos.

Una puntuación CLS baja es el resultado del cambio de contenido en una página causado por la adición de contenido en la parte superior.

Reserve espacio para anuncios, iframes y otras formas de contenido dinámico.

No asignarles un espacio específico es una forma segura de interrumpir el diseño, tal como ocurre con las imágenes y los videos. Para evitar que el contenido se desborde fuera de un contenedor, use la propiedad overflow: hidden y elija un contenedor con el tamaño adecuado.

11. Divide las tareas largas

Esta debe ser tu principal prioridad. Cuando las tareas largas retrasan el subproceso principal, no puede reaccionar rápidamente a las solicitudes del usuario. El rendimiento del sitio web se puede mejorar significativamente dividiéndolos. Esto reduce FID y mejora UX

12. Detenga o posponga la ejecución de scripts de terceros innecesarios

Es posible que los scripts de su propio sitio web no se ejecuten a tiempo si entran en conflicto con los de un tercero. Considere qué scripts son más útiles para el usuario final y asígneles mayor prioridad. Los scripts de anuncios y ventanas emergentes no deben estar en la parte superior de la lista.

Cómo les está yendo a los 10 principales dominios de EE. UU. en términos de su Core Web Vitals según la visibilidad SEO de Searchmetrics.

Todas las métricas y si el dominio pasa o no Core Web Vitals se informan mensualmente a nivel de dominio. En febrero de 2022, el 75 % de todas las cargas de páginas de escritorio de Wikipedia tardaron menos de 1,1 segundos, y el dominio obtuvo una puntuación de 0 tanto en FID (expresado en milisegundos) como en CLS, superando Core Web Vitals.

Los 10 mejores CWV para dispositivos móviles según la métrica de visibilidad SEO de Searchmetrics .

Siempre que fue posible, se utilizó una versión móvil de un dominio. Sin embargo, esto depende principalmente de la recopilación de datos de CrUX. Una mayor proporción de sitios móviles pasa Core Web Vitals que de escritorio.

Conclusión

Core Web Vitals es un cambio de juego para mejorar la experiencia web para todos. Estas medidas seguirán estando incluidas en el sistema de clasificación de Google.

Por eso es fundamental vigilarlos aunque no veas nada raro.

Para mantener un sitio web exitoso en funcionamiento, es crucial mejorar constantemente la experiencia del usuario. Gracias a la disponibilidad de numerosas herramientas y complementos útiles, este proceso se puede hacer mucho más simple y fácil de lo que sería de otra manera. O si le parece desalentador, puede contratar a un desarrollador para que lo haga por usted.