Cómo optimizar su sitio web para Core Web Vitals (Adsense)

¿Estás tratando de aprobar Core Web Vitals? Aquí hay algunas formas fáciles y prácticas de mejorar sus puntajes CWV

La carrera para mejorar Core Web Vitals no es fácil. Se vuelve más difícil si confía en un programa de publicidad como Google AdSense para monetizar su sitio web.

Los sitios web que ejecutan Google AdSense tienen 10 veces más probabilidades de fallar la prueba de Core Web Vitals que el mismo sitio web sin Google AdSense. Esto se debe principalmente a la cantidad de solicitudes y activos de terceros que Google AdSense agrega a su sitio web. La mayoría de estos activos no están optimizados, son grandes y no son fáciles de usar.

Fuera de AdSense y las plataformas publicitarias, si tiene muchas imágenes no optimizadas, JavaScript y CSS, especialmente en la mitad superior de la página, es muy probable que falle la prueba de Core Web Vitals.

Si ha tenido dificultades para aprobar la prueba de Core Web Vitals y mejorar su potencial de clasificación en los motores de búsqueda, encontrará soluciones prácticas en este artículo.

¿Qué son Core Web Vitals?

Core Web Vitals son métricas impulsadas por Google Lighthouse que determinan cómo un sitio ofrece una buena experiencia de página. Si bien existen muchas métricas al ejecutar una prueba, las métricas más importantes son la pintura con contenido más grande (LCP), el retraso de la primera entrada (FID) y el cambio de diseño acumulativo (CLS).

Google ha anunciado que a partir de mayo de 2021, estas métricas se convertirán en parte de las señales de clasificación que se utilizan para determinar las posiciones de las páginas web en los resultados de búsqueda.

En resumen, se puede decir que Core Web Vitals no estaba destinado a ser un terror para los webmasters, sino un medio para mejorar la experiencia de los sitios web.

Pintura contenta más grande (LCP): LCP mide el tiempo que tarda en cargarse la imagen o el bloque de texto visible más grande de una página web. Si el texto o la imagen visible más grande se carga rápidamente, se percibe que el resto de las imágenes y el texto se cargarán rápidamente. El tiempo de carga requerido para pasar es 2.5 segundos.

Largest Contentful Paint
Créditos: desarrollo web

Primer retardo de entrada (FID): FID mide la interactividad de la página web. Esto está determinado por el tiempo que tarda el navegador en comenzar a procesar los controladores de eventos después de que un usuario haya hecho clic en su sitio. Esto se conoce como la primera impresión de su sitio web. El tiempo requerido para pasar es Milisegundos 100.

First Input Delay
Créditos: desarrollo web

Cambio de diseño acumulativo (CLS): CLS mide el cambio de diseño que ocurre en una página web. Cuando se carga una página web y de repente algo aparece o desaparece y la página tiene que ajustarse para ser más grande o más pequeña, ese cambio es lo que se mide. Es terrible para la experiencia del usuario y estoy de acuerdo. El puntaje que debe aprobar es 0.1.

Cumulative Layout Shift
Créditos: desarrollo web

Cómo optimizar su sitio web para Core Web Vitals

Siga estos pasos para optimizar su sitio web:

1. Comience con un proveedor de alojamiento web rápido

Si tiene un servidor web con un tiempo de respuesta terrible, es posible que cualquier otra cosa que enumere aquí no dé los resultados deseados. Cuanto más rápido responda su servidor a las solicitudes, mejor.

¿Por qué es importante un servidor web con un tiempo rápido hasta el primer byte (TTFB)? Algunos argumentarán que TTFB no importa, pero lo hace. Esa es la base de todo lo demás. Si tiene usuarios en ciudades con Internet lento, lo rápido que pueda responder su proveedor de alojamiento web lo significará todo. Cualquier proveedor de alojamiento web puede funcionar bien si tiene usuarios principalmente de ciudades con Internet ultrarrápido.

Intente probar cómo responderá su proveedor de alojamiento web a 3G o 2G en lugar de 4G. Porque si obtiene muchos usuarios que se conectan a través de 3G o 2G, se está sumando a su puntaje de Core Web Vitals. Entonces, cada milisegundo cuenta. La diferencia entre obtener 100 ms en su FID y obtener 101 ms es que con 100 ms pasa, pero con 101 ms falla. Entonces, si alguien le dice que 1 ms no importa, esa persona podría estar equivocada.

Al elegir un alojamiento web, asegúrese siempre de acercar un centro de datos a la mayoría de los usuarios de su sitio web. Puede encontrar sus ubicaciones mirando sus análisis. ¿De dónde provienen la mayoría de sus usuarios? Elija un centro de datos más cercano a ellos. Cuanto más cerca, mejor.

Personalmente, he notado un cambio significativo en los datos de campo de Core Web Vitals de un sitio web después de cambiar el servidor web. No hice nada más.

Si está buscando un alojamiento web rápido, existen muchas recomendaciones que son impulsadas exclusivamente por afiliados sin sinceridad. Si está ejecutando WordPress y puede pagarlo, le recomiendo encarecidamente Kinsta. Son los mejores para WordPress. Si necesita algo más barato o no está usando WordPress, entonces Cloudways también es muy eficaz.

2. Utilice un tema ligero y optimizado para la velocidad.

Este consejo es particularmente muy útil para los no codificadores e incluso para los codificadores con menos tiempo. Especialmente si está utilizando WordPress donde hay tantas opciones, asegúrese de utilizar un tema ligero y optimizado para la velocidad.

Debido a que el tema es como el esqueleto de su sitio web, si el esqueleto se rompe, el cuerpo se romperá. Eso es todo.

Existe una larga lista de mejores prácticas que debe buscar en un tema. Algunas de las malas prácticas más comunes dependen en exceso de JQuery, cargan demasiados CSS / JS cuando no se necesitan, temas de gran tamaño y más. Siempre puedes usar una herramienta como Laboratorios amarillos, para probar la demostración.

Si está utilizando WordPress, puede consultar la lista de temas de WordPress más rápidos.

3. Optimiza tus imágenes

Las imágenes son geniales. Hacen que el contenido sea tan atractivo. Pero pueden ser una carga si no están optimizados. Tener imágenes grandes como 3 MB definitivamente afectará su velocidad. Y si estas imágenes son visibles cuando se visita su sitio antes de desplazarse, definitivamente afectarán su métrica LCP.

La verdad es que las imágenes no optimizadas aumentan el tamaño de su página. Cuanto mayor sea el tamaño de la página, más tardará en cargarse.

Personalmente, prefiero optimizar cada imagen antes de subirla. No utilizo ningún servicio externo para la optimización de imágenes. Sin embargo, si usa WordPress o un CMS similar, existen complementos y soluciones para optimizar las imágenes automáticamente. También existen soluciones en la nube independientemente de lo que utilice.

4. Elimina o reduce el tamaño de las imágenes de fondo.

Las imágenes de fondo suelen ser muy grandes. Y puede ralentizar el tiempo de carga, ya que debe cargarse primero antes de que se muestre contenido significativo.

Puede eliminar completamente la imagen de fondo para tener un sitio web más rápido. Si son tan importantes, considere optimizarlos al tamaño más pequeño posible o usar patrones en lugar de imágenes.

5. Utilice el almacenamiento en caché del navegador

Si tiene muchos lectores leales, debería considerar el almacenamiento en caché del navegador. Cuando un usuario visita su sitio web por primera vez, el navegador almacena en caché ese sitio web. Para cada otra visita, se cargará en un instante. Esto puede mejorar enormemente FID y LCP a partir de la segunda visita.

Para los usuarios de WordPress, la mayoría de los complementos de almacenamiento en caché pueden ayudarlo a lograr esto.

6. Minimice JavaScript y posponga el JavaScript no utilizado.

Si bien JavaScript es sorprendente, a menudo bloquea el renderizado. Esto significa que puede afectar su tiempo de carga y, en última instancia, su FID.

Intente minimizar JavaScript eliminando los espacios en blanco y los comentarios para reducir el tamaño del archivo. Además, asegúrese de aplazar JavaScript no crítico. Esto debería mejorar su FID.

Para los usuarios de WordPress, existen complementos como Autoptimize, WP Rocket y otros que pueden hacer esto por usted.

7. Establecer el atributo de tamaño de AdSense

Si está ejecutando AdSense en su sitio web y tiene problemas con CLS, esto puede resolver todos sus problemas. Lo hizo por mí y debería serlo para usted.

Si tiene un bloque de anuncios cerca del encabezado que es visible cuando un usuario lo visita, un problema es que es posible que el anuncio no se cargue de inmediato. Puede cargarse después de que la página ya esté cargada, y cuando lo hace, hay un cambio en el diseño. Esto es muy común en los bloques de anuncios adaptables. Con eso sucediendo, es imposible pasar la métrica CLS.

La mejor manera de manejar esto es editar un poco su código de AdSense. No se preocupe, es muy legítimo. Simplemente especifique el atributo de tamaño del anuncio, especialmente la altura. Una vez que haya hecho eso, ya no notará un cambio de diseño cada vez que se cargue el anuncio.

