Cómo corregir Google Core Web Vitals en un sitio web WordPress

Con vistas a mejorar la posición en las búsquedasdisminuir las tasas de rebote y aumentar las conversiones en su sitio web? Hay un factor común que deberá tener en cuenta. Se trata de la experiencia del usuario (UX).

La experiencia del usuario (UX) siempre ha sido importante para el marketing en línea, pero ahora que Google's Core Web Vitals está disponible, es doblemente importante.

Core Web Vitals de Google facilita a los propietarios de sitios web la tarea de medir y mejorar la UX. También son ahora un factor de clasificación en las búsquedas, por lo que es importante realizar una evaluación de Core Web Vitals de su sitio web y solucionar rápidamente cualquier problema destacado.

En esta guía le ayudaremos a conseguirlo.

Le explicaremos qué son las Core Web Vitals, cómo medirlas y le mostraremos algunas formas sencillas de optimizar su sitio web para ellas.

¿Qué son las Google Core Web Vitals?

Cuando acudes al médico, éste comprueba tus constantes vitales. Se trata de un grupo de indicadores importantes que muestran el funcionamiento de su organismo. Lo mismo ocurre con Core Web Vitals.

Principales datos vitales de la web de Google son un conjunto de métricas clave que pueden utilizarse para evaluar la eficacia de su sitio web a la hora de ofrecer una gran experiencia de usuario, con énfasis en la velocidad de carga.

En la actualidad, tres métricas de rendimiento principales conforman las "Core Web Vitals" de Google. Aunque hay varios factores que contribuyen a los valores vitales de la web en general, Google considera que estos tres son especialmente importantes.

Lo son:

• Pintura de mayor contenido (LCP)
• Retardo de la primera entrada (FID)
• Desplazamiento de diseño acumulativo (CLS)

Estos términos pueden parecer demasiado técnicos, pero todos son bastante fáciles de entender. Aquí tienes un desglose de lo que significa cada uno:

El mayor contenido de pintura

LCP es una medida de la rapidez con la que el contenido más grande de la parte del sitio web que aparece por encima del pliegue (la parte del sitio web que se ve inmediatamente en la pantalla), se hace visible para los usuarios.

Para desglosarlo un poco más, la aparición de elementos en una pantalla es lo que se denomina una pintura. Puede ser un vídeo, una imagen o simplemente un texto.

LCP se utiliza para evaluar la velocidad de carga desde la perspectiva del usuario. Aunque su sitio web se cargue rápidamente en general, si el contenido más voluminoso tarda en hacerse visible, el usuario puede percibir que el sitio es lento.

Lo ideal es que el elemento más grande de su sitio web se cargue en 2,5 segundos.

Primer retardo de entrada

FID es una medida de la rapidez con la que su sitio web comienza a procesar eventos una vez que un usuario realiza una acción o interactúa con su sitio web. Esta interacción puede ser cualquier cosa, desde hacer clic en un enlace hasta rellenar un formulario de contacto.

Cuando un usuario hace clic en un enlace, por ejemplo, el tiempo que transcurre desde el momento del clic hasta que el navegador inicia una respuesta se denomina tiempo de respuesta. Primer retardo de entrada.

En el mejor de los casos, este retraso debería ser de 100 milisegundos o menos. Si dura más de 300 milisegundos, el FID es deficiente y necesita mejoras significativas.

Desplazamiento de diseño acumulativo

Desplazamiento de diseño acumulativo (CLS) es una medida de la estabilidad visual. Cuando se cargan las páginas web, varios elementos pueden desplazarse al añadirse otros nuevos a la página. Estos cambios repentinos de diseño pueden resultar desconcertantes para los usuarios.

Por ejemplo, debido a un cambio de diseño, un usuario puede intentar hacer clic en un enlace de su sitio web pero acabar haciendo clic en otro elemento de la página.

CLS se calcula multiplicando la porción de espacio desplazado por la distancia que ha recorrido el elemento desplazado. Lo ideal es que la puntuación de CLS sea inferior a 0,1, y deberías empezar a preocuparte si es superior a 0,25.

¿Por qué son importantes las Core Web Vitals?

Desde julio de 2021, Google ha estado utilizando Core Web Vitals como factor de clasificación en las búsquedas como parte de su nuevo Actualización del algoritmo de experiencia de página.

Core Web Vitals influye ahora en los resultados de búsqueda orgánica tanto en móviles como en ordenadores de sobremesa, y también influye en si su sitio aparece o no en el carrusel de "Top Stories".

Al incluir estas señales relacionadas con la experiencia del usuario en los factores de clasificación de las búsquedas, Google está fomentando una mayor calidad de los resultados de las búsquedas que da prioridad a los usuarios finales.

