Optimizar la carga de fuentes en tema Astra

El tema Astra, además de ser uno de los temas de WordPress más populares, posee ciertas virtudes, sin embargo muchas cosas que presenta se pueden mejorar. Una de estas cosas para mejorar es cambiar la forma en que Astra carga las fuentes en su sitio web.

De forma predeterminada, el tema Astra utiliza el parametro fallback de la propiedad en font-display, que define cómo se cargan y se muestran las fuentes en el navegador.

Con este parámetro el navegador ocultará el texto durante unos 100 milisegundos y, si la fuente aún no se ha descargado, se utilizará una fuente alternativa. Cambiará a la nueva fuente cuando se descargue, pero solo por un tiempo de intercambio corto, alrededor de 3 segundos.

Sin embargo con el parámetro swap se indica al navegador que use la fuente alternativa para mostrar el texto hasta que la fuente personalizada se haya descargado por completo. Esto también se conoce como “destello de texto sin estilo” o FOUT.

Aunque existen mejores formas de optimizar la carga de fuentes web al optimizar su sitio web el parámetro swap no bloquea la carga de sus páginas mientras se cargan las fuentes, lo que dará como resultado mejores puntuaciones en el análisis de optimización , por ejemplo PageSpeed Insights.

Luego de la explicación técnica de por qué es mejor usar swap que fallback, si desea aplicar esta optimización al tema Astra, simplemente agregue el siguiente código al final del archivo functions.php del tema hijo Astra o bien el tema principal ubicado en:

CPanel > Administrador de archivos > Public_html > Dominio > wp-content > Themes > Astra o bien Astra child > archivo Functions.php

El código que debemos agregar en el archivo functions es el siguiente:

/* Optimizar fuente en Astra */
add_filter( 'astra_fonts_display_property', 'astra_replace_fallback_with_swap' );
function astra_replace_fallback_with_swap( $property ) {
$property = 'swap';
return $property;
}

Guarde los cambios, borre las cachés si las tiene activas y de esta forma mejorará los tiempos de carga y la puntuación en las puntuaciones de métricas web.