Core Web Vitals: definición, introducción a LCP, FID y CLS, y consejos de optimización de Core Web Vitals

El año 2021 es notable en más de un sentido. Los motores de búsqueda han evolucionado y se han vuelto más competitivos que nunca. Google planea lanzar una nueva métrica revolucionaria para clasificar sitios web en su motor de búsqueda. La buena UX y la experiencia de la página se convertirán en un factor de clasificación crucial, todo gracias a los elementos vitales de la web central recientemente introducidos y que se lanzarán próximamente de Google.

Con el lanzamiento anticipado de los principales elementos vitales de la web de Google a finales de este año, se ha vuelto cada vez más crítico para las empresas ponerse al día y optimizar sus sitios web de acuerdo con este factor de clasificación.

Si no sabe qué son los elementos clave de la web central, en qué consisten y qué puede hacer para optimizar los elementos clave de la web central de su sitio web, siga leyendo. Este blog es para ti.

En este blog, cubriremos la AZ de los principales elementos vitales de la web y lo ayudaremos a optimizar su página web para la misma. Vamos a empezar.

¿Qué es Core Web Vitals?

Fuente de la imagen: web.dev

Los principales elementos vitales de la web son señales de clasificación o un conjunto de criterios y métricas que utiliza Google para evaluar la experiencia general del usuario en su sitio web. Google core web vitals evalúa la velocidad, la capacidad de respuesta y la estabilidad visual de su sitio web junto con las señales existentes de la experiencia del usuario para evaluar la experiencia general de la página y la facilidad de uso.

Google planea lanzar esta nueva señal de clasificación en un intento por mejorar la forma en que estudia la experiencia general proporcionada por su página. Este motor de búsqueda tomará la culminación de estos datos para clasificar su sitio web en sus SERPS.

Cuanto más alto sea el ranking de su sitio web, mayor será su visibilidad. A medida que la experiencia de la página se convierte en un elemento de clasificación importante, es inevitable que le prestes atención. Para verificar los datos de Core Web Vitals de su sitio web, busque la sección "mejoras" de su cuenta de Google Search Console.

¿Por qué es importante Core Web Vitals?

Core Web Vitals son señales de clasificación que forman parte de la puntuación de "experiencia de página" de Google. Es importante porque Google está haciendo que la experiencia de la página sea un factor de clasificación oficial en Google.
Fuente de la imagen: backlinko.com

Aquí hay algunas razones por las que Core Web Vitals es importante y por qué debería ser importante para usted:

• Es una enorme oportunidad de clasificación para los próximos sitios web que pueden aprovechar al máximo este nuevo cambio en la evaluación de clasificación de Google desde el principio.
• En la guerra entre dos sitios web con una calidad de contenido y un ranking de sitios web similares, la experiencia de la página puede marcar la diferencia.
• Los datos fundamentales de la web se están volviendo más críticos ahora porque los sitios web que han disfrutado de clasificaciones inigualables en los SERP de Google ahora corren el riesgo de perder su clasificación actual frente a sitios web igualmente competitivos si no cumplen con los nuevos estándares de experiencia de página.

Considerándolo todo, es esencial recordar que el puntaje de experiencia de su página es solo uno de los aproximadamente 200 factores de clasificación que utiliza Google para clasificar los sitios web.

Para mantenerse a la vanguardia y disfrutar de una ventaja de clasificación competitiva sobre los demás, debe seguir optimizando su estrategia de SEO en la página y fuera de la página existente y, al mismo tiempo, optimizar los elementos vitales principales de su sitio web. Si bien no perderá su clasificación de la noche a la mañana, sin duda puede mejorar sus posibilidades de clasificación optimizando sus datos básicos de la web por adelantado.

Tres señales de Core Web Vitals:

Fuente de la imagen: web.dev

Las tres medidas principales de velocidad de página e interacción del usuario consideradas por Google en su evaluación principal de datos vitales web incluyen:

• Pintura con contenido más grande (LCP)
• Primera demora de entrada (FID)
• Cambio de diseño acumulativo (CLS)

Señal 1: pintura con contenido más grande (LCP): comprueba el rendimiento de carga