A continuación se muestra un ejemplo de un bloque de anuncios adaptable que utilicé en mi blog justo debajo del encabezado. Reemplacé mi ID de editor y el espacio publicitario por XXXXXX. Noté que agregué el atributo de altura (altura mínima: 300 px). En el momento en que hice eso, todos los problemas de CLS desaparecieron para siempre.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Esto lo que hace es reservar ese tamaño en la página. Entonces, cada vez que aparecen anuncios, no hay cambio de diseño, ya que ya había establecido el tamaño.

8. Establezca el atributo de tamaño para sus imágenes y otros medios.

Al igual que con los anuncios, las imágenes y otros medios pueden causar cambios en el diseño cuando se cargan en su sitio web. Es posible que esté leyendo algo, luego se carga una imagen y de repente hay un cambio de diseño, lo que estaba leyendo está fuera de la vista y todo lo que ve es otra cosa o incluso hace clic en otra cosa por error.

Puede evitar todo esto estableciendo el atributo de tamaño en sus archivos multimedia. Su métrica CLS estará feliz de que lo haya hecho.

9. Imágenes de carga diferida.

Es posible que haya visto los consejos de PageSpeed ​​Insight para diferir imágenes fuera de pantalla. Lo que simplemente significa es cargar sus imágenes de forma diferida.

Lo que hace la carga diferida es reducir el tamaño de la página y también reducir el tiempo de carga de su página cuando un usuario la visita. Lo cual es bueno para las métricas de CWV.

Esto ayudará en particular a mejorar la LCP.

10. Optimice CSS minimizando y generando CSS crítico

CSS es lo que hace que un sitio web se vea genial, pero un archivo CSS grande puede ser un gran problema porque retrasará la presentación de la página al usuario.

Cuando un usuario visita su sitio web, el navegador, por comportamiento normal, retrasará la presentación de su página web al usuario hasta que haya cargado, analizado y ejecutado todo el CSS al que se hace referencia en el encabezado de su página web. Si tiene un archivo CSS grande, esto puede ser un gran problema. Ralentizará su sitio.

CSS crítico puede ayudar cargando solo el CSS necesario para que se cargue la página. Mientras que el resto del CSS se puede cargar de forma asincrónica.

También puede ayudar minimizar su CSS eliminando los espacios en blanco y los comentarios para reducir el tamaño del archivo.

También puede eliminar CSS no utilizado. Si un servicio que utiliza incluye CSS que no se utiliza, es seguro eliminarlo.

Si usa WordPress, hay complementos como WP Rocket, LiteSpeed ​​Cache, FlyingPress y otros que pueden ayudarlo a lograr esto.

11. Implementar la carga inteligente de AdSense

Este método puede eliminar casi por completo todos los desafíos si AdSense es responsable de ralentizar su sitio web.

Se trata de cargar AdSense de forma inteligente. AdSense no se cargará hasta que un usuario realice una acción como desplazarse o hacer clic. Esto mejorará en gran medida el tiempo de carga y cualquier elemento vital principal de la web afectado por AdSense.

Hay muchos complementos de WordPress que pueden ayudarlo a hacer esto, WP Rocket y Flying Scripts son un ejemplo. Hasta donde yo sé, este método no infringe la política de Google AdSense.

Nota: Si bien este método puede ayudar a mejorar la velocidad percibida y los puntajes de la página, podría afectar sus ingresos de AdSense. Te recomiendo que realices un experimento para asegurarte de si vale la pena.

12. Utilice la fuente System Stack si puede

Las fuentes agregan tiempo de carga adicional en cualquier sitio web. Y para las páginas web sin imágenes, su bloque de texto podría ser responsable de su calificación de LCP. En cuyo caso, su puntuación LCP estará directamente influenciada por su fuente.

Si bien Google Font y Font Awesome continúan mejorando, el uso de fuentes de pila del sistema ofrece una mejora significativa. Aunque no es tan fantasioso según el dispositivo.

13. Use un CDN

Si tiene usuarios de diferentes partes del mundo, entonces el uso de una CDN puede ayudarlo a mejorar su velocidad e indirectamente sus métricas de Core Web Vitals.

Un CDN en una explicación simple hace muchas copias de su sitio web y las almacena en varios puntos de presencia (POP) en diferentes partes del mundo. Cuando alguien solicita su sitio web, lo atiende desde la ubicación más cercana.

Por ejemplo, si su sitio está alojado en los Estados Unidos y tiene un visitante del Reino Unido, en lugar de buscar su sitio en los Estados Unidos, la CDN servirá su sitio desde el Reino Unido. El efecto de eso será una entrega rápida. Velocidad.

Puede consultar el mejores CDN por ahí.

14. Configurar la captación previa de DNS

Si confía en un servicio externo como un CDN para la entrega de su sitio web, es posible que deba configurar una precarga de DNS para minimizar el retraso debido a la búsqueda de DNS.

