Como arreglar "Asegúrese de que el texto permanezca visible durante la carga de la fuente web" Error en PageSpeed

¿Estás recibiendo el "Asegúrese de que el texto permanezca visible durante la carga de Webfont” 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, aquí 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 Información de velocidad de página de Google, es posible que haya visto un problema del 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 fuente.

Como se 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

font-display: swap;

código en su actual

@font-face {

}

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í:

@font-face {

font-family: Roboto,sans-serif;

font-display: swap; // ---> It will fix this issue.

font-style: normal;

font-weight: 400;

src: url(Roboto.woff2);

}

Ahora aplicamos esta fuente en un párrafo usando;

p {

font-family: Roboto, sans-serif;

font-size: 18px;

}

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

Por eso muestra “asegúrese de que el texto permanezca visible durante la carga de la fuente web” error en la velocidad de la página y agregando visualización de fuente: intercambio; en tu actual @Perfil delantero 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á el visualización de fuente: intercambio; regla a su fuente, pero ahora admiten un nuevo parámetro de consulta para aplicar font-display: swap; agregando el &mostrar=intercambiar parámetro al final del archivo de fuente 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 &mostrar=intercambiar parámetro en su archivo de fuente de Google.

Pero si no se siente cómodo editando los archivos de temas de WordPress, aún puede usar varios complementos como Limpieza de activos 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 mostrar = intercambiar parámetro en su archivo de fuentes de Google, debe descargar e instalar el complemento de limpieza de activos de la biblioteca de WordPress, que está disponible de forma gratuita.

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

Una vez que estés en el ajustes página, haga clic en el "Fuentes de Google" opción. Cuando haces clic en el Fuentes de Google opción, 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 el "Aplicar font-display: valor de propiedad CSS” configuración y cámbielo de “No aplicar (predeterminado)" a "intercambio (más usado)” y agregará el &display=intercambiar 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 de “Limpieza de activos Pro” complemento para agregar automáticamente el visualización de fuente: intercambio; Propiedad CSS en su tema de WordPress o hojas de estilo de complementos.

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

Una vez que esté en el “Limpieza de activos” > “Ajustes” página, haga clic en el “Fuentes locales” para abrir la configuración de personalización de Fuentes locales.

Una vez el "Fuentes locales” la configuración de personalización se ha abierto en su navegador, seleccione “intercambio (más usado)” de la opción de selección dada bajo el “Aplicar font-display: valor de propiedad CSS” para agregar automáticamente font-display: swap; 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.