LCP es la primera métrica fundamental de la web que utiliza Google para calcular la puntuación de experiencia de su página. Mide el rendimiento de carga de su página web.

La pintura con contenido más grande o LCP se puede definir como la duración que tarda una página en su sitio web en cargarse desde la perspectiva de un usuario real. En palabras simples, el tiempo que tarda su usuario desde que hace clic en un enlace hasta que ve la mayoría del contenido de su sitio web en la pantalla se llama LCP.

LCP se centra en lo que realmente importa en términos de velocidad de la página, es decir, la capacidad del usuario para ver e interactuar con su página sin obstrucciones.

Para verificar su puntaje LCP, use Page Speed ​​Insights de Google. Todo lo que tienes que hacer es:

• Visite la herramienta de información sobre la velocidad de la página de Google .
• Introduzca su sitio web en el cuadro de búsqueda.
• Haga clic en Analizar.

Después de hacer clic en 'analizar', Google le mostrará un informe completo de su página actual. Revíselo para conocer las lagunas de su sitio web. Los resultados también le darán una idea del rendimiento de su página web en el mundo real en función de los datos del navegador Chrome.

También puede ver directamente sus datos LCP en la Consola de búsqueda de Google (GSC). Lo recomendamos sobre el uso de Page Speed ​​Insights de Google por las siguientes razones:

• En PageSpeed ​​Insights, obtendrá un informe de una sola página web que ingresó en la barra de búsqueda para su análisis. En la consola de búsqueda, verá los datos LCP de todo su sitio web.
• A través de la Consola de búsqueda de Google, obtendrá una lista completa de las URL de su sitio web que son buenas, malas o intermedias.
• Las pautas de LCP de Google clasifican el LCP de su sitio web como 'bueno', 'deficiente' y 'necesita mejorar'.

La medición LCP ideal es de 2,5 segundos o más rápida. Cuanto más rápido se cargue el contenido principal de su página, mejor será su puntaje LCP. Esto puede ser un desafío para usted si tiene un sitio web grande con páginas grandes y múltiples funciones.

Señal 2: Retraso de la primera entrada (FID): Comprueba la interactividad/capacidad de respuesta

El First Input Delay es el segundo núcleo web vital de Google. Mide la interactividad.

En términos simples, First Input Delay (FID) se refiere al tiempo que tarda una página en volverse interactiva. Se puede decir que mide la duración de una actividad en una página. Más específicamente, mide el tiempo que tardan los usuarios en hacer algo en su página.

La medida ideal de FID es inferior a 100 ms.

Estos son algunos ejemplos de interacciones en la página que se calculan para la puntuación FID:

• El tiempo que tarda un usuario en elegir una opción del menú.
• El tiempo que tarda un usuario en ingresar su correo electrónico en un campo.
• El tiempo que tarda un usuario en hacer clic en un enlace en la navegación del sitio.

Para los sitios web comerciales que recopilan datos de usuarios o solicitan detalles de inicio de sesión, la puntuación FID es increíblemente crucial.

Señal 3: Cambio de diseño acumulativo (CLS): Comprueba la estabilidad visual

Un cambio de diseño acumulativo (CLS) es una web fundamental que mide la estabilidad visual. Es una métrica que calcula todos los cambios de diseño que no son causados ​​por la interacción del usuario. En otras palabras, podemos decir que esta métrica tiene en cuenta la estabilidad visual de una página mientras se carga.

Si se mueven más elementos en su página mientras se carga la página, mayor será su CLS. Si se mueven menos elementos mientras se carga su página web, menor será su CLS.

Cuanto menor sea su CLS, mejor será el rendimiento de su puntaje de página.

Un puntaje CLS de menos de 0.1 se considera ideal para una página web, así que asegúrese de apuntar a esto mientras optimiza su sitio web para una experiencia de página óptima.

Cómo optimizar los tres Web Vitals (LCP, FID, CLS)

La optimización de los tres elementos fundamentales de la web es importante para mejorar el rendimiento de la página y la experiencia general de su página web. Aquí hay algunas maneras en que puede mejorarlos.
Cómo optimizar la pintura con contenido más grande (LCP):

Aquí hay una lista de lo que puede hacer para mejorar el LCP de su sitio web:

• Minimice su CSS: cuanto más pequeño sea el CSS, más rápido será su LCP.
• Elimine elementos de página grandes: Afortunadamente, Page Speed ​​Insights de Google le mostrará si hay un elemento en su sitio web que está ralentizando el LCP de su página. Una vez que identifique lo que es, puede resolverlo rápidamente. Por ejemplo, un análisis de la puntuación LCP de Techmagnate en Page Speed ​​Insights de Google muestra este elemento como defectuoso:
• Actualice su servidor web: con un mejor alojamiento, se obtienen velocidades de carga más rápidas (incluido LCP).
• Elimine los scripts de terceros innecesarios: evite los scripts de terceros tanto como pueda.
• Configure la carga diferida: la carga diferida significa que las imágenes se cargan solo cuando un usuario llega a ese punto en su página web que presenta una imagen. Al configurar la carga diferida, puede lograr LCP más rápido.

La ejecución de los consejos mencionados anteriormente puede ayudarlo a mejorar la perfección de LCP que se necesita para obtener una buena puntuación de LCP. Cuanto mejor sea su puntaje LCP, mejores serán su puntaje de experiencia de página y mejores posibilidades de clasificación. Así que optimice su LCP ahora si aún no lo ha hecho.

Cómo optimizar el retardo de la primera entrada (FID):

Estos son algunos pasos que puede seguir para mejorar las puntuaciones FID de su sitio:

• Minimice (o posponga) Javascript: Minimizar o posponer JS en su página puede ayudarlo a mejorar la velocidad de FID de su página web a medida que se reduce o elimina la necesidad de que su navegador cargue JS.
• Elimine las secuencias de comandos de terceros no críticas: las secuencias de comandos de terceros, como Google Analytics y los mapas de calor, pueden afectar negativamente a la FID y la velocidad de carga del contenido. Identifique los que no son cruciales para su sitio web y elimínelos si no son críticos para su página web.
• Mantenga bajos los recuentos de solicitudes y pequeños los tamaños de transferencia: Optimice el código para restringir el recuento de solicitudes y minimizar los tamaños de transferencia de archivos HTML, medios, imágenes, etc.

Cómo optimizar el cambio de diseño acumulativo (CLS):

Aquí hay algunas acciones simples que puede tomar para mejorar su CLS:

• Asigne a los elementos del anuncio un espacio reservado en su página web: esta sencilla tarea asegurará que su contenido permanezca donde debe estar. Las páginas web que no tienen un espacio publicitario designado tienden a estropear la estructura y el posicionamiento del contenido, a veces empujando hacia arriba y hacia abajo en la página, lo que resulta en un CLS alto y una mala puntuación de experiencia en la página.
• Agregue nuevos elementos de la interfaz de usuario debajo del pliegue: cuando un usuario navega por una página de su sitio web, espera que los elementos permanezcan donde están. Al agregar elementos de la interfaz de usuario, puede asegurarse de que esto suceda y que la estructura del contenido de la página no se vea afectada.
• Use dimensiones de atributo de tamaño establecido para medios: es importante usar una dimensión de atributo de tamaño establecido para medios como videos, imágenes, GIF, infografías u otros elementos de medios. Hacer esto te mostrará cuánto espacio ocupará ese elemento en esa página, lo que te ayudará a proteger tu página web de una pérdida de contenido sin precedentes.

Nuestros servicios de diseño y desarrollo de sitios web ayudan a optimizar el Core Web Vitals Score.

Cómo medir la puntuación de Web Vitals:

Ahora que sabe cuáles son los tres principales elementos vitales de la web, aquí hay algunas herramientas para ayudarlo a medirlos.

• Consola de búsqueda de Google: otra herramienta poderosa y extremadamente conveniente para analizar los datos vitales principales de su web es la Consola de búsqueda de Google. Viene con un informe central único de datos vitales web en la sección de mejoras que puede verificar cada vez que realiza una auditoría del sitio web. La mejor parte: en lugar de mostrar el rendimiento de la página de una sola página web, la consola de búsqueda le muestra todos los datos de rendimiento de la página web de una sola vez.
• PageSpeed ​​Insight: PageSpeed ​​Insight de Google es una poderosa herramienta que le muestra los puntos vitales principales de su página web junto con valiosos consejos sobre las mejoras que puede realizar.
• Lighthouse: Lighthouse es otra herramienta de Google que puede usar para medir sus principales datos vitales web. Anteriormente diseñado para auditar PWA, ahora se ha transformado en una potente herramienta para monitorear el rendimiento. Armado con funciones adicionales y controles de SEO, Lighthouse puede describirse adecuadamente como una herramienta potente para analizar la velocidad de su página web y los datos de experiencia de la página.
• GT Metrix: GT Metrix es un sitio web de prueba y monitoreo de rendimiento de sitios web. Es una herramienta gratuita que puede utilizar para evaluar el rendimiento de su LCP, TBT y CLS.

Cómo auditar Core Web Vitals utilizando Screaming Frog:

El concepto de auditar los datos vitales básicos de la web es relativamente nuevo. Para aquellos de ustedes que desean mantenerse preparados y optimizar los elementos vitales principales de su sitio web, usar una herramienta como Screaming Frog puede ayudar, especialmente si ya tiene una suscripción a su membresía premium.

Esto es lo que necesitará:

• Una versión paga de Screaming Frog.
• Una clave API de PageSpeed ​​Insights.
• El dominio de los sitios web que desea auditar.

Vamos a empezar.

Paso 1: conecte la clave API de PageSpeed ​​Insights a Screaming Frog

El paso 1 para usar Screaming Frog para optimizar sus principales datos web incluye conectar su clave API de PageSpeed ​​Insights con él. Cuando los conecta, puede acceder a los datos y recomendaciones de PageSpeed ​​Insights página por página en su panel de control de Screaming Frog.

Estos son los pasos que debe seguir:

• Abra Screaming Frog → Configuración → Acceso API → PageSpeed ​​Insights.
• Pague su clave API de PageSpeed ​​Insights en el cuadro 'Clave secreta'.
• Haga clic en ' Conectar '.
• Después de hacer clic en 'Conectar', haga clic en ' Métricas '.
• Elija las métricas que desea auditar y haga clic en " Aceptar ".

Paso 2: rastrear el sitio web.

El siguiente paso incluye rastrear su sitio web.

Todo lo que tiene que hacer es ingresar el nombre de dominio del sitio web que desea rastrear en el cuadro que dice: 'Ingresar URL para rastrear'. Después de realizar la entrada, espere a que se cargue la barra de progreso 'Rastrear' y 'API'.

Una vez que se cargan al 100%, puede analizar sus datos.

Paso 3: Informe el problema a las autoridades pertinentes.

Después de que la herramienta cargue sus datos, obtendrá una compilación de todas las páginas web de su sitio web. Aquí, debe analizar la cantidad de páginas web que fallan en los umbrales mínimos de Core Web Vitals en términos de cifras porcentuales.

Estos son algunos pasos que puede seguir:

• Haga clic en en la barra de navegación superior.
• Haga clic en Paginación .
• Haz clic en Velocidad de página en el menú desplegable.
• Haga clic en Exportar .

Después de exportar los datos, complete las siguientes columnas:

• Mayor tiempo de pintura con contenido (ms): coloque un filtro para encontrar páginas con LCP de 4000 ms o más.
• Tiempo total de bloqueo (ms): pon un filtro para encontrar páginas con TBT de 300 ms o más.
• Cambio de diseño acumulativo: coloque un filtro para encontrar páginas con 0.25 CLS o más.

En base a estos datos, puede crear un informe y enviarlo a un cliente. Si está realizando esta auditoría para sus requisitos internos de optimización de la experiencia de la página, puede enviar estos datos al equipo correspondiente y ellos pueden ejecutar las optimizaciones de la página en consecuencia.

Paso 4: informe de problemas relacionados con la página con recomendaciones.

Ahora, este es el paso donde se pone interesante. Ahora conoce el porcentaje de páginas de su sitio web que no cumplen con los estándares mínimos de Core Google Web Vitals. ¿Qué sigue?

Haga una compilación ordenada de los problemas relevantes en función de la métrica a la que desea apuntar. Esto es lo que puede hacer:

