Google comparte nuevas recomendaciones de Core Web Vitals que son realistas para la mayoría de los desarrolladores y aplicables a la mayoría de los sitios web.
Google comparte un conjunto actualizado de recomendaciones para optimizar Core Web Vitals para ayudarlo a decidir qué priorizar cuando el tiempo es limitado.
Core Web Vitals son tres métricas que miden el tiempo de carga, la interactividad y la estabilidad visual.
Google considera que estas métricas son esenciales para brindar una experiencia positiva y las utiliza para clasificar los sitios web en sus resultados de búsqueda.
A lo largo de los años, Google ha proporcionado numerosas sugerencias para mejorar las puntuaciones de Core Web Vitals.
Aunque vale la pena implementar cada una de las recomendaciones de Google, la empresa se da cuenta de que no es realista esperar que alguien lo haga todo.
Si no tiene mucha experiencia en la optimización del rendimiento del sitio web, puede ser un desafío descubrir qué tendrá el impacto más significativo.
Es posible que no sepa por dónde empezar con el tiempo limitado para dedicarlo a mejorar Core Web Vitals Ahí es donde entra en juego la lista revisada de recomendaciones de Google.
En una publicación de blog, Google dice que el equipo de Chrome pasó un año tratando de identificar los consejos más importantes que puede dar con respecto a Core Web Vitals.
El equipo elaboró una lista de recomendaciones que son realistas para la mayoría de los desarrolladores, aplicables a la mayoría de los sitios web y que tienen un impacto significativo en el mundo real.
Esto es lo que aconseja el equipo de Chrome de Google.
Optimización de la pintura con contenido más grande (LCP)
La métrica Largest Contentful Paint (LCP) mide el tiempo que tarda el contenido principal de una página en volverse visible para los usuarios.
Google afirma que solo alrededor de la mitad de todos los sitios web cumplen con el umbral LCP recomendado.
Estas son las principales recomendaciones de Google para mejorar LCP.
Asegúrese de que el recurso LCP se encuentre fácilmente en la fuente HTML
Según el Web Almanac 2022 de HTTP Archive, el 72% de las páginas web móviles tienen una imagen como contenido principal Para mejorar LCP, los sitios web deben asegurarse de que las imágenes se carguen rápidamente.
Puede ser imposible cumplir con el umbral de LCP de Google si una página espera que los archivos CSS o JavaScript se descarguen, analicen y procesen por completo antes de que la imagen pueda comenzar a cargarse.
Como regla general, si el elemento LCP es una imagen, la URL de la imagen siempre debe ser reconocible desde la fuente HTML.
Asegúrese de que el recurso LCP tenga prioridad
Además de tener el recurso LCP en el código HTML, Google recomienda priorizarlo y no retrasarse con respecto a otros recursos menos críticos.
Incluso si ha incluido su imagen LCP en la fuente HTML usando una etiqueta estándar, si hay varias etiquetas
La mejor manera de hacer ambas cosas, dice Google, es usar una red de entrega de contenido (CDN).
Optimización del cambio de diseño acumulativo (CLS)
El cambio de diseño acumulativo (CLS) es una métrica utilizada para evaluar qué tan estable es el diseño visual de un sitio web Según Google, alrededor del 25% de los sitios web no cumplen con el estándar recomendado para esta métrica.
Estas son las principales recomendaciones de Google para mejorar CLS.
Establecer tamaños explícitos para el contenido de la página
Los cambios de diseño pueden ocurrir cuando el contenido de un sitio web cambia de posición después de que haya terminado de cargarse. Es importante reservar espacio con la mayor anticipación posible para evitar que esto suceda.
Una causa común de los cambios de diseño son las imágenes sin tamaño, que se pueden abordar estableciendo explícitamente los atributos de ancho y alto o las propiedades CSS equivalentes.
Las imágenes no son el único factor que puede causar cambios en el diseño de las páginas web Otro contenido, como anuncios de terceros o videos incrustados que se cargan más tarde, pueden contribuir a CLS.
Una forma de abordar este problema es mediante el uso de la propiedad de relación de aspecto en CSS Esta propiedad es relativamente nueva y permite a los desarrolladores establecer una relación de aspecto para imágenes y elementos que no son imágenes.
Proporcionar esta información permite que el navegador calcule automáticamente la altura adecuada cuando el ancho se basa en el tamaño de la pantalla, de forma similar a como lo hace con las imágenes con dimensiones definidas.
Asegúrese de que las páginas sean elegibles para Bfcache
Los navegadores usan una función llamada caché de avance/retroceso, o bfcache para abreviar, que permite que las páginas se carguen instantáneamente desde antes o después en el historial del navegador usando una instantánea de la memoria.
Esta característica puede mejorar significativamente el rendimiento al eliminar los cambios de diseño durante la carga de la página.
Google recomienda verificar si sus páginas son elegibles para el bfcache utilizando Chrome DevTools y trabajar en las razones por las que no lo son.
Evitar animaciones/transiciones
Una causa común de los cambios de diseño es la animación de los elementos del sitio web, como los anuncios de cookies u otros anuncios de notificación, que se deslizan desde la parte superior o inferior.
Estas animaciones pueden empujar otro contenido fuera del camino, impactando CLS Incluso cuando no lo hacen, animarlos aún puede afectar a CLS.
Google dice que las páginas que animan cualquier propiedad CSS que podría afectar el diseño tienen un 15% menos de probabilidades de tener un CLS "bueno".
Para mitigar esto, es mejor evitar la animación o la transición de cualquier propiedad CSS que requiera que el navegador actualice el diseño a menos que sea en respuesta a la entrada del usuario, como un toque o una pulsación de tecla.
Se recomienda usar la propiedad de transformación CSS para transiciones y animaciones cuando sea posible.
Optimización del retardo de la primera entrada (FID)
First Input Delay (FID) es una métrica que mide qué tan rápido responde un sitio web a las interacciones del usuario.
Aunque la mayoría de los sitios web funcionan bien en esta área, Google cree que hay margen de mejora.
La nueva métrica de Google, Interaction to Next Paint (INP), es un reemplazo potencial para FID, y las recomendaciones que se brindan a continuación son relevantes tanto para FID como para INP.
Evite o divida las tareas largas
Las tareas son cualquier trabajo discreto que realiza el navegador, incluida la representación, el diseño, el análisis y la compilación y ejecución de scripts.
Cuando las tareas toman mucho tiempo, más de 50 milisegundos, bloquean el hilo principal y dificultan que el navegador responda rápidamente a las entradas del usuario.
Para evitar esto, es útil dividir las tareas largas en otras más pequeñas al darle al subproceso principal más oportunidades para procesar el trabajo crítico visible para el usuario.
Esto se puede lograr cediendo al hilo principal a menudo para que las actualizaciones de representación y otras interacciones del usuario puedan ocurrir más rápidamente.
Evite JavaScript innecesario
Un sitio web con una gran cantidad de JavaScript puede generar tareas que compiten por la atención del hilo principal, lo que puede afectar negativamente la capacidad de respuesta del sitio web.
Para identificar y eliminar código innecesario de los recursos de su sitio web, puede usar la herramienta de cobertura en Chrome DevTools.
Al disminuir el tamaño de los recursos necesarios durante el proceso de carga, el sitio web pasará menos tiempo analizando y compilando el código, lo que dará como resultado una experiencia de usuario más fluida.
Evite grandes actualizaciones de renderizado
JavaScript no es lo único que puede afectar la capacidad de respuesta de un sitio web La representación puede ser costosa e interferir con la capacidad del sitio web para responder a las entradas de los usuarios.
La optimización del trabajo de renderizado puede ser compleja y depende del objetivo específico Sin embargo, hay algunas formas de garantizar que las actualizaciones de renderizado sean manejables y no se conviertan en tareas largas.
Google recomienda lo siguiente:
- Evite usar requestAnimationFrame() para realizar cualquier trabajo no visual.
- Mantenga el tamaño de su DOM pequeño.
- Utilice la contención CSS.
Conclusión
Core Web Vitals es una métrica importante para proporcionar una experiencia de usuario positiva y una clasificación en los resultados de búsqueda de Google.
Aunque vale la pena implementar todas las recomendaciones de Google, esta lista condensada es realista, aplicable a la mayoría de los sitios web y puede tener un impacto significativo.
Esto incluye el uso de una CDN para reducir el TTFB, establecer tamaños explícitos para el contenido de la página para mejorar CLS, hacer que las páginas sean elegibles para bfcache y evitar JavaScript y animaciones/transiciones innecesarias para FID.
Siguiendo estas recomendaciones, podrá aprovechar mejor su tiempo y sacarle el máximo partido a su sitio web.
Fuente: Web.dev Web.dev
Imagen destacada: salarko/Shutterstock
Leer el articulo original en Search Engine Journal.
