Cómo optimizar la carga de fuentes tipográficas en Astra sin necesidad de plugins

El tema Astra, aparte de ser uno de los temas WordPress más populares, destaca por su velocidad, superando a la mayoría del resto de temas, pero aún  hay cosas que se pueden mejorar.

Una de estas cosas a mejorar es cambiar el modo en el que Astra carga las fuentes en tu web.

Por defecto, el tema Astra utiliza el parámetro fallback para la propiedad font-display, que define cómo se cargan y muestran las fuentes en el navegador.

Con este parámetro el navegador ocultará el texto durante unos 100 milisegundos y, si todavía no se ha descargado la fuente, se usará una alternativa. Cambiará a la nueva fuente cuando se descargue, pero solo durante un breve periodo de tiempo de intercambio, en torno a los 3 segundos.

Por el contrario, con el parámetro swap, se indica al navegador que utilice la fuente de reserva para mostrar el texto hasta que la fuente personalizada se haya descargado completamente. Esto también se conoce como «fogonazo de texto sin estilo» o FOUT.

Si comparamos el comportamiento de la carga de tus páginas con ambos parámetros tenemos lo siguiente:

Periodo de bloqueo Periodo de intercambio
swap Ninguno Infinite
fallback Muy breve Breve

Aunque hay modos mejores de optimizar la carga de fuentes web a la hora de optimizar tu web el parámetro, el parámetro swap no bloquea la carga de tus páginas mientras se cargan las fuentes, lo que redundará en mejores puntuaciones en los análisis de optimización, por ejemplo de las Core Web Vitals.

Vista la explicación técnica de por qué es mejor usar swap que fallback, si quieres aplicar esta optimización al tema Astra solo tienes que añadir el siguiente código al final del archivo functions.php del tema hijo de Astra:

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

Guarda los cambios, vacía cachés si las tienes activas, y comprueba que se ha realizado el cambio, buscando en el código fuente (clic derecho + Ver código fuente) de tus páginas la propiedad font-display para comprobar que usa el parámetro swap.

Habrá cambiado de font-display:fallback a font-display:swap y mejorarán tus tiempos de carga y puntuación en las puntuaciones de métricas web vitales (ya sabes, las core web vitals).

La entrada Cómo optimizar la carga de fuentes tipográficas en Astra sin necesidad de plugins la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *