Para ayudarte a optimizar tu sitio web para las Core Web Vitals de Google, hemos identificado varias áreas problemáticas potenciales y cómo actualizarlas para mejorar tus puntuaciones. Para obtener más información sobre qué mide cada Core Web Vital, cómo medirla y 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 cargarse. 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, Múltiples ubicaciones, Calendario de Google y Disqus.
Cómo solucionarlo
Para mejorar sus puntuaciones de Core Web Vitals:
- Elimine los widgets personalizados o pesados de la parte superior de su página y muévalos hacia abajo. Esto evita que afecten negativamente a CLS y FID al cargar y luego desplazar el contenido de la página hacia abajo.
- Evite 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, puede pedirle a su 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 su 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 con la que su navegador procesa las fuentes personalizadas 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ás no valga la pena 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 coloque Google Tag Manager en la cabecera del sitio web. Esto provoca que se cargue primero, antes que otros elementos importantes.
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 tu sitio web. Cuando hay demasiadas imágenes, una imagen grande en la mitad superior de la página o un vídeo, 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 icono 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.