Comme beaucoup, après fait un projet WordPress pour un client, je passe les dernières heures du contrat Ă l’optimisation du site.
J’utilise principalement ces outils pour le tester :
Si votre thème WordPress utilise des polices Google, il faut aussi essayer d’optimiser leurs chargements.
L’optimisation des polices Google
Il existe un certain nombre de mĂ©thodes pour charger les polices Google dans un thème WordPress, mais certaines sont plus efficaces que d’autres et Google a publiĂ© un article sur l’optimisation de l’utilisation des Google Font API.
Enqueue ou @import ?
L’un des moyens les plus simples de charger les polices Google consiste Ă crĂ©er un @import Ă partir de la feuille de style, mais Google recommande de charger directement dans le <head> du document.
Mais pour le faire vraiment correctement, on va utiliser la méthode : wp_enqueue_style()
Voici un exemple de comment charger la police « Source Sans Pro » correctement dans le <head>. Cet extrait de code est à coller dans functions.php de votre thème ( enfant bien sûr 🙂 ) :
function prefix_fonts() {
// Source Sans Pro
wp_enqueue_style( 'prefix_source_sans', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic', array(), null, 'screen' );
}
add_action( 'wp_enqueue_scripts', 'prefix_fonts' );Si vous souhaitez charger une police diffĂ©rente d’un thème enfant, vous devez supprimer la police du thème parent, puis charger la sienne en utilisant la mĂ©thode ci-dessus :
remove_action( 'wp_enqueue_scripts', 'prefix_fonts' );Combinaison de polices
Vous pouvez regrouper plusieurs polices dans un seul appel d’API. Cela Ă©conomisera sur les requĂŞtes HTTP et rendra le chargement plus efficace. Disons que vous vouliez charger les polices « Noto » et « Source Sans Pro », au lieu de les charger comme ceci avec une seule mise en file d’attente :
function prefix_fonts() {
// Source Sans Pro + Noto
wp_enqueue_style( 'prefix_fonts', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic|Noto+Serif:400,700,400italic', array(), null, 'screen' );
}
add_action( 'wp_enqueue_scripts', 'prefix_fonts' );Attention Ă SSL
Dans les deux exemples ci-dessus, vous remarquerez que j’ai mis en file d’attente la police en utilisant « // polices » plutĂ´t que « http: // ». C’est ainsi que le thème se chargera correctement mĂŞme si le site utilise le protocole SSL (https vs. http).
Utilisez seulement ce dont vous avez besoin
C’est probablement la suggestion la plus importante. Beaucoup de polices Google ont plusieurs poids diffĂ©rents (400, 600, 700, etc…) et styles (italique).
Si votre thème n’utilise pas ces poids ou styles spĂ©cifiques, assurez-vous qu’ils ne soient pas chargĂ©s. Et bien sĂ»r, ne mettez pas en file d’attente les polices qui ne sont pas utilisĂ©es.
Utilisez-vous cette méthode pour optimiser votre WordPress ?
Commentaires