Google ha publicado una serie de recomendaciones actualizadas para la optimización de las Core Web Vitals, que son un conjunto de tres métricas que miden el tiempo de carga, la interactividad y la estabilidad visual de una página web. El objetivo de estas recomendaciones es ayudarte a priorizar tus esfuerzos de optimización cuando tienes poco tiempo. A veces puede ser difícil determinar qué cambios tendrán el mayor impacto en el menor tiempo posible, pero esta lista de recomendaciones prácticas y aplicables a la mayoría de los sitios web te ayudará a hacerlo más fácilmente. A continuación, te presentamos estas recomendaciones.
Optimización del Largest Contentful Paint (LCP)
Google ha desarrollado la métrica Largest Contentful Paint (LCP) que mide el tiempo que tarda en cargarse el contenido principal de una página web y hacerse visible para los usuarios. Desafortunadamente, solo alrededor del 50% de las webs logran un LCP efectivo.
Por ello, Google ha compartido una lista de recomendaciones para mejorar el LCP de tu sitio web. Aquí te las presentamos:
1. Asegúrate de que el LCP se encuentra fácilmente en la fuente HTML
Según estadísticas, el 72% de las páginas web móviles tienen imágenes como su contenido principal. Para optimizar el LCP, es importante asegurarse de que las imágenes se carguen rápidamente.
Es posible que sea difícil alcanzar un LCP efectivo si la página espera a que los archivos CSS o JavaScript se descarguen, analicen y procesen antes de comenzar a cargar la imagen.
Como una regla general, si la imagen es el elemento LCP, la URL de la imagen debe ser visible desde la fuente HTML.
2. Asegúrate de que el recurso LCP tiene prioridad
Google también recomienda priorizar el LCP en la estructura de la página web. Incluso si se ha incluido la imagen LCP en el código HTML con una etiqueta estándar, la presencia de varias etiquetas
3. Usa una red de distribución de contenidos (CDN) para reducir el Time To First Bite (TTFB)
Para mejorar el «tiempo hasta el primer byte» (Time to First Byte) es importante que el navegador reciba el primer byte de la respuesta inicial del documento HTML antes de cargar cualquier recurso adicional. Para minimizar este tiempo, es recomendable presentar el contenido desde una ubicación cercana a los usuarios y utilizar la caché para el contenido que se solicita con frecuencia. La solución ideal es utilizar una red de distribución de contenidos (CDN) que permita cumplir ambas recomendaciones. De esta manera, se garantiza que la entrega del contenido se realiza de manera rápida y eficiente, reduciendo así el tiempo de carga y mejorando la experiencia del usuario.
Optimización del Cumulative Layout Shift (CLS)
¿Cómo lograrlo? El equipo de Google recomienda seguir las siguientes estrategias para mejorar la estabilidad visual de tu sitio web y reducir el CLS:
- Evita la inserción de anuncios, imágenes u otro contenido sin reservar el espacio necesario para su carga completa.
- Asegúrate de que los elementos visuales tengan dimensiones definidas en la fuente HTML para que el navegador pueda reservar el espacio correspondiente de antemano.
- No cambies el tamaño o la posición de los elementos visuales después de que se hayan cargado.
- Si es necesario, utiliza técnicas de carga diferida, como la carga diferida del contenido que no es crítico para la primera vista.
- Prueba tu sitio web con las herramientas de Google, como PageSpeed Insights o Lighthouse, para identificar y solucionar problemas de CLS.
Recuerda que mejorar el CLS no solo mejorará la experiencia del usuario en tu sitio web, sino que también puede ayudar a mejorar su posición en los resultados de búsqueda de Google.
4. Establece tamaños específicos para el contenido de la página
Es recomendable reservar espacio adicional para evitar cambios de diseño en una página web cuando el contenido se desplaza después de cargarse. A menudo, las imágenes sin tamaño son una causa común de este problema, pero se puede solucionar estableciendo la anchura y altura o propiedades CSS equivalentes. Además, hay que prestar atención a otros elementos como anuncios o videos, y para solucionar esto, se puede utilizar la propiedad «aspect-ratio», que calcula automáticamente la altura adecuada en función del tamaño de la pantalla.
5. Asegúrate de que las páginas son aptas para Bfcache
Los navegadores tienen una función llamada Back Forward Cache o «bfcache», que permite cargar páginas rápidamente usando una instantánea. Esta función puede mejorar significativamente el rendimiento al eliminar los cambios de diseño durante la carga de la página.
Para comprobar si una página es apta para el bfcache, Google recomienda utilizar Chrome DevTools y mejorar las que no lo son.
6. Intenta no usar animaciones/transiciones
Según Google, una causa común que provoca cambios de diseño en la página y afecta al CLS son las animaciones de elementos. Las animaciones pueden desplazar otros contenidos y disminuir las posibilidades de tener un CLS «bueno». Por lo tanto, es recomendable evitar la adición de animaciones en las páginas web. En caso de que se necesiten animaciones, es mejor utilizar la propiedad «CSS transform» para transiciones y animaciones en lugar de otros métodos que puedan afectar al CLS.
Optimización del First Input Delay (FID)
Google ha desarrollado una nueva métrica llamada Interaction to Next Paint (INP), la cual mide la rapidez con la que una página responde a las interacciones del usuario. Aunque la mayoría de las páginas obtienen buenos resultados en este aspecto, Google cree que aún hay margen para mejorar.
Para mejorar tanto el FID como el INP, Google ofrece las siguientes recomendaciones:
7. Evita o reparte las tareas largas
Las tareas que realiza el navegador, como el renderizado, el diseño, el análisis, la compilación y la ejecución de scripts, pueden afectar a la rapidez con la que el navegador responde a las entradas del usuario. Si estas tareas tardan demasiado (más de 50 milisegundos), pueden dificultar que el navegador responda rápidamente.
Para evitar este problema, es recomendable dividir las tareas largas en tareas más pequeñas. De esta manera, se da al navegador más oportunidades de procesar el trabajo visible para el usuario. Además, se puede recurrir al subproceso principal con frecuencia para que las actualizaciones de renderizado y otras interacciones del usuario puedan producirse más rápidamente.
8. Fuera JavaScript innecesarios
Cuando un sitio web tiene una gran cantidad de JavaScript, pueden surgir varios problemas, ya que múltiples tareas pueden competir por la atención del hilo principal, lo que puede afectar negativamente la capacidad de respuesta de la página.
Para solucionar esto, una opción es identificar y eliminar el código innecesario de los recursos de la web, lo que se puede lograr mediante el uso de Chrome DevTools.
Reducir el tamaño de los recursos necesarios durante el proceso de carga es una buena manera de mejorar la experiencia de usuario, ya que se traduce en una navegación más fluida y una mayor satisfacción del usuario.
9. Ahórrate grandes actualizaciones de renderizado
Cuando se trata de la capacidad de respuesta de una página, no solo el JavaScript es un problema, sino también el renderizado puede ser costoso e interferir con la capacidad para responder a las acciones del usuario. Sin embargo, existen formas de garantizar actualizaciones de renderizado más manejables y menos tediosas. Google recomienda evitar el uso de «requestAnimationFrame()» para trabajos no visuales, mantener el tamaño del DOM pequeño y utilizar CSS containment para mejorar el rendimiento de la página. En resumen, las Core Web Vitals son importantes para ofrecer una buena experiencia de usuario y para aparecer en los resultados de búsqueda de Google. Aunque se deben aplicar todas las recomendaciones de Google, esta lista es realista, aplicable a la mayoría de los sitios web y podría tener un impacto significativo en tu proyecto digital. Al seguir estas recomendaciones, podrás aprovechar mejor tu tiempo y sacar el máximo partido a tu proyecto.