Contact Form 7: gérer proprement le chargement des scripts

Contact Form 7 fait partie des plugins WordPress les plus populaires. Sa souplesse d’utilisation est certainement l’une des clés de ce succès. Comme beaucoup d’autres, cette extension utilise des scripts, et des feuilles de styles, qu’elle charge systématiquement.
Pour alléger nos pages, et optimiser les performances, nous allons voir comment effectuer ces chargements uniquement lorsque cela est nécessaire.

Gestion des scripts

Solution 1

La méthode consiste à supprimer le chargement des scripts pour les pages où ils ne sont pas nécessaires.

1
2
3
4
5
6
7
8
9
<?php
function print_scripts() {
	if (! is_page('contact')) {
		wp_deregister_script('contact-form-7');
	}
} // End of MOT_print_scripts
 
add_action( 'wp_print_scripts',  'print_scripts'	);
?>

Ici, nous supprimons le chargement des scripts pour tous les articles et les pages, autre que la page « contact »

Solution 2

Cette optimisation consiste

  1. à supprimer les chargements pour tout le blog,
  2. puis à les ré-activer pour les pages concernées.

Cette méthode est proposée par l’auteur: Load Javascript and Stylesheet only when it is necessary.

La première étape consiste donc à désactiver le chargement des scripts. Pour cela, il faut éditer le fichier wp-config.php, situé à la racine du blog, et ajouter les lignes suivantes:

1
2
3
<?php
define('WPCF7_LOAD_JS', false);
?>

Pour charger les scripts dans les bonnes pages, il faut ensuite modifier le fichier functions.php de votre thème, en y ajoutant les lignes suivantes:

1
2
3
4
5
6
7
8
<?php
wp_head('wp_head', 'my_head');
function my_head() {
	if (function_exists( 'wpcf7_enqueue_scripts' ) && is_page_template('contact.php')) {
		wpcf7_enqueue_scripts();
	}
} // End of my_head
?>

Dans cette exemple, nous considérons que toutes les pages contenant un formulaire utilisent la même template (contact.php).

Si vous n’utilisez pas de template, vous pouvez charger les scripts en fonction du nom ou de l’identifiant de la page:

1
2
3
4
5
6
7
8
<?php
wp_head('wp_head', 'my_head');
function my_head() {
	if (function_exists( 'wpcf7_enqueue_scripts' ) && is_page('Contact')) {
		wpcf7_enqueue_scripts();
	}
} // End of my_head
?>

Gestion des styles

Là encore nous avons plusieurs solutions possibles

Solution 1

Même démarche que pour les scripts.

1
2
3
4
5
6
7
8
9
10
11
<?php
function print_styles() {
 
	if (! is_page('contact')) {
		wp_deregister_style('contact-form-7');
		wp_deregister_style('contact-form-7-rtl');
	}
}  // End of MOT_print_styles
 
add_action( 'wp_print_styles',   'print_styles' 	);
?>

Ici nous testons la page « contact ».

Solution 2

Même démarche que pour les scripts. Il faut modifier le fichier wp-config.php

1
2
3
<?php
define('WPCF7_LOAD_CSS', false);
?>

Puis charger les styles lorsqu’ils sont nécessaires. Nous pouvons utiliser, pour cela, le code déjà mis en place pour les scripts:

1
2
3
4
5
6
7
8
9
<?php
wp_head('wp_head', 'my_head');
function my_head() {
	if (function_exists( 'wpcf7_enqueue_scripts' ) && is_page('Contact')) {
		wpcf7_enqueue_scripts();
		wpcf7_enqueue_styles();
	}
} // End of my_head
?>

Solution 3

Cette solution consiste à supprimer le chargement des styles pour l’ensemble du blog, et de copier les styles du plugins, dans la feuille de styles du thème.
Modification du fichier wp-config.php

1
2
3
<?php
define('WPCF7_LOAD_CSS', false);
?>

Puis il faut copier/coller le contenu du fichier wp-content/plugins/contact-form-7/styles.css, dans le fichier styles.css de votre thème.

Cette méthode a un avantage principal: il réduit le nombre de feuille de styles à charger (gain significatif en performance), mais elle a également un inconvénient principal: s’il y a des changements de styles, au niveau du plugin (lors d’une mise à jour), il faut de nouveau faire le copier/coller.

Conclusion

Comme vous pouvez le contater, Contact Form 7 peut être optimisé de multiples façons. Personnellement, j’utilise la solution 2 pour les scripts, et la solution 3 pour les styles. Quelle que soit la solution, il faut bien veiller à

  • modifier le fichier <code>function.php</code>, lorsque  vous changez de thème, ou lorsque vous modifié la liste des pages contenant un formulaire,
  • vérifier périodiquement, que les mises à jour n’entraînent pas de changements au niveau de votre thème, surtout pour les styles.

 

Références

2 thoughts on “Contact Form 7: gérer proprement le chargement des scripts”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *