Es posible que haya visto de PageSpeed Insights de "asegúrese de que el texto permanezca visible durante la carga de la fuente web" al probar la velocidad de su sitio web. Es posible que su sitio web esté listo para que su navegador lo pinte incluso antes de que sus fuentes web se hayan descargado por completo. Por lo tanto, los usuarios no podrán ver ni acceder a su contenido hasta que se haya descargado su fuente web. Durante este tiempo, estará oculto a la vista. Esto se conoce como el Flash of Invisible Text (FOIT) .
Se puede lograr una mejor experiencia de usuario asegurándose de que su texto siga siendo visible durante el proceso de carga de la fuente web. Ayuda a eliminar páginas en blanco así como cambios no deseados en el diseño.
¿Cómo afectan las cargas de fuentes web al rendimiento de la página?
Afecta de las siguientes maneras:
- Afecta la puntuación de PageSpeed Insights
- Afecta la calificación del cambio de diseño acumulativo
- Grados de la primera pintura con contenido y de la pintura con contenido más grande (Core Web Vitals)
- Experiencia de 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 unos segundos, los usuarios pueden tener una idea clara de si un sitio contiene o no la información que buscan leyendo su título y texto principal.
Es esencial evitar cambios repentinos de diseño causados por fuentes web para optimizar y mejorar la calificación del cambio de diseño acumulativo. Asegurarse de que su texto permanezca visible durante la carga le permite evitar movimientos inesperados de contenido (sin interacción del usuario). Las fuentes web pueden provocar cambios en el diseño si el texto invisible parpadea cuando se descarga y se procesa.
Cómo asegurarse de que el texto permanezca visible mientras se cargan fuentes web
Este instante en particular se conoce como el Destello del Texto Invisible (FOIT). El mensaje de error "Asegúrese de que el texto permanezca visible durante la carga de la fuente web" aparece debido a este FOIT, que es responsable de su apariencia.
Pantalla de fuente: intercambiar
La propiedad font-display es un descriptor CSS al que se puede acceder en todos los navegadores web actuales. El descriptor de visualización de fuentes analiza si la fuente se descargó o no y la fecha en que se descargó para decidir cómo se debe mostrar la fuente. Por ejemplo, una regla que utiliza @font-face utiliza el atributo font-display.
Hay muchas variables distintas sobre cómo se muestran las fuentes, incluido el bloque, el intercambio, el respaldo y el opcional. Utilice el valor de intercambio para evitar que se produzca FOIT y utilice el valor de intercambio para garantizar que el texto aparezca en la pantalla tan rápido como sea humanamente posible.
Utilice el complemento Swap Google Fonts Display en WordPress para automatizar esto. Elementor tiene una función incorporada para el intercambio de fuentes de Google. Otros complementos de optimización como WP Rocket, Flyingpress, Perfmatters ofrecen esto listo para usar.
Para una carga de fuentes más rápida, utilice preconexiones y precarga:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Esto también reducirá el CLS.
Concluyendo
Esta guía explica cómo solucionar el problema del "destello de texto invisible" en la información sobre la velocidad de la página asegurándose de que el texto permanezca visible durante la carga de la fuente web.
El tiempo de carga de la página y la velocidad de la página son factores importantes para brindar una buena experiencia de usuario, y solucionar este problema puede mejorar esta experiencia significativamente. Si una página no muestra todo, no se considera cargada. Por lo tanto, para evitar tiempos de espera y brindar a los usuarios el equilibrio, velocidad y estabilidad que desean, debes reducir el tiempo de carga del contenido en la página.
¡Acelere el rendimiento de WordPress con nuestros servicios de optimización de sitios de WordPress !