A pesar de lo esenciales que son estas señales para el éxito de un sitio, muchos sitios web no están optimizados para Core Web Vitals.

Por ejemplo, un estudio realizado por Searchmetrics reveló que nada menos que 96% de los dos millones de sitios web más visitados no superaron las pruebas de Core Web Vitals.

Si bien esta estadística es chocante, también significa que existe la oportunidad de avanzar en el juego de la SEO simplemente optimizar su sitio web para Google Core Web Vitals.

Cómo comprobar las Google Core Web Vitals de su sitio web

Las Core Web Vitals son tan fáciles de medir como de entender, y existen varias herramientas que ayudan a su medición.

Aquí se explican dos de las mejores:

1. PageSpeed Insights

Información sobre la velocidad de la página es una de las herramientas más sencillas que puede utilizar para evaluar las constantes vitales de su sitio web. Todo lo que tiene que hacer es pegar la URL de su sitio web y hacer clic en Analizar.

Después de pulsar el botón Analizar los datos vitales de su sitio web se mostrarán en la sección Datos de campo sección.

En la parte superior del Datos de campo verá una declaración en la que se indica si su sitio web ha superado o no el campo Core Web Vitals basándose en datos reales del mes pasado.

Es importante tener en cuenta que esta herramienta sólo permite evaluar páginas individuales.

Si la URL que ha insertado es la raíz de su sitio web, verá un icono Mostrar resumen de origen justo debajo de Datos de campo sección. Haciendo clic en ella podrá ver la puntuación total de todas las páginas servidas desde este origen.

Lo mejor de PageSpeed Insights es que, además del diagnóstico, ofrece recomendaciones sobre cómo mejorar la velocidad y el rendimiento de su sitio.

2. Consola de búsqueda de Google

Para una evaluación aún más detallada, puede encontrar un informe Core Web Vitals en su Consola de búsqueda de Google salpicadero - siempre que haya verificado la propiedad del sitio.

Para acceder al informe, desplácese hacia abajo y vaya a la sección Mejoras y haga clic en Core Web Vitals.

Esto le llevará a un informe detallado que muestra cuántas URLs de su sitio tienen buenas puntuaciones, y le dirá qué páginas funcionan mal y necesitan mejoras.

Cómo mejorar las constantes vitales de su sitio web

Ahora que sabe exactamente qué son las Vitales Web Básicas, por qué son importantes y cómo medirlas, podemos hablar de algunas formas de mejorarlas.

Para que te quedes tranquilo, no hace falta ser un gurú de la tecnología para optimizar las Core Web Vitals de tu sitio.

A continuación, analizamos algunas formas sencillas de mejorar cada una de las métricas relevantes, junto con algunos consejos adicionales.

1. Cómo mejorar la puntuación de la pintura de mayor contenido (LCP)

Si la mayor parte del contenido tarda más de 2,5 segundos en cargarse, su sitio puede parecer lento a los usuarios, lo que puede provocar que lo abandonen. Solucionar este problema es crucial para mejorar la experiencia del usuario.

Aquí tienes algunas cosas que puedes hacer:

Encuentre y optimice el contenido más importante de su sitio web:

Como se ha mencionado anteriormente, su LCP depende de la pieza de contenido más grande de su sitio. Puede ser una imagen o un texto.

Dependiendo del tipo de contenido, hay varias formas de optimizarlo:

Vídeo: Los vídeos son, por naturaleza, contenidos pesados. Los iFrames son códigos HTML que te permiten mostrar contenidos pesados, como vídeos de fuentes externas como YouTube, sin tener que alojarlos en tu servidor web. Independientemente del tiempo que tarde en cargarse el vídeo dentro del iFrame, LCP no se verá afectado si el propio iFrame se carga rápidamente.

Considere comprar un servicio de alojamiento de vídeo si quieres gestionar tus vídeos.

Imagen: Un puede que la imagen tarde demasiado en cargarse si es demasiado pesada o sus dimensiones son demasiado grandes. Si una imagen es demasiado grande, considere la posibilidad de sustituirla. O utilice un redimensionador de imágenes como Redimensionador de imágenes gratuito de Adobe para comprimir la imagen sin afectar a su calidad.

Texto: El texto no suele ser un problema cuando se trata de LCP, pero los bloques de texto extraordinariamente largos pueden ser problemáticos ocasionalmente. En estos casos, puede ser útil dividir el texto en párrafos más pequeños.

Utilice una red de distribución de contenidos (CDN)

Una CDN es una red de servidores de terceros situados en distintos lugares del mundo. Cuando utiliza una CDN, los visitantes de su sitio web pueden ver el contenido de su sitio más rápido porque accederán a este contenido desde servidores que están más cerca de ellos.

Existen varios Servicios CDN que puede utilizar. Si desea hacer una elección rápida, Cloudflare CDN es una gran opción que puedes utilizar gratuitamente.