• En el lado derecho de la pestaña "Descripción general", desplácese hacia abajo hasta PageSpeed.
• Aquí encontrará problemas y recomendaciones relacionados con la velocidad de la página de su sitio web, incluidas posibles soluciones para mejorar sus principales indicadores web.
• El menú desplegable de la velocidad de la página incluirá varias métricas como:
  • Elimine los recursos que bloquean el procesamiento (impactos LCP)
  • Minimizar CSS (impactos LCP)
  • Minimizar JavaScript (impacta FID)
  • Eliminar CSS no utilizado (impacta LCP)
  • Javascript no utilizado eliminado (impacta FID)
  • (y muchos más)
• Haga clic en un problema para ver la cantidad de páginas afectadas y exporte estos datos a su hoja de trabajo. Hacer esto lo ayudará a exportar todas las URL con los problemas relevantes.
• Según los datos, puede tomar una decisión sobre la eliminación o el aplazamiento de estos elementos de su página web.

Lectura adicional: ¿Qué es el SEO de velocidad de página?

Paso 5: Post-auditoría y optimización, rastrear el sitio nuevamente y comparar.

Una vez que haya identificado los factores que afectan a su principal Google Web Vitals, puede realizar las optimizaciones. Después de la optimización, su trabajo consiste en rastrear su sitio nuevamente para evaluar los resultados.

Compare el porcentaje de páginas web que no cumplen con los requisitos mínimos básicos de web vitals después de la optimización con los números antes de la optimización.

Otros factores de experiencia de página que debe considerar:

Aquí hay una lista de los principales factores adicionales que Google considera necesarios para la experiencia del usuario:

• Navegación segura: si su sitio web no permite una navegación segura, se verá como una violación de los estándares de experiencia de la página y obtendrá una puntuación de experiencia de página baja. Así que asegúrese de que su sitio web no contenga contenido malicioso o engañoso, como malware. Puede verificar los estándares de cumplimiento de seguridad de su sitio web en el Informe de problemas de seguridad de Google.
• HTTPS: es más probable que los sitios web que comienzan con HTTPS tengan una conexión de sitio segura. Si no tiene un sitio web que comience con HTTPS, aprenda cómo asegurar su sitio web con HTTPS aquí.
• Optimización para dispositivos móviles: compruebe si su página web es compatible con dispositivos móviles utilizando la prueba de compatibilidad con dispositivos móviles de Google. Si su página web no aparece como "compatible con dispositivos móviles" en esta evaluación rápida, ejecute estrategias para optimizar su sitio web para teléfonos móviles y tabletas. Entre otras cosas, puede ayudar mejorar la UX y la UI y perfeccionar la navegación fuera del lienzo.
• Sin anuncios intersticiales intrusivos: el usuario debe poder acceder fácilmente al contenido de su página web. La falta de ella puede llevarte a una puntuación de experiencia de página baja. Estas son las principales cosas que debe evitar para que el contenido de la página web sea más accesible para sus usuarios:
  • Evite el uso de ventanas emergentes que bloquean la mayoría del contenido de su sitio web.
  • Evite mostrar un intersticial independiente que cubra toda la pantalla. Esto es intrusivo ya que un usuario tiene que descartarlo antes de poder acceder al contenido principal.

Conclusión:

Google está listo para implementar web vitals centrales como una señal de clasificación clave en mayo de 2021. La necesidad del momento es que las empresas optimicen sus sitios web para este criterio de clasificación clave con anticipación.

En este blog, hemos ilustrado los pasos necesarios que puede seguir para mejorar sus indicadores web básicos. Hemos discutido qué es un core web vital, las tres métricas principales para core web vitals y qué puede hacer para optimizar su página web para obtener una buena puntuación de SEO de core web vitals.

También hemos esbozado un truco rápido para analizar la experiencia de la página para aquellos que usan Screaming Frog para la auditoría del sitio web. Esperamos que la información que hemos proporcionado aquí haya ayudado. Implementarlos en la estrategia de optimización de su sitio web para mantener su clasificación en Google.

Háganos saber en la sección de comentarios si tiene alguna duda o consulta.

Nos encantaría saber de usted.