Ne charger un script que là où il sert : l’exemple du formulaireLoading a script only where it is needed: the contact form case

La plupart des extensions WordPress chargent leurs ressources sur toutes les pages du site, par précaution. Pour une extension de formulaire, cela veut dire des dizaines de kilo-octets de script et de style envoyés à chaque visiteur de la page d’accueil, qui n’y verra jamais un formulaire.Most WordPress plugins load their assets on every page of the site, as a precaution. For a form plugin that means dozens of kilobytes of script and style sent to every home page visitor, who will never see a form there.

Pourquoi les extensions font çaWhy plugins do this

Ce n’est pas de la négligence : une extension ne sait pas à l’avance où son code sera inséré. Un formulaire peut arriver par un bloc, par un widget, par un autre plugin, par un code court dans un gabarit. Charger partout est le seul comportement qui ne casse jamais rien. Le coût est reporté sur tous les visiteurs.This is not negligence: a plugin cannot know in advance where its code will be inserted. A form can arrive through a block, a widget, another plugin, a shortcode in a template. Loading everywhere is the only behaviour that never breaks anything. The cost is passed on to every visitor.

La correction, côté thèmeThe fix, on the theme side

Le thème, lui, sait exactement où se trouvent ses formulaires. On peut donc désactiver le chargement automatique, et le réactiver uniquement quand le contenu de la page contient effectivement le code court du formulaire. La vérification se fait au moment où WordPress a chargé le contenu, mais avant que les ressources soient émises.The theme, by contrast, knows exactly where its forms are. You can therefore disable the automatic loading and re-enable it only when the page content actually contains the form shortcode. The check happens once WordPress has loaded the content, but before assets are emitted.

• On désactive le chargement par défaut du script et du style de l’extension.Disable the plugin’s default script and style loading.
• On inspecte le contenu de la page affichée à la recherche du code court.Inspect the content of the page being displayed, looking for the shortcode.
• Si on le trouve, on réactive le chargement pour cette page seulement.If it is found, re-enable loading for that page only.

Le piège à éviterThe trap to avoid

Cette optimisation casse dès qu’un formulaire est inséré ailleurs que dans le contenu — dans un pied de page, dans une barre latérale, dans un gabarit. Il faut donc que la détection couvre tous les endroits réellement utilisés sur le site, et que ce soit documenté. Sinon, six mois plus tard, quelqu’un ajoute un formulaire dans le pied de page et passe une journée à comprendre pourquoi il ne s’envoie pas.This optimisation breaks the moment a form is inserted somewhere other than the content — in a footer, a sidebar, a template. The detection must therefore cover every place actually used on the site, and it must be documented. Otherwise, six months later, someone adds a form to the footer and spends a day working out why it will not submit.

Toute optimisation qui repose sur une hypothèse sur le contenu doit être écrite quelque part. Sans quoi elle devient un bug dormant, qui se réveillera au pire moment.Any optimisation that rests on an assumption about the content must be written down somewhere. Otherwise it becomes a dormant bug that will wake up at the worst possible moment.

Le gain, et sa mesureThe gain, and measuring it

Sur ce site, la manœuvre retire une quarantaine de kilo-octets et deux requêtes de toutes les pages sauf une. Ce n’est pas spectaculaire isolément — c’est cumulatif. Le même raisonnement appliqué à cinq extensions divise par deux le poids des ressources d’une page d’accueil.On this site the move removes about forty kilobytes and two requests from every page but one. It is not spectacular in isolation — it is cumulative. The same reasoning applied to five plugins halves the asset weight of a home page.