Activar la carga lenta

Con la carga lenta, las imágenes sólo se descargan cuando el usuario se desplaza hasta ellas. Si tu sitio tiene muchas imágenes, la carga lenta puede ayudar a mejorar tu LCP evitando que se carguen varias imágenes a la vez.

Afortunadamente, la última versión de WordPress, WordPress 5.8 viene con la función lazy-loading por defecto, por lo que basta con actualizar el software y todo irá bien.

2. Cómo mejorar la puntuación del primer retraso de entrada (FID)

Un FID deficiente significa que los usuarios se enfrentan a un retraso de más de 300 ms cuando intentan interactuar con su sitio. La frustración que esto provoca puede conducir a una alta tasa de rebote.

He aquí algunas formas de solucionarlo:

Optimizar JavaScript

JavaScript es uno de los principales lenguajes de programación utilizados para crear sitios web. Aunque se pueden hacer muchas cosas con él, se utiliza principalmente para añadir elementos visuales dinámicos a las páginas web. Por ejemplo deslizadoreselementos móviles, etc.

Si el FID de su sitio web es deficiente, a menudo se debe a que hay mucho JavaScript que los navegadores tienen que tratar después de que se cargue el contenido de su página. Así que cuando los usuarios intentan interactuar con su sitio web, el navegador está demasiado ocupado con el JavaScript para responder a sus comandos.

Para evitar que esto ocurra, hay algunas cosas que puede hacer.

En primer lugar, puede aplazar el JavaScript que bloquea la renderización. Esto hace que los scripts sean menos prioritarios, impidiendo que los navegadores los ejecuten inmediatamente. Sólo se cargan después de que se hayan renderizado otros recursos más importantes.

De este modo, los visitantes pueden interactuar con su sitio web sin tener que esperar a que se carguen estas secuencias de comandos. Plugins como Cohete WP y Async JavaScript son excelentes para aplazar JavaScript.

También puede minificar archivos JavaScript.

Minificar significa tomar los archivos y eliminar todas las partes innecesarias, como saltos de línea, sangrías y comentarios, para reducir su tamaño.

Herramientas de minificación como Compilador de cierres y WP Rocket puede ayudarle a conseguirlo.

Eliminar scripts de terceros no utilizados

Para que herramientas como plugins y temas funcionen, cargan scripts en su sitio. Aunque algunos de esos scripts desempeñan papeles importantes, otros no contribuyen a su funcionalidad. Sólo ocupan espacio y dificultan el rendimiento.

Estos guiones pueden eliminarse.

Para encontrarlos, puede utilizar PageSpeed Insights. La 'Reducir el JavaScript no utilizado' le dará una lista de scripts no utilizados que puede eliminar para mejorar el tiempo de respuesta.

Además, puede utilizar una herramienta como Perfmatters para activar los plugins sólo cuando sea necesario.

Considere el uso de un plugin de caché

Cada vez que un usuario visita su sitio, todos los elementos del mismo deben transmitirse al navegador del usuario para que éste pueda verlo. Plugins de caché como WP Super Cache ayudan a almacenar temporalmente los datos de su sitio web para poder recuperarlos y transmitirlos más rápidamente.

3. Cómo mejorar la puntuación del desplazamiento de disposición acumulativo (CLS)

El CLS de su sitio debe ser inferior a 0,1. Si no es así, es probable que los usuarios se desorienten o simplemente se molesten por problemas como hacer clic en el enlace equivocado.

Varios factores afectan a la CLS. Uno de ellos es la velocidad general.

Si algunos elementos de su sitio se cargan lentamente, puede haber cambios bruscos en la posición de otros elementos cuando se cargan completamente.

En ese caso, las tácticas descritas anteriormente para mejorar la LCP y la FID podrían ser útiles.

Aquí tiene otras formas de mejorar el CLS de su sitio web:

Especifique las dimensiones de la imagen

Siempre debe especificar las dimensiones de las imágenes de su sitio. Esto indica a los navegadores cuánto espacio deben ocupar en la página y puede evitar que se desplacen.

Cuando se añaden imágenes a través del editor de WordPress, los atributos de altura y anchura se especifican automáticamente. Pero si alguna vez añades imágenes manualmente mediante código, asegúrate de especificar las dimensiones para evitar desplazamientos del diseño.

Una forma sencilla de hacerlo es utilizar un plugin como Especifique las dimensiones de imagen que faltanque escaneará automáticamente sus imágenes para encontrar los atributos de anchura y altura que falten y los aplicará.

Establecer dimensiones para cualquier incrustación

Al igual que las imágenes, los elementos incrustados como vídeos o iFrames pueden moverse en la página y causar problemas de CLS. Cuando se colocan elementos incrustados en WordPress, lo mejor es especificar sus dimensiones.