La captación previa de DNS precargará el DNS antes de que se llame. Para que se cargue en un instante cuando finalmente se llame.

15. Optimice las secuencias de comandos de terceros

Verifique que algunos de los servicios que usa en su sitio no agreguen scripts de terceros que puedan ralentizar sus sitios.

Puede reemplazar la solución con solicitudes de terceros que ralentizan su sitio con una mejor solución.

Cuando se trata de Google AdSense, otro script de terceros, es poco lo que puede hacer. La mejor práctica es utilizar un máximo de 3 anuncios unidos en una página. Evite los contenidos combinados, ya que genera bajos ingresos pero aumenta el tiempo de carga.

16. Elimine AdSense de la mitad superior de la página.

Este consejo se basa en experimentos. Si todas sus métricas son buenas en el informe de la consola de búsqueda, excepto LCP, primero asegúrese de que sus imágenes y fuentes estén optimizadas. Si están optimizados y sigue fallando LCP, AdSense podría ser el responsable.

Si puede permitírselo, elimine AdSense de la mitad superior de la página durante un mes y vea si el problema desaparece.

Si no desea eliminarlo, puede retrasarlo manualmente o con la ayuda de un complemento como Flying Scripts.

17. Cambiar a AMP

AMP significa páginas móviles aceleradas. La idea de AMP es optimizar las páginas web para que se carguen más rápido en dispositivos móviles. Y por supuesto, el AMP de código abierto El proyecto fue iniciado por Google.

Si bien AMP originalmente estaba destinado a acelerar las páginas móviles, también puede acelerar las páginas de escritorio.

Las páginas AMP son consistentemente más rápidas que las páginas móviles o de escritorio, a veces en más del 100% según nuestra observación.

Si la única estrategia de monetización de su sitio web es Google AdSense, entonces puede considerar cambiar todo su sitio web a AMP. Personalmente, he notado que en un blog que tengo, AdSense en páginas AMP a veces genera más conversiones que en dispositivos móviles y computadoras de escritorio.

Conclusión

Core Web vitals puede ayudarlo a mejorar su sitio web para sus usuarios, no solo para Google. Es muy común tener una buena puntuación en las pruebas de datos de laboratorio pero una mala puntuación en los datos de campo.

Esto se debe a la composición de sus usuarios. Si la mayoría de sus usuarios provienen de lugares con Internet lento, es posible que haya hecho un buen trabajo optimizando pero aún fallando en los datos de campo.

Mfon Abel Ekene

Mfon Abel Ekene

Disfruto creando contenidos que sean útiles. Mi pasión es ayudar a la población de Internet a encontrar lo que necesitan indicándoles la dirección correcta. Es lo que me encanta hacer y dedico muchas horas de investigación y pruebas para asegurarme de hacerlo a través de mi contenido en TargetTrend.

Artículos: 48

Recibe cosas tecnológicas

Tendencias tecnológicas, tendencias de inicio, reseñas, ingresos en línea, herramientas web y marketing una o dos veces al mes

5 Comentarios

  1. Parece bastante extraño que Google se esté disparando en el pie si usa Adsense en su sitio y es probable que eso afecte negativamente su clasificación en los motores de búsqueda en Google.
    Grandes consejos que se agradecen. Estoy luchando con Core Vitals a pesar de almacenar en caché todo en Cloudflare, por lo que vale la pena probar un par de consejos y es posible que tenga que morder la bala e intentar crear páginas AMP.

    • Puedo entender de donde vienes. Pero creo que desde la perspectiva de Google, ven a AdSense y a la Búsqueda como productos diferentes. Y juego limpio para ellos, recomiendan un máximo de 3 anuncios por página, pero los webmasters abusan de esto.

  2. ¿Qué tan difícil es esto? Esta página, que explica cómo optimizar para Core Web Vitals, tiene una puntuación de página de solo 55 ...

    • Cualquiera que sea la herramienta que utilizó para verificar es irrelevante si se trata de simulación. No está optimizando para bots sino para usuarios del mundo real.

      Google no utiliza las puntuaciones internas de PageSpeed ​​para la clasificación, utilizan datos del mundo real de los datos de CrUX.

      En lo que respecta al informe de experiencia del usuario en el mundo real, todas nuestras páginas son verdes, como puede ver en el resumen de origen en PageSpeed ​​Insight.

  3. Hola gente,

    Realizamos múltiples pruebas con diferentes integraciones de AdSense para medir el impacto en la puntuación de Web Vitals. Supongo que vale la pena leer esta publicación: https://wpadvancedads.com/adsense-page-speed-core-web-vitals/.

    Saludos cordiales,
    Joachim

Deje un comentario

Su dirección de correo electrónico no será publicada. Las areas obligatorias están marcadas como requeridas *