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

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 en la prueba 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, también es muy probable que falle la prueba Core Web Vitals.

Si ha estado luchando para pasar la prueba 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 hay muchas métricas cuando se ejecuta 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 sus señales de clasificación utilizadas para determinar las posiciones de la página web en los resultados de búsqueda.

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

Pintura con contenido más grande (LCP) : LCP mide el tiempo que tarda en cargarse la imagen visible más grande o el bloque de texto en 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 necesario para pasar es de 2,5 segundos .

First Input Delay (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 ampliamente como la Primera impresión de su sitio web. El tiempo requerido para pasar es de 100 milisegundos .

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. La puntuación que debe necesitar para aprobar es 0.1 .

Cómo optimizar su sitio web para Core Web Vitals

Siga estos pasos para optimizar su sitio web:

1. Comience con un servidor web rápido

Si tiene un servidor web con un tiempo de respuesta terrible, es posible que cualquier otra cosa que enumeraré 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, la rapidez con la que su servidor web puede responder significará todo. Cualquier servidor web puede funcionar bien si tiene usuarios principalmente de ciudades con Internet súper rápido.

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

Al elegir un servidor web, asegúrese siempre de tener un centro de datos más cerca de 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, noté 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 servidor web rápido, hay muchas recomendaciones que son impulsadas únicamente por afiliados sin sinceridad. Si está ejecutando WordPress y puede permitírselo, le recomiendo Kinsta. Son los mejores para WordPress. Si necesita algo más barato o no está usando WordPress, Cloudways también es muy efectivo.

2. Utilice un tema ligero y optimizado para la velocidad

Este consejo es especialmente útil para los no programadores e incluso para los programadores 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 está roto, el cuerpo también lo estará. Eso es todo.

Hay una larga lista de mejores prácticas que debe buscar en un tema. Algunas de las malas prácticas más comunes son la dependencia excesiva de JQuery, la carga de demasiados CSS/JS cuando no se necesitan, el tamaño de tema grande y más. Siempre puede usar una herramienta como Yellow labs para probar la demostración.

Si está utilizando WordPress, puede consultar la lista de los 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 tu página. Cuanto mayor sea el tamaño de la página, más tardará en cargarse.

Personalmente prefiero optimizar cada imagen antes de subirlas. 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 hay soluciones en la nube, independientemente de lo que use.

4. Eliminar o reducir 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 primero debe cargarse 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. Usa 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 almacenará en caché ese sitio web. Para cada otra visita, se cargará en un instante. Esto puede mejorar mucho la FID y la 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 difiera JavaScript no utilizado

Si bien JavaScript es increíble, 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 diferir 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 hacerlo por ti.

Si tiene un bloque de anuncios cerca del encabezado que es visible cuando un usuario lo visita, un problema es que el anuncio puede no cargarse inmediatamente. 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 para los bloques de anuncios responsivos. 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 te preocupes, es muy legítimo. Simplemente especifique el atributo de tamaño para el anuncio, especialmente la altura. Una vez que haya hecho eso, ya no notará un cambio de diseño cada vez que se carga el anuncio.

A continuación se muestra un ejemplo de un bloque de anuncios receptivo que utilicé en mi blog, justo debajo del encabezado. Reemplacé mi ID de editor y espacio publicitario con XXXXXX. Noté que agregué el atributo de altura (min-height: 300px). 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" 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 solo 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 configurando el atributo de tamaño de sus archivos multimedia. Su métrica CLS estará feliz de haberlo hecho.

9. Carga diferida de imágenes.

Es posible que haya visto el consejo en PageSpeed ​​Insight para diferir las imágenes fuera de pantalla. Lo que simplemente significa es cargar tus 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 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 visualización de la página para el usuario.

Cuando un usuario visita su sitio web, el navegador, por su 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.

Critical CSS puede ayudar al cargar solo el CSS que es necesario para que se cargue la página. Mientras que el resto del CSS se puede cargar de forma asíncrona.

También puede ayudar la minimización de su CSS mediante la eliminación de espacios en blanco y comentarios para reducir el tamaño del archivo.

También puede eliminar el CSS no utilizado. Si un servicio que usa está enviando CSS que no se usan, es seguro eliminarlo.

Si usa WordPress, existen complementos como WP Rocket, LiteSpeed ​​Cache, FlyingPress y otros que pueden ayudarlo a lograrlo.

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 de la web central afectado por AdSense.

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

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

12. Usa la fuente System Stack si puedes

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 LCP. En cuyo caso, su puntaje LCP estará directamente influenciado por su fuente.

Si bien Google Font y Font Awesome continúan mejorando, el uso de la fuente de pila del sistema ofrece una mejora significativa. Aunque no tan fantasioso dependiendo del dispositivo.

13. Usa un CDN

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

Una CDN en 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, sirve su sitio web 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 obtener su sitio de los Estados Unidos, la CDN servirá su sitio desde el Reino Unido. El efecto de eso será una entrega rápida. Velocidad.

Puede consultar los mejores CDN que existen.

14. Configurar la búsqueda 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 captación previa de DNS para minimizar el retraso debido a la búsqueda de DNS.

La precarga de DNS precargará el DNS antes de llamarlo. Para que se cargue en un instante cuando finalmente se llame.

15. Optimice los scripts de terceros

Verifique para asegurarse de 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 coincidentes, ya que genera bajos ingresos pero aumenta el tiempo de carga.

16. Elimina 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 sigues fallando en LCP, entonces 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. Cambia 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, Google inició el proyecto de código abierto AMP.

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 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. He notado personalmente que en un blog que tengo, AdSense en páginas AMP a veces convierte más que en dispositivos móviles y computadoras.

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 la prueba 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.