Por ejemplo, al insertar un vídeo de YouTube en su sitio, debe abrir el enlace del vídeo de YouTube. Debajo del vídeo, encontrará un compartir en el que puede hacer clic.

A continuación, haga clic en el botón Incrustar opción.

Esto te dará un código que puedes insertar en el back-end de tu sitio web. El código contiene las dimensiones del vídeo, que puedes modificar manualmente para adaptarlas al diseño de tus páginas web.

Ubicación adecuada de los anuncios

Si su sitio web tiene anuncios, su ubicación es otro factor importante que puede afectar a su CLS. Los anuncios pueden empujar hacia abajo el contenido cuando se cargan, provocando cambios repentinos en el diseño y afectando negativamente a la experiencia del usuario.

Los anuncios deben colocarse de forma óptima para que sean visibles, pero también en puntos donde sea menos probable que provoquen cambios en el diseño. Este punto óptimo suele estar en el centro de la página, debajo del pliegue.

En la medida de lo posible, evite colocar anuncios en la parte superior de la ventana gráfica, donde pueden causar más daño al desplazar mucho contenido hacia abajo.

Y si tus anuncios están incrustados utilizando iFrames, ¡asegúrate de configurar su dimensión correctamente!

Optimizar las fuentes web

Uso de fuentes web personalizadas para su sitio puede causar cambios en el diseño. Esto se debe a que, cuando un usuario intenta cargar el sitio, el navegador puede utilizar primero una fuente de reserva para mostrar el texto mientras se descarga la fuente personalizada.

Una vez finalizada la descarga y cuando el navegador cambie a la pantalla fuente personalizadaLa ubicación de los elementos de texto afectados en la página puede cambiar.

Una forma de solucionarlo es precargar las fuentes.

Plugins como Autoptimize se puede utilizar para hacer esto. Este plugin se puede utilizar para optimizar automáticamente varios aspectos de su sitio web, incluyendo sus fuentes y JavaScript.

Cohete WP es otra gran opción para la optimización de fuentes.

4. Medidas generales

Además de las medidas que puede tomar para mejorar métricas específicas, algunas medidas generales que pueden ayudarle a mejorar las Core Web Vitals de su sitio web incluyen:

Utilice un alojamiento de alta calidad

La calidad de su alojamiento web es, posiblemente, uno de los factores más importantes que determinan el rendimiento de su sitio web.

Aunque cambiar la empresa de alojamiento de su sitio web puede resultar incómodo y costoso, merecerá la pena si con ello mejora la velocidad de carga de su sitio.

Aunque aplique todas las demás tácticas anteriores, un alojamiento web deficiente siempre se interpondrá en el rendimiento del sitio web.

Elegir un alojamiento de calidad significará disponer de una excelente plataforma para sitios web de carga rápida.

Entre los factores que hay que tener en cuenta están si tienen centros de datos distribuidos (relevante si atiende a un público mundial), mejores servidores, HTTP/2 en lugar de HTTP/1etc.

No todos los grandes servicios de alojamiento web son caros.

Proveedores de alojamiento web como Bluehost y SiteGroundpor ejemplo, son muy recomendables y ofrecen precios asequibles.

Utilizar un tema ligero

Tu tema es la base sobre la que se construye tu sitio web. Si eliges un tema mal programado, no podrás hacer mucho para optimizar la velocidad de tu sitio web.

Los temas pesados con mucho código y scripts innecesarios pueden impedir que su sitio web funcione como debería y ofrecer a sus usuarios una experiencia pobre.

Mejorar Core Web Vitals y UX, elija un tema sencillo, ligero y compatible con SEO construidos con código de alta calidad. Un gran ejemplo es el Astra tema.

Astra es un tema ligero codificado con los más altos estándares de WordPress y es conocido por obtener puntuaciones perfectas en las pruebas de Google Web Vitals.

Empiece hoy mismo a optimizar su sitio web para Core Web Vitals

Google's Core Web Vitals ha proporcionado una forma sencilla de medir y optimizar su sitio web para algunas de las métricas de UX más importantes.

Siguiendo la guía anterior, pruebe su sitio web y, a continuación, utilice los consejos proporcionados para realizar las mejoras necesarias.

Optimice su sitio web para que cargue mejorLa calidad, la estabilidad visual y la interactividad pueden ofrecer a los usuarios una mejor experiencia, aumentar la participación en su sitio web, impulsar la generación de clientes potenciales, proporcionarle una ventaja competitiva y mejorar su cuenta de resultados.

¿Ya has intentado optimizar tu sitio web para las Core Web Vitals de Google? Si conoces otros consejos útiles, ¡nos encantaría que nos los comunicaras en los comentarios!