Optimiser le formulaire de contact 7 pour de meilleures performances

Le formulaire de contact 7 est l’un des plugins de formulaire de contact gratuits les plus utilisés. Au moment de cet article, il a plus de 16 millions de téléchargements. Je pense qu'il est juste de considérer le plugin de formulaire de contact le plus utilisé.

Optimiser l’utilisation du formulaire de contact 7 avec ce large public ressemble à l’optimisation d’un nombre important d’utilisateurs WordPress. Si vous ne le connaissez pas déjà, Contact Form 7 inclut ses fichiers CSS et JavaScripts sur chaque page de votre site..  

Cette inclusion redondante et inutile devrait être abordée. 

Pourquoi fait-on ça?

Un fichier CSS et / ou JavaScript supplémentaire sur chaque page sera comme un bagage supplémentaire que vous ne voudrez pas récupérer lorsque vous marchez à pied. Deux extra HTTP les demandes peuvent affecter négativement le temps de chargement de votre site. 

Si vous avez lu mon Guide du débutant sur WordPress SEO de Yoast, vous êtes conscient du fait que Google adore classer les sites dont le temps de chargement est inférieur à 1s. Les 14 premiers Ko sont les critiques.

Vous voudrez peut-être charger ces fichiers CSS et JavaScript uniquement sur les pages où vous utilisez le plug-in Contact Form 7 pour créer un formulaire. Cela évitera à votre site de charger des fichiers supplémentaires sur chaque page. Ces fichiers ne seront chargés que sur les pages contenant des formulaires de contact..

Selon l'auteur du plug-in, Takayuki Miyoshi:

Je comprends le sentiment, mais il y a une difficulté technique pour un plugin à savoir si la page contient des formulaires de contact ou non au début du chargement. 

Optimisation du formulaire de contact 7

Étape 1: désinscrire des fichiers CSS CF7

Tout d’abord, nous devons vérifier quelles pages contiennent des formulaires de contact. Ensuite, nous devons désenregistrer le fichier CSS généré par le plug-in CF7 pour toutes les autres pages.. 

Trouver le slug de l'URL de la page 

Trouvons le slug de votre page avec le formulaire de contact. Aller à Des pages. Cliquez sur Edition rapide et copier la limace.

Prenons un exemple explicite: imaginons que vous avez une page intitulée "Contactez-nous" qui contient un slug d’URL Contactez nousAjoutez le code suivant dans votre thème functions.php déposer à la fin.

// Annulation de l'enregistrement du formulaire de contact 7 styles add_action ('wp_print_styles', 'aa_deregister_styles', 100); fonction aa_deregister_styles () if (! is_page ('contactez-nous')) wp_deregister_style ('contact-form-7');  

Ce code ajoute une fonction aa_deregister_styles () qui vérifie si la page n'est pas Contactez nous puis désenregistre le style CSS par CF7 pour les autres pages.

Étape 2: désinscription des fichiers JavaScript CF7

De même avec les sources JavaScript, nous allons le désenregistrer pour toutes les pages sauf celles avec des formulaires de contact.. 

Ajoutez le code suivant dans votre thème functions.php fichier à la fin:

// Annulation de l'enregistrement du formulaire de contact 7 Fichiers JavaScript sur toutes les pages sans formulaire add_action ('wp_print_scripts', 'aa_deregister_javascript', 100); function aa_deregister_javascript () if (! is_page ('contactez-nous')) wp_deregister_script ('contact-form-7'); 

Ce code ajoute une fonction aa_deregister_javascript () qui vérifie si la page n'est pas Contactez nous puis désenregistre le fichier JavaScript par CF7 pour toutes les autres pages.

C'est tout. Vous avez optimisé avec succès votre plugin CF7.

Que faire si j'ai plusieurs formulaires sur plusieurs pages??

La réponse à cette question est simple: j'utilise is_page ()  fonction qui a une référence de fonction massive sur WordPress Codex: is_page (). Vous pouvez ajouter un tableau de pages. Il peut obtenir une valeur de paramètre comme ID de page, titre de page ou slug de page.

/ ** * is_page (array (ID, 'slug', 'Title')); * Renvoie true lorsque les pages affichées sont post ID 42 ou post_name "about-me" ou post_title * / is_page (array (42, 'about-me', 'Contact'));

Ressources 

  • WordPress Codex: is_page ()
  • Formulaire de contact 7