Precarga las fuentes de Astra para mejorar los tiempos de carga y métricas web

Cuando analizas tu web con el tema Astra desde Google PageSpeed es muy probable que los resultados de las métricas web principales te muestren un problema con las fuentes del tema, indicando que deberías precargarlas mediante rel="preload".

Lo que te «propone» es que utilices esta técnica de optimización para que de ese modo las fuentes no retrasen la carga del contenido de la página, priorizando la obtención de recursos que ya sabes que tu web va a necesitar.

Pues bien, vamos a hacerle caso, porque es cierto que si ya sabes que vas a necesitar las fuentes de Astra lo mejor es precargarlas y que estén disponibles cuando un visitante quiera visualizar las páginas de tu web WordPress.

Podemos hacerlo de varias maneras…

Precarga de fuentes de Astra con código

La manera más independiente de hacerlo es añadiendo el siguiente código al archivo functions.php del tema hijo de Astra:

/* Precargar fuentes Astra */
add_filter( 'astra_enable_default_fonts', 'temp_disable_astra_fonts' );
function temp_disable_astra_fonts( $load ) {
$load = false;
return $load;
}
add_action( 'wp_head', 'add_astra_fonts_preload', 1 );
function add_astra_fonts_preload() {
?>
<link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.woff" as="font" crossorigin />
<link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.ttf" as="font" crossorigin />
<link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.svg#astra" as="font" crossorigin />
<style type='text/css'>
<?php
echo '@font-face {font-family: "Astra";src: url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");font-weight: normal;font-style: normal;font-display: fallback;}';
?>
</style>
<?php
}

Guarda los cambios en el archivo y ya está.

Precarga de fuentes de Astra con SG Optimizer

Si estás alojado en SiteGround, y utilizas el plugin SG Optimizer para optimizar tu web, algo totalmente recomendable, es más fácil la precarga de fuentes.

Solo tienes que ir al menú de administración «SG Optimizer →  Optimización de la portada» y activar la «Optimización de fuentes».

A continuación introduce las siguientes URLs, una a una, en la caja vacía y pulsa el botón de PRELOAD:

https://AQUI-TU-DOMINIO.COM/wp-content/themes/astra/assets/fonts/astra.woff
https://AQUI-TU-DOMINIO.COM/wp-content/themes/astra/assets/fonts/astra.ttf
https://AQUI-TU-DOMINIO.COM/wp-content/themes/astra/assets/fonts/astra.svg

Nota importante: Modifica las URLs para poner tu dominio, no dejes las del ejemplo.

Y aparecerán en la lista de precarga así:

Ya está, no hay nada más que hacer.

Precarga de fuentes de Astra con WP Rocket

Si utilizas el plugin de caché y optimización WP Rocket el procedimiento es parecido al anterior.

En este caso deberás ir a «Ajustes → WP Rocket → Precargar → Precargar Fonts» y en la caja vacía de «Fonts a precargar» añade las mismas URLs que antes, una en cada línea, pero sin el dominio, así:

/wp-content/themes/astra/assets/fonts/astra.woff
/wp-content/themes/astra/assets/fonts/astra.ttf 
/wp-content/themes/astra/assets/fonts/astra.svg

Quedará como en esta captura:

Guarda cambios y ya lo tienes.

Precarga de fuentes de Astra con Autoptimize

Para terminar veremos cómo precargar las fuentes de Astra con el plugin Autoptimize, que también se puede.

En esta ocasión iremos al menú «Ajustes → Autoptimize → Extras → Precarga de peticiones específicas (usuarios avanzados)» y añadiremos las URLs completas a las fuentes, como con SG Optimizer, pero en este caso separadas por comas, así:

Como siempre, guarda los cambios.

¿Se pueden precargar las fuentes de Astra con otros plugins?

Sé que hay otros plugins que lo permiten pero he optado por contemplar en esta guía los más populares.

No obstante, si quieres saber cómo hacerlo con otro plugin lo reviso y actualizo la guía ;

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