Blog

Optimisation de contact form 7 sur WordPress

Écrit le 17 09 2012 par Kévin MET _

Et c’est reparti pour un billet sur WordPress! Et oui, j’aime bien parler de WordPress. Mais en même temps, aujourd’hui on va parler d’un plugin en particulier. Il s’agit de Contact form 7, ce plugin permet de créer des formulaires de contact de manière très simple et très souple. Pour plus d’informations sur le plugin je vous laisse faire un tour sur le site de l’auteur de contact form 7. Mais le problème de ce plugin c’est qu’il nous charge sur chaque page deux js et un CSS et ça c’est nul et lourd!

Alors ce qu’on va voir dans ce billet, c’est comment faire pour que ces js ne se chargent plus que dans la page contenant votre formulaire de contact et comment intégrer le CSS dans votre feuille de style principale.

En bref, on va voir un sujet qui me tient réellement à cœur et qui est : comment accélérer le chargement de WordPress ?

Bon on va arrêter le blabla ici et on va commencer à mettre les mains dans le cambouis. Pour commencer, on va ajouter les lignes de code suivantes dans le fichier wp-config.php qui se trouve à la racine de WordPress :


/*Contact form 7*/
define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

Attention, ces lignes de codes ne doivent en aucun cas être ajoutées à la fin du fichier, pour être sur que ça fonctionne, je vous conseille de coller ça après les « define » concernant votre base de données.

Bon, c’est logique mais je le dis quand même, ces lignes permettent de ne plus charger le css et le js sur chaque page de votre WordPress. Du coup, on va devoir modifier notre thème pour que le plugin contact form 7 fonctionne quand même correctement. On va commencer par le plus simple, le css.

Il vous suffit de copier le contenu du fichier styles.css qui est contenu dans le dossier du plugin contact form 7 et de le coller à la fin de votre fichier style.css de votre thème. Et si vous vous demandez à quoi peut bien servir de faire ça je vais vous l’expliquer tout de suite :

Le fait pour votre serveur de servir le minimum de fichier possible pour afficher vos pages l’aide grandement à gagner en performances. On ne gagne donc pas sur le poids total de votre page mais on allège un peu la charge de votre serveur qui au lieu de servir deux fichier CSS ne devra plus en servir qu’un seul grâce à cette simple astuce. De plus, on reduit le nombre de requêtes HTTP que fait le navigateur et cela permet aussi de gagner du temps côté client.

Ensuite on va s’occuper des js. Et comme le mec qui a pondu contact form 7 a pensé à tout, vous allez voir que c’est super simple ! L’idée est donc de charger le java script uniquement sur notre page contact et pour cela, rien de plus simple. On va éditer le fichier header.php de notre thème et y ajouter un petit bout de code conditionnel :


<?php
if (is_page_template('contact.php'))
	wpcf7_enqueue_scripts();
?>

Et voilà, il suffit d’appeler la fonction wpcf7_enqueue_scripts() pour que le js se charge. Dans ma situation j’ai créé un template de page pour ma page contact donc j’utilise ce marqueur conditionnel mais vous pouvez en utiliser beaucoup d’autres. La liste est disponible sur cette adresse : marqueurs conditionnels WordPress.

Un autre exemple qui vous permet de charger le js en fonction du titre de la page serait le suivant :


<?php
if (is_page('Contact'))
	pcf7_enqueue_scripts();
?>

Et pour les petits malins qui voudraient encore plus optimiser en chargeant le js dans le footer, sachez que ce n’est pas possible car la fonction wpcf7_enqueue_scripts() doit obligatoirement être appelée avant la fonction wp_head().

♥ Partage sur tes réseaux sociaux ♥
Kévin MET
Kévin MET

Auteur de ce blog et gérant de la société MNT-TECH, je publie sur ce blog lorsque le temps me le permet et lorsqu'un sujet qui me parait intéressant n'a pas encore été abordé en français. Toutes les informations techniques présentes sur cette page peuvent être réutilisées moyennant le fait de citer la source.