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