Para que pueda optimizar su sitio web para las métricas web principales de Google, hemos identificado varias áreas potencialmente problemáticas y cómo actualizarlas para mejorar sus puntuaciones de métricas web principales. Para obtener más información sobre lo que mide cada una de las métricas web principales, cómo medirlas y las puntuaciones ideales, consulte Introducción a las métricas web principales.
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.
No todos los widgets personalizados son lentos de cargar. Depende de cómo se haya creado el widget personalizado.
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, Deslizador de imágenes, Animaciones de Lottie, Multilocalización, Calendario de Google y Disqus.
Cómo corregirlo
Para mejorar su puntuación de las métricas web principales:
Elimine los widgets personalizados/pesados de la zona superior de su página y muévalos hacia abajo. De este modo, se evita que afecten negativamente a la CLS y FID al cargarse y empujar el contenido que se encuentra debajo de ellos hacia la parte inferior de la página.
Evite añadir varios widgets personalizados/pesados en la misma página. Cada widget tiene diferentes tiempos de carga, lo que puede disminuir la LCP.
Si un widget personalizado está causando FID, puede pedir a su desarrollador que mejore la forma en que el contenido se renderiza y se obtiene utilizando técnicas como la carga asíncrona, la obtención de datos fuera del flujo principal, etc.
Comercio electrónico
La store se carga dinámicamente con JavaScript. Esto puede afectar a la CLS porque la store tarda más en cargarse que el resto del contenido de la página. Por ello, se recomienda mover la store a la parte inferior de la página en lugar de a la parte superior.
Cómo corregirlo
Para mejorar su puntuación de las métricas web principales:
Añada contenido por encima de la store en lugar de poner la store en la parte superior de la página de la store. Esto asegura que la store esté debajo del pliegue.
Cree sus propias páginas de categorías o utilice el widget Galería de productos de la store para crear páginas de categorías. Tanto las imágenes nativas como los elementos de la galería de fotos se cargan más rápido que la store porque tienen menos contenido y código que renderizar antes de mostrarse.
Fuentes
Las fuentes web pueden hacer más lento su sitio web porque el navegador tiene que descargar y cargar toda la familia de fuentes para cada combinación de fuente y peso. Las fuentes se descargan automáticamente y se incrustan en el HTML, hasta 50KB. Esto acelera la velocidad con la que el navegador representa las fuentes personalizadas y ayuda a evitar la CLS. Sin embargo, esto no siempre es suficiente y por eso recomendamos utilizar como máximo dos familias de fuentes diferentes y únicamente unos pocos pesos de cada una.
Cómo corregirlo
Para mejorar su puntuación en las métricas web:
Si tiene más de dos fuentes aplicadas, elimínelas de elementos o widgets específicos de su sitio web. Utilice fuentes globales para aplicar únicamente las fuentes y pesos que necesite. Una vez hecho esto, solo se descargan las fuentes necesarias para que el texto se muestre correctamente.
Google Tag Manager
Es posible que Google Tag Manager descargue bibliotecas y código adicionales que no necesita, lo que puede disminuir la LCP.
Cómo corregirlo
Para mejorar su puntuación en las métricas web:
Si es posible, elimine Google Tag Manager. Si únicamente tiene una o dos tecnologías de seguimiento, puede que no valga la pena implementar Google Tag Manager.
Si implementa Google Tag Manager, consulte 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.
No coloque Google Tag Manager en el encabezado del sitio web. Esto hace que se cargue primero, antes que otros elementos importantes del sitio.
Imágenes y videos de fondo
Las imágenes y los videos de fondo suelen ser los activos más grandes que los navegadores descargan en su sitio. Cuando hay demasiadas imágenes, una imagen grande por encima del pliegue, o un video, puede causar un retraso en la LCP y un aumento en la CLS porque el navegador tiene que descargar los elementos antes de que puedan renderizarse. Esto ocurre por lo general con imágenes o videos de fondo de gran tamaño, presentaciones de imágenes, imágenes de fondo con otra imagen encima, o con varias imágenes grandes en una fila en la parte superior de la página.
Por "imagen grande" nos referimos a una imagen que ocupa la mayor parte del ancho de la página.
Cómo corregirlo
Para mejorar su puntuación en las métricas web:
Utilice únicamente 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 una miniatura.
Mueva los videos de fondo y las presentaciones de diapositivas más abajo en la página. Si necesita una presentación de diapositivas, limítela a tres imágenes o menos.