Déplacer automatiquement les fichiers JavaScript dans le footer de WordPress

Mis à jour le :

Pour optimiser le temps de chargement de votre site WordPress, il est conseillé de déplacer les scripts JavaScript dans le footer.

Pour vous faciliter la vie, Vladmir Prelovac nous propose un plugin se chargeant de déplacer automatiquement les éléments JS sans intervention dans le code avec JavaScript to Footer.

Si vous êtes un adepte de Firebug et de son compagnon YSlow, vous aurez noté que l’un des nombreux conseils d’optimisation des performances d’un site consiste à placer vos fichiers JS dans le footer.

Capture d'écran - Utilisation de YSlow pour Firebug et Mozilla Firefox
YSlow est une extension pour Firebug et Firefox indipensable !

En effet, ces derniers bloquent les téléchargements parallèles par votre navigateur et réduisent donc le temps de chargement. Malheureusement, les modifications à opérer sont bien souvent très techniques car elles requièrent l’édition de plugins dont les modifications sont perdues à chacune de vos mises à jour.

La solution consiste donc à utiliser le plugin JavaScript to Footer, ultra-léger puisque ne comportant qu’une dizaine de lignes.

Vous pouvez l’installer via le menu Extensions de votre administration ou en le téléchargeant via le lien ci-dessous :

  • JavaScript To Footer
    Plugin WordPress déplaçant automatiquement les fichiers JavaScript dans le footer.
    Taille du fichier :
    1.95 KB

Pour l’installer, activez simplement l’extension et vos scripts seront déplacés dans le footer.

Je vous recommande de vérifier chacune de vos pages exécutant vos différents JavaScript car il se peut que certains plugins ne fonctionnent plus correctement. Cette technique a pourtant été testée sur WordPress Channel avec succès : sans l’extension, 8 scripts sont présents dans le header. Avec l’extension, la moitié ont été déplacés dans le footer.

Cette technique est donc à expérimenter avec précaution bien qu’il soit très simple d’activer / désactiver cette extension. N’oubliez pas que Google a fait de la vitesse d’affichage d’un site un critère de référencement important.

Avatar de Aurélien Denis

Protégez votre site WordPress

Vos données sont précieuses,
ne prenez pas le risque de tout perdre.
Confiez-moi votre maintenance !

Ces articles devraient t’intéresser…

15 réponses
  1. Avatar de espaceastuces
    espaceastuces

    Enfin de compte tout est revenu dans l’ordre. J’ai du mal désactiver le plugin par contre il n’améliore rien du tout de mon coté au contraire.

  2. Avatar de espaceastuces
    espaceastuces

    Je précise que j’ai désactivé le plugin et même supprimé et je vous confirme que rien ne revient comme avant.

  3. Avatar de espaceastuces
    espaceastuces

    Bonjour, j’ai installé le plugin et avant son installation j’avais tout mes js et css de compressé une fois l’installation faite puis l’activation mes compressions ne sont plus pris en compte pourtant j’ai toujours la même configuration. sur gt metrix j’étais à 87 et maintenant 46.

  4. Avatar de JBK
    JBK

    Bonjour,

    Le plugin fonctionne bien mais il est incompatible avec Quick Chat,savez-vous comment le rendre compatible?

    CDT

    JBK

  5. Avatar de HBLoK
    HBLoK

    Bonjour,
    Je voulais savoir avant de tester ce plugin si après son activation j’ai des problèmes sur mon blog, si je le désactive tout retournera comme avant ?

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Non tu retourneras à l’état initial sans aucun problème. 😉

      1. Avatar de HBLoK
        HBLoK

        Merci à toi 🙂

  6. Avatar de abcmoteur
    abcmoteur

    Je n’ai pas trouvé de page de réglage.

    1. Avatar de Aurélien Denis
      Aurélien Denis

      C’est normal ! Il n’y aucune page Réglages car ce plugin se veut très simple.

      Si tu regardes le contenu du fichier, tu verras qu’en fait il ne fait qu’utiliser des outils de WordPress.

      Comme indiqué dans l’article, il y a des chances que cela ne fonctionne pas pour tout le monde… mais je ne tenais tout de même à vous faire partager cette information qui a très bien fonctionné chez moi ! 🙂

  7. Avatar de Café
    Café

    C’est normal, on ne peut pas charger le JS après qu’il soit appelé. Au final, le module appelle du vide, donc, ne fonctionne pas.

    Après, il ne faut pas être obnubilé par YSlow, le JS dans le footer, il n’y a quasiment aucun site qui respecte cela pour la raison donnée précédemment.

    L’avenir de ce plugin passera par la possibilité de choisir les plugins qui seront touchés par celui-ci afin de filtrer les modules qui ne peuvent fonctionner que si les chargements JS sont fait dans le header.

    1. Avatar de abcmoteur
      abcmoteur

      +1

  8. Avatar de Philippe Cadu
    Philippe Cadu

    Bonjour

    Bonne idée mais ça ne fonctionne pas chez moi , incompatible avec Fancy gallery

    Idée à suivre en tout Cas

    1. Avatar de Greg Lone
      Greg Lone

      C’est « normal », le plugin Fancy gallery ne charge pas ses scripts et css avec la fonction recommandée « enqueue » mais directement avec un « echo » :/

  9. Avatar de Abcmoteur
    Abcmoteur

    Merci pour cette astuces très facile à mettre en place. Je suis dans un processus d’amélioration des performances de mon blog et j’aimerai avoir ton avis là-dessus (lire jusqu’au dernier post) : http://forum.webrankinfo.com/mon-site-considere-comme-plus-lent-charger-que-des-autres-sites-t134320.html

    Merci beaucoup.

    1. Avatar de abcmoteur
      abcmoteur

      Ca casse un module de mon thème, je laisse de coté malheureusement.