¿Importan los Core Web Vitals? ¿Qué hacen?

Supongamos que está navegando por la web en busca de información sobre un producto o servicio. Abres una página web, pero tarda años en cargarse. Cuando finalmente se carga, intenta hacer clic en un botón, pero el sitio web no responde de inmediato.

Y justo cuando pensaba que no podía empeorar, la información en el sitio web comienza a cambiar inesperadamente, lo que dificulta leer o hacer clic en cualquier cosa.

Parece una experiencia frustrante, ¿no?

Ese es exactamente el tipo de experiencia de usuario horrible que Google quiere evitar con Core Web Vitals.

Core Web Vitals son tres indicadores que Google utiliza para evaluar la velocidad de carga, la capacidad de respuesta y la estabilidad visual de un sitio web. En otras palabras, ayudan a determinar si un sitio web ofrece una experiencia de usuario positiva o negativa.

Entonces, ¿por qué son importantes estos Core Web Vitals?

Google tiene como objetivo garantizar que los sitios web que sugiere en sus resultados de búsqueda proporcionen una experiencia de usuario agradable. Después de todo, si un sitio web es lento, no responde y gráficamente inestable, no es probable que permanezca allí por mucho tiempo.

Es por eso que los sitios web con calificaciones más altas de Core Web Vitals pueden aparecer más arriba en los resultados de búsqueda de Google, lo que les da una ventaja para ganar más visitantes y clientes potenciales.

Discutiremos cuáles son los elementos básicos de la web.

¿Los core web vitals son importantes y tienen un impacto en la experiencia del usuario y la búsqueda?

¡Empecemos!

¿Qué son los elementos básicos de la Web?

Core Web Vitals es un conjunto de criterios creados por Google para evaluar la eficacia con la que un sitio web funciona y ofrece una experiencia de usuario positiva.

Piense en ello como una boleta de calificaciones de un sitio web. Analiza los factores esenciales para todos los que visitan un sitio web.

Los tres elementos básicos de la web son:

• Pintura con mayor contenido:Mide la rapidez con la que se carga el contenido principal de las páginas de un sitio web. LCP debe durar menos de 2,5 segundos para garantizar una experiencia de usuario positiva. A nadie le encanta mirar una pantalla en blanco, esperando que ocurra algo.

• Cambio de diseño acumulativo:Esto analiza la frecuencia con la que el diseño y la información de una página cambian inesperadamente mientras aún está cargada. CLS debe ser inferior a 0,1 para ofrecer una buena experiencia de usuario. El contenido que se mueve dificulta la lectura y es posible que haga clic por error en el elemento incorrecto.

• Retraso de la primera entrada:Esta métrica mide la rapidez con la que responde un sitio web cuando hace clic en él o interactúa con él. Los retrasos y la latencia pueden estar empeorando bastante. El FID debe ser inferior a 100 milisegundos para una experiencia de usuario óptima.

Google ha revelado que una cuarta métrica, Interacción con Next Paint (INP), reemplazaría a FID como parte de Core Web Vitals en marzo de 2024. El INP debería ser de 200 milisegundos o menos para garantizar una experiencia rápida y receptiva.

Entonces, en términos simples, Core Web Vitals es la forma que tiene Google de medir si un sitio web se carga rápidamente, responde a las interacciones del usuario y evita cambios inesperados en el diseño.

¿Por qué son importantes los Core Web Vitals?

A partir de junio de 2021, Google considera la experiencia de la página como un factor de clasificación oficial. Page Experience es un conjunto de elementos que Google considera importantes para brindar una excelente experiencia general al consumidor. Estos incluyen lo siguiente:

• Usando HTTPS para servir su página
• Compatibilidad con dispositivos móviles
• La ausencia de anuncios intersticiales que distraigan (ventanas emergentes molestas)
• Navegación segura

Core Web Vitals son importantes porque afectan directamente la participación del usuario, la satisfacción y las tasas de conversión del sitio web. Si un sitio tiene un rendimiento deficiente en Core Web Vitals, es probable que los usuarios tengan una experiencia negativa.

Aquí hay algunas razones importantes por las que debería preocuparse por Core Web Vitals:

a. Usuarios satisfechos

Los usuarios están más satisfechos cuando el sitio funciona sin problemas. Los buenos indicadores de Core Web Vitals generan usuarios satisfechos.

b. Menor tasa de rebote

Las páginas con un LCP rápido y un CLS bajo mantienen a los usuarios en la página durante períodos más prolongados antes de que reboten.

do. Conversiones más altas

Un sitio responsivo con un FID sólido aumenta las posibilidades de que los usuarios completen una transacción o se registren en un servicio.

d. SEO mejorado

Las páginas que brindan a los usuarios una experiencia agradable tienden atener una clasificación más alta en los resultados de búsqueda. Core Web Vitals son una métrica de clasificación.

mi. Mayores ingresos

Existe un vínculo directo entre Core Web Vitals mejorado y mayores ingresos, impulsados ​​por mayores tasas de participación y conversión. Google también incluye Core Web Vitals en sus factores de clasificación.

Como resultado, optimizar estas métricas puede ayudar a que su sitio web tenga una clasificación más alta en los resultados de búsqueda y atraiga más visitantes.

¿Cuáles son los criterios recomendados para las métricas de Core Web Vitals?

a. Pintura con contenido más grande

Largest Contentful Paint (LCP) es una de las tres métricas clave de Web Vitals que evalúan la experiencia del usuario de un sitio web. LCP mide particularmente qué tan pronto se carga el contenido principal de una página web y se vuelve accesible para el usuario.

Simplemente, LCP evalúa cuánto tiempo tarda en cargarse y mostrarse el elemento visual más grande y esencial del sitio web. Puede ser una imagen grande, un reproductor de video, un bloque de texto o cualquier otra información importante que los espectadores esperan ver primero cuando visitan esa página.

Un buen tiempo de LCP es de 2,5 segundos o menos. Esto significa que cuando un usuario visita el sitio web, la imagen principal, el vídeo o el bloque de texto importante se carga casi instantáneamente. Un LCP de 2,6 a 4 segundos indica que la velocidad de su sitio necesita mejorar.

Cualquier duración superior a 4 segundos se considera LCP incorrecto. Porque puede molestar a los visitantes y hacer que abandonen su sitio.

Desde un punto de vista tecnológico, la optimización de LCP puede incluir tácticas como:

• Optimización y reducción de archivos multimedia de gran tamaño
• Priorizar la carga de recursos clave
• Usar técnicas de rendimiento, como la división de código
• Uso eficaz del almacenamiento en caché del navegador

b. Cambio de diseño acumulativo

Cumulative Layout Shift (CLS) es otra métrica de Core Web Vitals introducida por Google. Evalúa la estabilidad visual de un sitio web.

Cumulative Layout Shift (CLS) es una métrica consistente de Core Web Vitals. Es una métrica esencial centrada en el usuario para analizar la estabilidad visual, ya que mide la frecuencia con la que los usuarios experimentan cambios inesperados en el diseño. Un CLS bajo ayuda a garantizar que la página sea agradable.

Los cambios de diseño inesperados pueden interrumpir la experiencia del usuario de diversas maneras, incluso hacer que pierda su lugar mientras lee si el texto salta inesperadamente o que haga clic en el enlace o botón incorrecto. En determinadas circunstancias, esto puede causar daños considerables.

Una excelente puntuación CLS de 0,1 o menos indica que el diseño de su sitio web es bastante estable. Esto permite que las personas vean fácilmente su contenido sin interrupciones.

Una puntuación CLS de 0,1 a 0,25 indica que la estabilidad visual de su sitio web necesita mejorar. Hay suficiente movimiento para ser evidente para los usuarios.

Una mala puntuación CLS de más de 0,25 indica que los elementos de su página se mueven mucho. Los usuarios pueden notar cambios repentinos, como texto o botones en movimiento. Esto es perjudicial para su experiencia.

do. Retraso de la primera entrada

El retardo de la primera entrada (FID) es la tercera métrica en Core Web Vitals de Google. Evalúa la capacidad de respuesta de un sitio web a las interacciones de los usuarios. FID mide la rapidez con la que un sitio web responde cuando un usuario interactúa con él por primera vez.

Ejemplos de interacción incluyen:

• Seleccionar un elemento de menú en un menú desplegable
• Hacer clic en un enlace desde la navegación de su sitio
• Ingresar su dirección de correo electrónico en un campo de formulario
• Abrir el “menú acordeón” en un dispositivo móvil

Google valora el FID porque refleja la facilidad con la que los clientes del mundo real pueden interactuar con su sitio web. El FID debe ser inferior a 100 milisegundos para obtener la mejor experiencia de usuario.

d. Interacción con la siguiente pintura

Interaction to Next Paint (INP) es la medida más reciente de Core Web Vitals, sucediendo al First Input Delay (FID) el 12 de marzo de 2024. Representa la rapidez con la que una página reacciona a las interacciones y se mide en milisegundos.

Vale la pena señalar que INP mide la rapidez con la que responde una página web durante la interacción del usuario. FID solo rastreó el tiempo de respuesta del primer contacto del usuario con cualquier elemento del sitio.

Un buen INP es de 200 milisegundos o menos. Un INP entre 200 y 500 milisegundos indica que es necesario mejorar la interacción de su sitio.

Un INP de más de 500 milisegundos representa una experiencia interactiva horrible para sus usuarios. Esto implica retrasos y retrasos obvios en la respuesta a las aportaciones de los usuarios.

¿Cómo comprobar el rendimiento de Core Web Vitals de su sitio?

Los CWV se pueden verificar utilizando una variedad de herramientas. Todas las ofertas directamente de Google se enumeran a continuación:

El informe Chrome UX (CrUX) proporciona datos de campo de los usuarios de Chrome, lo que permite a los administradores del sitio aprendercómo interactúan las personas reales con sus sitios web.

Faro de Googlees una aplicación gratuita que genera mediciones de laboratorio para CWV. Proporciona datos útiles sobre rendimiento, SEO y accesibilidad, entre otras cosas.

Google PageSpeed ​​Insights combina las funciones de CrUX y Lighthouse, proporcionando datos de campo y de laboratorio sobre CWV y otras métricas web. PageSpeed ​​Insights permite a los usuarios evaluar el rendimiento de los sitios web, sean o no de su propiedad. Este es un ejemplo de un informe de PageSpeed ​​Insights.

Google Search Console se basa en datos de campo CrUX y proporciona estadísticas de rendimiento de CWV por URL o conjunto de URL.

Revisemos los elementos básicos de la web utilizando una de las herramientas:

a. Estadísticas de PageSpeed ​​de Google

Google PageSpeed ​​Insights (PSI) es una herramienta gratuita para evaluar el rendimiento de una única página web en dispositivos móviles y de escritorio.

También ofrece formas de hacer que su página sea más rápida y sencilla de usar. Para medir el rendimiento de Core Web Vitals de una página, abra PageSpeed ​​Insights, ingrese la URL que desea examinar y haga clic en "Analizar".

Cuando finalice su informe, recibirá un desglose completo de su desempeño en muchos parámetros.

La puntuación de “Rendimiento” va de 0 a 100 y se basa en las siguientes métricas:

• Primera pintura con contenido
• Índice de velocidad
• Pintura con contenido más grande
• Tiempo total de bloqueo
• Cambio de diseño acumulativo

Sus hallazgos de Core Web Vitals se ven así:

Desplácese hacia abajo hasta la sección "Diagnóstico" para obtener una lista de cosas que puede hacer para mejorar el rendimiento de su sitio.

Tenga en cuenta que el informe Core Web Vitals no pretende ayudarle a determinar el estado de una página en particular. En cambio, le permite evaluar el estado general de su sitio web.

¿Cómo mejorar el rendimiento de Core Web Vitals?

a. Mejora del PCC

Utilice una red de entrega de contenido (CDN):Las CDN almacenan material en caché en varios lugares del mundo, lo que permite que el contenido llegue a los consumidores más rápidamente.

Optimizar imágenes:Las imágenes tienden a ser el elemento más grande de una página. Reducir el tamaño de un archivo de imagen puede acelerar su tiempo de carga.

Otra opción para aumentar su puntuación LCP es mejorar el alojamiento de su sitio.

El alojamiento compartido (donde se alojan varios sitios en el mismo servidor) puede ser más lento porque se comparten recursos, como la memoria y la potencia de procesamiento. Como resultado, cuando otros sitios tienen aumentos de tráfico, su sitio puede ralentizarse.

Para resolver esto, considere cambiar a un mejor plan de alojamiento o a un proveedor de alojamiento alternativo. Por ejemplo, alojamiento dedicado (donde su sitio tiene su propio servidor) o alojamiento en la nube (donde se utilizan varios servidores para proporcionar un rendimiento más consistente).

b. Mejorando CLS

1. Minimizar los elementos de la página de terceros:Los elementos de terceros en una página se cargan desde lugares diferentes al resto de la página. Como resultado, es posible que se carguen en momentos ligeramente diferentes, lo que provoca que el diseño de la página cambie. El uso de menos elementos de terceros reduce la cantidad de cambios de dise��o.

2. Reservar espacio para contenido incrustado:Muchas funciones de terceros, como los anuncios, son necesarias para el funcionamiento o la estrategia económica de un sitio web y no se pueden eliminar. Los desarrolladores pueden reservar espacio en la página para que estos componentes se carguen antes de que el navegador recupere el elemento real.

3. Asegúrese de que las fotos se carguen en su tamaño óptimo:Este es un enfoque ligeramente diferente al de optimizar imágenes en general. Las computadoras de escritorio, las tabletas y los teléfonos inteligentes requieren gráficos en diferentes tamaños debido al tamaño de la pantalla. Si un navegador carga primero la imagen grande optimizada para escritorio y luego necesita descargar la imagen optimizada para dispositivos móviles porque el dispositivo es un teléfono inteligente, el contenido de la página puede cambiar a medida que se carga la imagen de diferentes tamaños.

4. Incluya el alto y ancho de fotos y videos:Los parámetros de alto y ancho indican qué tan grande será una imagen, lo que permite a los navegadores reservar ese espacio antes de que se cargue la imagen o el video. Nuestra página de vídeo HTML5 contiene más información sobre cómo lograr esto con vídeo.

5. Utilice cuadros de relación de aspecto CSS:Los desarrolladores de CSS pueden utilizar una variedad de estrategias para ahorrar espacio para un elemento de página aprovechando las relaciones de aspecto.

do. Mejorando el INP

Uno de los problemas más importantes que puede degradar su interacción con Next Paint es la presencia de varios scripts o códigos JavaScript enormes en su sitio.

JavaScript es un lenguaje informático que crea elementos dinámicos de sitios web, como menús, formularios y animaciones. Sin embargo, un código JavaScript pesado o complejo puede ralentizar el tiempo de respuesta de su sitio web a las interacciones de los usuarios.

Entonces,

• Reducir elnúmero de funciones de JavaScript:Las páginas web dinámicas y con mucho código pueden provocar retrasos en la entrada porque el navegador necesita cargar todoel código antes de ejecutarlo. La minificación de JavaScript puede ayudar a acelerar este proceso.

• Crear páginas web HTML estáticas:Las páginas HTML estáticas se cargan mucho más rápido que las dinámicas, especialmente cuando se entregan a través de una CDN. Conozca los generadores de sitios estáticos, o Jamstack, una estrategia de desarrollo centrada en contenido estático.

• Elimine cualquier herramienta y script de terceros no deseados:Cargar herramientas adicionales en su sitio web puede ralentizarlo. Reduzca la cantidad de herramientas de terceros en un sitio web para aumentar la FID y el rendimiento general del sitio web.

Conclusión

Entonces, ¿importan los Core Web Vitals?

Core Web Vitals es absolutamente importante cuando se trata de crear una experiencia de primera clase y sin complicaciones para todos los que visitan su sitio web

Si bien optimizar estos aspectos vitales requiere algunas habilidades dedicadas por parte de sus desarrolladores web, la recompensa es enorme: crear excelentes experiencias digitales que mantengan a los clientes satisfechos y que regresen por más. Dominar esos Core Web Vitals en 2024 y más allá será fundamental para el éxito en línea.

Lea más enVelocidad del enlace.

Preguntas frecuentes