Cómo corregir el error "Asegúrese de que el texto permanezca visible durante la carga de la fuente web" en PageSpeed

¿Recibe el error " Asegúrese de que el texto permanezca visible durante la carga de la fuente web " al verificar la información de velocidad de la página de Google y no sabe cómo resolver este problema? En general, sé cómo resolver este problema en un sitio web personalizado basado en PHP o HTML, pero cuando se trata de WordPress, también he tenido problemas.

Entonces, en esta guía, hablaremos sobre cómo podemos resolver este problema en WordPress (también compartiré los pasos para solucionar este problema en sitios personalizados basados ​​en PHP y HTML) y aumentar la puntuación de velocidad de su página eliminando este error.

¿Por qué muestra el error "Asegúrese de que el texto permanezca visible durante la carga de la fuente web" en PageSpeed?

Al probar su sitio web en PageSpeed ​​Insight de Google, es posible que haya visto un problema con el error "Asegúrese de que el texto permanezca visible durante la carga de la fuente web", y al hacer clic en el error, se mostrarán las URL completas de los archivos de fuentes.

Como puede ver en la imagen de arriba, también recibo el error "Asegurar que el texto permanezca visible durante la carga de Webfont" en este sitio web, y cuando hago clic en él, mostrará las URL completas de los archivos de fuentes de Google.

¿Por qué muestra un error?

Cuando un sitio web se carga en el navegador y detecta cualquier archivo de fuente personalizado aplicado a un texto, espera hasta que se descarga la fuente y, hasta ese momento, el texto es invisible. Una vez que se descargan los archivos de fuentes personalizadas, se aplica inmediatamente al sitio web, y esto se conoce como el destello de texto invisible.

¿Cómo arreglar el flash de texto invisible?

Arreglar el flash de texto invisible también puede arreglar el error "asegurar que el texto permanezca visible durante la carga de Webfont" en su sitio web, y solucionar este problema es muy fácil.

Puede solucionar este problema fácilmente agregando

 visualización de fuente: intercambio;

código en su actual

 @Perfil delantero {

}

Propiedad CSS.

Pero, ¿qué es @font-face?

Una @font-face es una regla CSS simple a través de la cual puede aplicar una fuente personalizada a un texto. Tiene extensiones como woff2, woff, ttf, etc. Por ejemplo, un código @font-face se verá así:

 @Perfil delantero {

familia de fuentes: Roboto, sans-serif;

visualización de fuente: intercambio; // ---> Se solucionará este problema.

estilo de fuente: normal;

peso de fuente: 400;

origen: url(Roboto.woff2);

}

Ahora aplicamos esta fuente en un párrafo usando;

 pag {

familia tipográfica: Roboto, sans-serif;

tamaño de fuente: 18px;

}

Cuando se carga un sitio web, indica que la etiqueta de párrafo tiene aplicada una fuente " Roboto ", e instantáneamente comienza a descargar la fuente utilizada en una etiqueta de párrafo. Hasta que descargue la fuente, el texto permanece invisible.

Esta es la razón por la que muestra el error " Asegúrese de que el texto permanezca visible durante la carga de la fuente web" en la velocidad de la página y al agregar font-display: swap; en su actual @font-face CSS puede resolver este problema.

Cómo solucionar este problema en WordPress

Si está utilizando WordPress y muestra este error en la información de velocidad de la página, entonces puede resolver este problema fácilmente con pasos simples. He compartido los pasos para resolver este error tanto en las fuentes locales como en las fuentes de Google.

Solución para fuentes de Google

Inicialmente, Google Fonts no agregará font-display: swap; regla a su fuente, pero ahora admiten un nuevo parámetro de consulta para aplicar font-display: swap; agregando el parámetro &display=swap al final del archivo de fuentes de Google.

Aquí cómo se ve;

Si es un desarrollador de temas o sabe cómo editar archivos de temas en WordPress, puede agregar fácilmente el parámetro &display=swap en su archivo de fuentes de Google.

Pero si no se siente cómodo editando los archivos del tema de WordPress, aún puede usar varios complementos como Asset CleanUp para agregar este parámetro y resolver el problema de "asegurar que el texto permanezca visible durante la carga de Webfont".

Cómo resolver este problema usando el complemento "Limpieza de activos"

Para aplicar el parámetro display=swap en su archivo de Google Fonts, debe descargar e instalar el complemento Asset CleanUp de la biblioteca de WordPress, que está disponible de forma gratuita.

Una vez que haya descargado y activado el complemento, haga clic en la opción "Limpieza de activos " en su panel de administración de WordPress> y luego haga clic en " Configuración " en "Limpieza de activos" para abrir la página de optimización.

Una vez que esté en la página de configuración , haga clic en la opción " Fuentes de Google ". Cuando hace clic en la opción Fuentes de Google , se abrirá aún más la configuración desde donde puede administrar fácilmente varias configuraciones para optimizar los archivos de fuentes de Google.

Algunas de estas configuraciones pueden incluir;

Una vez que esté en la configuración de archivos de fuentes de Google, en la configuración " Aplicar visualización de fuente: valor de propiedad CSS " y cámbielo de " No aplicar (predeterminado) " a " intercambiar (más usado) " y agregará &display= cambie el parámetro a todos sus archivos de fuentes de Google.

Solución para fuentes de temas y complementos

La mayoría de las veces, su tema o complemento de WordPress carga otras fuentes como font-awesome o icon fonts y también muestra el mismo problema en Google PageSpeed ​​Insight.

Esta también es una solución fácil, pero requiere un poco de conocimiento de edición de WordPress. Si no se siente cómodo editando los códigos, también puede usar la versión premium del complemento " Asset CleanUp Pro " para agregar automáticamente font-display: swap; Propiedad CSS en su tema de WordPress o hojas de estilo de complementos.

Para resolver este problema con Asset CleanUp Pro, haga clic en la opción "Limpieza de activos" en su panel de administración de WordPress > y luego haga clic en " Configuración " en "Limpieza de activos" para abrir la página de optimización.

Una vez que esté en la página "Limpieza de activos " > " Configuración ", haga clic en la opción " Fuentes locales " para abrir la configuración de personalización de las fuentes locales.

Una vez que se haya abierto la configuración de personalización de " Fuentes locales " en su navegador, seleccione " intercambiar (más utilizado) " de la opción de selección dada en " Aplicar visualización de fuente: valor de propiedad CSS " para agregar automáticamente visualización de fuente: intercambio; en todas sus hojas de estilo.

Terminando

En esta guía, hemos hecho todo lo posible para explicar cómo puede solucionar el problema de "asegurarse de que el texto permanezca visible durante la carga de la fuente web" o "destello de texto invisible" en la información de la velocidad de la página.

El tiempo de carga y la velocidad de la página son factores importantes para ofrecer buenas experiencias de usuario, y solucionar este problema puede proporcionar una experiencia de usuario mucho mejor. Y una página no se considerará cargada a menos que muestre todo lo que hay sobre ella.

Por lo tanto, debe reducir el tiempo de carga de contenido en la página para que las páginas no se agoten y los usuarios puedan obtener el equilibrio, la velocidad y la estabilidad que desean. Si también tiene una velocidad lenta del sitio web, puede consultar nuestra publicación sobre la optimización de la velocidad del sitio web para optimizarla correctamente.