Google está actualizando una vez más su algoritmo, y es grande. La actualización de 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 contentoso (LCP), Primer retraso de entrada (FID) y Cambio de diseño acumulativo (CLS).
Para esta publicación del blog, nos centraremos en solo uno de estos elementos: El cambio de diseño acumulativo y lo que puedes hacer como desarrollador de frontend para solucionarlo.
¿Cómo saber si tiene 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 de rendimiento diseñada para desarrolladores, obtendrá una visión instantánea de la UX de su aplicación con características que miden la puntuación Apdex, la latencia, la información de consulta y ruta, y mucho más.
Combine esto con Moovweb, que optimiza por completo la velocidad de su sitio web, y estará en un lugar excelente no solo para medir el UX de su aplicación, sino para mantenerse cinco pasos por delante.
Una vez que sepas dónde está tu sitio web tan lejos como su UX y CLS, es hora de solucionarlo.
Cómo los desarrolladores de frontend pueden corregir los 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 la lectura de un artículo, y todo cambia hacia abajo. Sí, esos son ejemplos de cambios de diseño acumulativos. Un cambio de diseño acumulativo ocurre 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 dejará en esto, sino que perderás usuarios potenciales que preferirían ir a un sitio web diferente que esperar a que el tuyo se cargue. Evita esto tomándote el tiempo para solucionar los problemas de CLS antes de que afecten a tus 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 agregan 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, usted 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 dice a la fuente de visualización API t0 inmediatamente usando una fuente del sistema. Una vez que su archivo de fuente se haya cargado, entonces lo intercambiará con la fuente que desea 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 puede utilizar 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 necesitarás sumergirte en el código CSS y JavaScript de tu sitio web.
Lo primero es lo primero, querrás 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 lo antes posible.
Mediante el uso de código JavaScript, puede implementar el Font Face Observer. Este código supervisará 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 la guía completa, echa un vistazo a la página de fontfaceObserver GitHub.
Como desarrollador de frontend, estos son algunos cambios simples que puedes hacer para mejorar los tiempos de carga de tus fuentes.
Fijar imágenes en su sitio web
La forma en que las imágenes se cargan en su sitio web afectará significativamente y reducirá los cambios de diseño acumulativos. Las imágenes cargadas sin atributos tienden a causar cambios masivos. Es por eso que es mejor utilizar las siguientes prácticas al agregar imágenes a su 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 «altura» a tus imágenes hizo poco o ningún 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 a partir de aquí.
Cuando subes una imagen como tal:
Ejemplo: <El monitoreo de errores h1>es impresionante</h1>
<p>Buscar y arreglar código roto rápidamente</p>
<img src=”Erron_image.jpg” alt=””>
<p>Con el software de monitoreo de errores correcto, puede mantener su código libre de errores.</p>
Sucede lo siguiente: El navegador del usuario leerá y descargará primero el HTML. 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 necesitas hacer es agregar las etiquetas de atributo height y width a tu imagen.
Ejemplo: <El monitoreo de errores h1>es impresionante</h1>
<p>Buscar y arreglar código roto rápidamente</p>
ancho=”450” altura=”450”>
<p>Con el software de monitoreo de errores correcto, puede mantener su código libre de errores.</p>
Cuando agrega el ancho y el alto a la imagen, le está diciendo al navegador que deje espacio para ella en la página web a medida que el resto del documento HTML se descarga.
Para un enfoque menos estricto, también puede usar cuadros de relación de aspecto CSS.
Ninguno de los dos enfoques es incorrecto, pero es imperativo que uses uno u otro para evitar cambios de diseño acumulativos en 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 yendo por todas partes si no tienes cuidado con ellos.
Cuando coloques anuncios en tu sitio web, usa estos consejos para evitar cambios en tu contenido:
-
Al igual que con las imágenes, debe asegurarse de que los anuncios tengan suficiente espacio reservado en su sitio web.
-
No coloques anuncios en la parte superior de tu página web. Existe la posibilidad de que esto cause un cambio de contenido para todo el contenido debajo de él.
-
Coloque anuncios cerca de la mitad 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.
Tenga 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 difícil 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 sabes cuánto espacio necesitas reservar cuando el espacio requerido cambia continuamente?
Puede solucionar esto subiendo un marcador de posición para sus incrustaciones reservando espacio en su 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 puedes usar para reducir los cambios de diseño acumulativos en tu 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 para evitar caer en el ranking de Google.
