¿Cómo garantizar que el texto permanezca visible durante la carga de fuentes web en WordPress?

Escrito por: avatar del autor Komal Bothra
avatar del autor Komal Bothra
Hola, soy Komal. Escribo contenido que habla desde el corazón y hace que WordPress funcione para ti. ¡Hagamos que tus ideas cobren vida!
Cómo garantizar que el texto permanezca visible durante la carga de fuentes web en WordPress

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.

Asegúrese de que el texto permanezca visible durante la carga de la fuente web - Advertencia de PageSpeed-Insights
Advertencia de PageSpeed ​​Insights

¿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.

formato-intercambio-de-visualización-de-fuente
el intercambio de visualización de fuentes solucionará el problema de FOIT

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 !

Publicaciones relacionadas

Mejores empresas de desarrollo de WordPress Enterprise

Mejores empresas de desarrollo de WordPress Enterprise para 2025

Si desea crear un sitio web elegante y profesional para su empresa, entonces está en

¿Cómo ocultar o mostrar contenido de bloque en WordPress?

Controlar la visibilidad del contenido en WordPress es una capacidad crítica para diseñadores, desarrolladores y gerentes de contenido.

Vender WordPress a clientes empresariales

Vender WordPress a clientes empresariales: 8 tácticas que realmente funcionan

Vender WordPress a pequeñas empresas es una cosa. Venderlo a clientes empresariales es un

Comience con Seahawk

Regístrese en nuestra aplicación para ver nuestros precios y obtener descuentos.