Google está actualizando su algoritmo una vez más, y es grande. La actualización Core Web Vitals se lanzará en mayo, y se trata de la velocidad y la experiencia del usuario. Más específicamente, Google comenzará a medir todo lo siguiente: Mayor dolor de contenido (LCP), primer retraso de entrada (FID) y cambio de diseño acumulativo (CLS).
Para esta publicación de blog, nos centraremos solo en uno de estos elementos: Cambio de diseño acumulativo y lo que puedes hacer como desarrollador de frontend para solucionarlo.
¿Cómo sabes si tienes cambios de diseño acumulativos
Utilice Page Speed Insights para ver cuantitativamente el cambio de contenido de su sitio web (junto con otras métricas como LCP y FID).
Debido a que Core Web Vitals se trata de la experiencia del usuario, podría ser útil tener una herramienta como Airbrake Performance Monitoring. Con una herramienta de monitoreo del rendimiento diseñada para desarrolladores, obtendrá una visión instantánea de la UX de su aplicación con características que miden Apdex Score, latencia, información de consultas y rutas, y mucho más.
Combine esto con Moovweb, que optimiza completamente la velocidad de su sitio web, y estará en un lugar excelente no solo para medir la UX de su aplicación, sino también para mantenerse cinco pasos por delante.
Una vez que sepas dónde se encuentra tu sitio web en cuanto a su UX y CLS, es hora de solucionarlo.
Cómo los desarrolladores de frontend pueden arreglar cambios de diseño acumulativos
¿Alguna vez has intentado hacer clic en un artículo en un sitio web, solo para que se mueva de repente, y terminas haciendo clic en otra cosa? O, tal vez, estás en medio de leer un artículo, y todo cambia hacia abajo. Sí, esos son ejemplos de cambios de diseño acumulativos. Un cambio de diseño acumulativo se produce cuando un elemento en su sitio web se carga después de que todo lo demás se ha cargado. Puede ser muy molesto para los usuarios. Google no solo te convencerá de esto, sino que perderás usuarios potenciales que prefieren ir a un sitio web diferente que esperar a que el tuyo se cargue. Evite esto tomándose el tiempo para solucionar los problemas de CLS antes de que afecten a sus usuarios.
Como desarrollador de Frontend, aquí hay cuatro acciones que puede tomar para reducir el cambio de diseño acumulativo en su sitio web:
Actualizar fuentes
Las fuentes añaden carácter y personalidad a un sitio web, pero esas fuentes especializadas tienen un costo. Debido a la gran naturaleza de los archivos de fuente, los navegadores tienden a compensar mediante el uso de FOIT, también conocido como el flash de texto invisible. FOIT puede ralentizar severamente los tiempos de carga de la página web.
En lugar de confiar en FOIT, debe usar el método “flash de texto sin estilo” (FOUT). La forma más fácil de cambiar el texto del sitio web a FOUT es con el siguiente método:
Tradicionalmente, se codifica la fuente como tal: @Font-face { font-family: Georgia; }
En su lugar, debe usar el siguiente bit de código: @Font-face { font-family: Georgia; font-display: Swap; }
El “Font-display” le indica a la API t0 display font inmediatamente usando una fuente del sistema. Una vez que su archivo de fuente se haya cargado, entonces lo cambiará con la fuente que desee en su sitio web.
Desafortunadamente, el método FOUT puede no funcionar con todos los navegadores. Si no lo hace, entonces el navegador volverá a sus comportamientos predeterminados para cargar fuentes. Puedes ver un desglose detallado de estos comportamientos usando esta herramienta.
El segundo método que puedes usar para eliminar los largos tiempos de carga de los archivos de fuente funciona con todos los navegadores, pero no es tan simple como actualizar una línea de código.
Al igual que con el método anterior, esperarás hasta que la fuente predeterminada esté completamente cargada y luego la cambiarás por una fuente personalizada. La diferencia es que tendrás que sumergirte en el código CSS y JavaScript de tu sitio web.
Lo primero es lo primero: Debes evitar usar fuentes personalizadas en la carga inicial de la página actualizando tu CSS. Utilice una fuente del sistema para descargar el texto de su página tan pronto como sea posible.
Mediante el uso de código JavaScript, puede implementar el Font Face Observer. Este código monitorizará y le notificará cuando se cargue una fuente web. Mediante el uso de eventos de desplazamiento, Font Face Observer puede cargar fuentes rápidamente. Para obtener la guía completa, consulte la página de fontfaceobserver GitHub.
Como desarrollador de frontend, estos son algunos cambios simples que puedes hacer para mejorar tus tiempos de carga de fuentes.
Arreglar imágenes en su sitio web
Cómo se cargan las imágenes en tu sitio web impactará significativamente y reducirá los cambios acumulativos de diseño. Las imágenes subidas sin atributos tienden a causar cambios masivos. Es por eso que es mejor usar las siguientes prácticas al agregar imágenes a tu sitio web:
Utilice atributos de tamaño en imágenes y elementos de vídeo
Antes de esta actualización, agregar atributos de “ancho” y “alto” a tus imágenes no tenía impacto en la clasificación de tu sitio web en Google. Ahora, con la Actualización de Core Vitals, va a hacer una diferencia significativa. Querrás tomarte el tiempo extra para incluir atributos a tus imágenes de aquí en adelante.
Cuando subes una imagen como tal:
Ej: <>El monitoreo de errores h1 es impresionante</h1>
<p>Encuentra y corrige código roto rápidamente</p>
<img src=”Erron_image.jpg” alt=”>
<p>Con el software de monitoreo de errores adecuado, puede mantener su código libre de errores.</p>
Sucede lo siguiente: El navegador del usuario leerá y descargará el HTML primero. Una vez hecho eso, finalmente descargará la imagen. Lo que termina sucediendo es un cambio de contenido en la página web a medida que el navegador hace espacio para la imagen.
Solucionar este problema de CLS es simple: Todo lo que necesita hacer es agregar las etiquetas de atributo de altura y ancho a su imagen.
Ej: <>El monitoreo de errores h1 es impresionante</h1>
<p>Encuentra y corrige código roto rápidamente</p>
ancho=”450” altura=”450”>
<p>Con el software de monitoreo de errores adecuado, puede mantener su código libre de errores.</p>
Cuando agrega el ancho y la altura a la imagen, le está indicando al navegador que deje espacio para ella en la página web mientras se descarga el resto del documento HTML.
Para un enfoque menos estricto, también puede usar cajas de relación de aspecto CSS .
Ninguno de los dos enfoques es incorrecto, pero es imperativo que uses uno u otro para evitar cambios acumulativos en el diseño de tu sitio web.
Coloque cuidadosamente anuncios dinámicos
Los anuncios son terribles cuando se trata de cambios de diseño de contenido. Tendrán tu contenido por todas partes si no tienes cuidado con ellos.
Cuando coloque anuncios en su sitio web, utilice estos consejos para evitar cambios en su contenido:
-
Al igual que con las imágenes, debes asegurarte de que los anuncios tengan suficiente espacio reservado en tu sitio web.
-
No coloques anuncios en la parte superior de tu página web. Existe la posibilidad de que esto provoque un cambio de contenido para todo el contenido debajo de él.
-
Coloca anuncios cerca del centro o la parte inferior de una página web.
Estas son las mejores prácticas cuando se trata de anuncios dinámicos. No solo mejorarán drásticamente la experiencia del usuario, sino también los cambios de diseño acumulativos.
Ten cuidado con los widgets incrustados
Los widgets incrustados son un cambio de juego para los sitios web. Te permiten crear contenido interesante y portátil para tu sitio web, pero tienen inconvenientes significativos. A diferencia de las imágenes y los anuncios, puede ser un reto reservar espacio en su sitio web para un widget.
Digamos que tienes un widget para Twitter. A veces, un tweet puede tener solo unos pocos caracteres; otras veces, puede incluir imágenes y enlaces, así que ¿cómo saber cuánto espacio necesita reservar cuando el espacio requerido está cambiando continuamente?
Puedes arreglar esto subiendo un marcador de posición para tus incrustaciones reservando espacio en tu sitio web. Pero, ¿cómo hacer eso?
Necesitarás crear un “GlobalKey” y asignarlo a tu widget. Una vez que tengas una clave, podrás encontrar el tamaño de tu widget y reservar la cantidad adecuada de espacio en tu sitio web para tus widgets.
Conclusión
Solo hay unos pocos métodos que puede utilizar para reducir los cambios acumulativos de diseño en su sitio web. Muchos problemas relacionados con CLS implican espacio y reservar suficiente espacio en su sitio web para imágenes, anuncios y widgets. La forma en que subas fuentes también afectará significativamente la velocidad de tu sitio web.
Recuerda que con el lanzamiento de Core Web Vitals en mayo, deberías empezar a hacer estos cambios ahora mismo para evitar caer en el ranking de Google.
