Es posible que al probar la velocidad de su sitio web, haya visto de PageSpeed Insights que indica que el texto debe permanecer visible durante la carga de las fuentes web. Su sitio web podría estar listo para cargarse en el navegador incluso antes de que las fuentes web se hayan descargado por completo. Por lo tanto, los usuarios no podrán ver ni acceder a su contenido hasta que las fuentes web se hayan descargado. Durante este tiempo, permanecerán ocultas. Esto se conoce como el problema del texto invisible (FOIT, por sus siglas en inglés) .
Se puede lograr una mejor experiencia de usuario al garantizar que el texto siga siendo visible durante la carga de la fuente web. Esto ayuda a eliminar páginas en blanco y cambios de diseño no deseados.
¿Cómo afectan las cargas de fuentes web al rendimiento de la página?
Afecta de las siguientes maneras:
- Impacta la puntuación de PageSpeed Insights
- Afecta la calificación de cambio de diseño acumulativo
- Calificaciones de la primera pintura de contenido y la pintura de contenido más grande (Core Web Vitals)
- Experiencia del usuario y tasas de conversión
La ausencia de texto también afecta la experiencia del usuario durante la carga de Webfont: a nadie le gusta acceder a un sitio web con una página en blanco. En pocos segundos, los usuarios pueden saber si un sitio contiene la información que buscan leyendo su título y texto principal.
Es fundamental evitar cambios repentinos de diseño causados por las fuentes web para optimizar y mejorar el grado de cambio de diseño acumulativo. Asegurarse de que el texto permanezca visible durante la carga permite evitar movimientos inesperados del contenido (sin interacción del usuario). Las fuentes web pueden causar cambios de diseño si el texto invisible parpadea al descargarse y renderizarse.
Cómo asegurarse de que el texto permanezca visible al cargar fuentes web
Este instante en particular se conoce como el Flash de Texto Invisible (FOIT). El mensaje de error "Asegurarse de que el texto permanezca visible durante la carga de la fuente web" aparece debido a este FOIT, responsable de su aparición.
Visualización de fuentes: swap
La propiedad font-display es un descriptor CSS accesible en todos los navegadores web actuales. Este descriptor verifica si la fuente se descargó y la fecha de descarga para determinar cómo se mostrará. Por ejemplo, una regla que usa @font-face utiliza el atributo font-display.
Existen muchas variables distintas que determinan cómo se muestran las fuentes, como bloque, intercambio, reserva y opcional. Use el valor de intercambio para evitar que se produzca FOITy para garantizar que el texto aparezca en pantalla lo más rápido posible.
Usa el plugin "Swap Google Fonts Display" en WordPress para automatizar esto. Elementor incluye una función para intercambiar las fuentes de Google. Otros plugins de optimización como WP Rocket, Flyingpress y Perfmatters ya la ofrecen.
Para una carga más rápida de fuentes, utilice preconexiones y precarga:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Esto también reducirá el CLS.
Terminando
Esta guía explica cómo solucionar el problema del “destello de texto invisible” en Page Speed Insight garantizando que el texto permanezca visible durante la carga de Webfont.
El tiempo y la velocidad de carga de una página son factores importantes para ofrecer una buena experiencia de usuario, y solucionar este problema puede mejorarla significativamente. Si una página no muestra todo lo que contiene, se considera que no está cargada. Por lo tanto, para evitar tiempos de espera y ofrecer a los usuarios el equilibrio, la velocidad y la estabilidad que buscan, debe reducir el tiempo de carga del contenido de la página.
¡Acelere el rendimiento de WordPress con nuestros servicios de optimización de sitios WordPress!
