Para ayudarte a optimizar tu sitio web para las Core Web Vitals de Google, hemos identificado varias áreas con posibles problemas y cómo actualizarlas para mejorar tus puntuaciones. Para obtener más información sobre qué mide cada Core Web Vitals, cómo medirla y cuáles son las puntuaciones ideales, consulta Introducción a las Core Web Vitals.
Widgets personalizados y pesados
Tanto los widgets personalizados como los pesados pueden ser lentos porque cargan contenido de un servicio de terceros, lo que requiere llamar a una API externa para recuperar y luego cargar el contenido.
Nota:
No todos los widgets personalizados tardan en cargar. Depende de cómo se crearon.
Widgets pesados: Mapa, Feed de Twitter, Me gusta de Facebook, Feed/Página de Facebook, Comentarios de Facebook, Audio (Soundcloud, Mixtape), Video (Personalizado, YouTube, Vimeo), Galería de fotos, Control deslizante de imágenes, Animaciones Lottie, Multiubicación, Calendario de Google y Disqus.
Cómo solucionarlo
Para mejorar sus puntuaciones de Core Web Vitals:
Elimina los widgets personalizados o pesados de la parte superior de tu página y muévelos hacia abajo. Esto evita que afecten negativamente a CLS y FID al cargar y luego desplazar el contenido debajo de ellos hacia la página.
Evita agregar varios widgets personalizados o pesados en la misma página. Cada widget tiene un tiempo de carga diferente, lo que puede reducir el LCP.
Si un widget personalizado está generando FID, puedes pedirle a tu desarrollador que mejore la forma en que se procesa y se obtiene el contenido mediante técnicas como carga asincrónica, obtención de datos del hilo principal y más.
Fuentes
Las fuentes web pueden ralentizar tu sitio web, ya que el navegador debe descargar y cargar la familia de fuentes completa para cada combinación de fuente y grosor. Las fuentes se descargan automáticamente y se incrustan en el HTML, hasta un máximo de 50 KB. Esto acelera la velocidad de procesamiento de las fuentes personalizadas en tu navegador y ayuda a evitar errores CLS. Sin embargo, esto no siempre es suficiente, por lo que recomendamos usar, como máximo, dos familias de fuentes diferentes y solo unos pocos grosores de cada una.
Cómo solucionarlo
Para mejorar sus puntuaciones de Web Vitals:
Si tiene más de dos fuentes aplicadas, elimínelas de elementos o widgets específicos de su sitio web. Use fuentes globales para aplicar solo las fuentes y grosores que necesite. Una vez hecho esto, solo se descargarán las fuentes necesarias para que el texto se muestre correctamente.
Administrador de etiquetas de Google
Es posible que Google Tag Manager descargue bibliotecas y códigos adicionales que no necesita, lo que puede reducir el LCP.
Cómo solucionarlo
Para mejorar sus puntuaciones de Web Vitals:
Si es posible, elimine Google Tag Manager. Si solo tiene una o dos tecnologías de seguimiento, quizá no le convenga implementar Google Tag Manager.
Si implementa Google Tag Manager, siga nuestra guía de seguimiento de Google Tag Manager. Esto ayuda a garantizar que el código de seguimiento se cargue correctamente y no ralentice el sitio web.
No incluya Google Tag Manager en la cabecera del sitio web. Esto provoca que se cargue primero, antes que otros elementos importantes del sitio.
Imágenes y vídeos de fondo
Las imágenes y los vídeos de fondo suelen ser el recurso más grande que los navegadores descargan en su sitio web. Cuando hay demasiadas imágenes, una imagen grande en la mitad superior de la página o un vídeo, se puede causar un retraso en el LCP y un aumento en el CLS, ya que el navegador tiene que descargar los elementos antes de que se puedan renderizar. Esto suele ocurrir con imágenes/vídeos de fondo grandes, presentaciones de imágenes, imágenes de fondo con otra imagen encima o con varias imágenes grandes seguidas en la parte superior de la página.
Nota:
Por “imagen grande” nos referimos a una imagen que ocupa la mayor parte del ancho de la página.
Cómo solucionarlo
Para mejorar sus puntuaciones de Web Vitals:
Utilice solo una imagen por encima del pliegue.
Si necesita varias imágenes por encima del pliegue, reduzca el tamaño de la imagen a un ícono o miniatura.
Mueva los vídeos de fondo y las presentaciones de diapositivas hacia abajo en la página. Si necesita una presentación de diapositivas, limite a tres imágenes o menos.