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 bloqueoPeriodo de intercambio
swapNingunoInfinite
fallbackMuy breveBreve

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

(1 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

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

  1. ¡Hola Fernando! Estupendo artículo, lo veo muy práctico. Me venía una duda sobre todo esto y las core Web Vitals. Esto decimos que ayuda por el FID, por no bloquear la carga, pero… ¿no podría perjudicarnos en el CLS? Porque esto siempre penaliza las cosas que se «transforman sobre la marcha». ¿No puede ocurrir que en ocasiones haya que sopesar si queremos perjudicar un valor para beneficiar a otro?

    1. En este caso no he detectado ese problema, lo he aplicado aquí mismo y no lo ha perjudicado. Pero sí, según que optimización podría ocurrir que por mejorar una métrica perjudiques otra, y habría que decidir qué es mejor para los usuarios

Deja un comentario

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

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido