Optimiser WordPress et JavaScript avec l’analyse différée
access_time
hourglass_empty
person_outline

Optimiser WordPress et JavaScript avec l’analyse différée

Introduction

Pour optimiser WordPress et JavaScript, vous pouvez différer l’analyse de ce dernier. Cela vous fera gagner en rapidité et en performance. C’est un facteur clé dans la réussite de votre site web puisque les internautes sont impatients. En général, le code JavaScript est placé entre les balises <head> </head> et quand un site s’ouvre, il charge le code de haut en bas (sachant que le head est toujours en haut du code), ce qui signifie que si vous avez beaucoup de JavaScript ou de longues chaînes, il faudra plus de temps pour que le contenu du site Web apparaisse, car il charge d’abord le JavaScript. En différant l’analyse de JavaScript, le site n’attendra pas que le code JS soit chargé, ce qui entraînera un temps de chargement plus rapide. Dans ce guide, nous allons aborder deux manières de différer l’analyse de JavaScript dans WordPress.

Ce dont vous aurez besoin

Avant d’optimiser WordPress et JavaScript, vous aurez besoin des éléments suivants:

Étape 1 – Analyse du site

Pour savoir si cette manipulation vous sera utile, vous devez analyser votre site WordPress à l’ aide de l’outil  GTMetrix .

Le score moyen dans GTMetrix est de 71%. Voici les résultats après avoir analysé un site test sous WordPress :

Résultats GTMetrix Defer parsing JS

Autant dire que nous en avions besoin ! Si vous êtes au delà de 90%, il vous sera inutile de suivre la procédure suivante !

Étape 2 – Différer l’analyse de JavaScript dans WordPress

Il y a plusieurs de manières de différer l’analyse de JavaScript dans WordPress. Les deux sont bonnes, selon vos attentes.

IMPORTANT! Assurez-vous de sauvegarder sauvegarder votre site Web avant de continuer.

Option 1 – Différer l’analyse de JavaScript dans WordPress grâce à des plugins

La manière la plus facile et rapide de différer l’analyse de JavaScript est de passer par des plugins WordPress tels que WP Deferred JavaScript .

Un autre plugin qui vous aidera à différer l’analyse de JavaScript est Speed ​​Booster Pack. Il vous fournira également quelques techniques supplémentaires d’optimisation pour votre site WordPress.

Après l’installation de Speed ​​Booster Pack, vous devrez accéder aux Paramètres du plugin.

Paramètres Speed Booster Pack

Cochez la case Defer parsing of javascript files et appuyez sur Enregistrer les modifications

Enregistrer Defer parsing javascript

Si vous ne savez pas comment installer des plugins WordPress, vous pouvez trouver un guide qui vous explique comment faire ici !

Option 2 – Différer l’analyse de JavaScript dans WordPress grâce à functions.php

Pour retarder l’analyse de JavaScript, vous devez copier cela au bas de votre fichier wp-includes/functions.php :

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Étape 3 – Test des changements

Utilisez le même outil de test de vitesse et retestez votre site Web. Voici les résultats des performances de notre site après le rapport d’analyse de JavaScript:

Résultats positifs GTMetrix Defer JS

En suivant ces quelques étapes faciles, vous avez appris à accélérer votre site Web pour une expérience utilisateur plus agréable !

Conclusion

Bravo et merci d’avoir suivi ce tutoriel jusqu’au bout !

Dans ce bref guide, nous vous avons appris à optimiser WordPress et JavaScript pour gagner en performance. Rappelez-vous que plus votre sera rapide et ergonomique, plus vos visiteurs viendront et, surtout, resteront !

J’espère vous avoir aidé et vous voir très vite dans un prochain tutoriel !

L'auteur

Author

Brice Basty / @bricebasty

Tutoriels relatifs

Author

Valérie Répondre

mai 25 2017

Merci Brice pour cet article bien pratique, je vais aller découvrir les autres !

    Author

    Brice Basty

    Répondu le mai 25 2017

    Merci à vous pour votre commentaire qui réchauffe le cœur de ma plume :) En espérant vous avoir été utile !

Author

sandrine Répondre

février 10 2020

Bonjour merci pour ce tutoriel ! J'ai plusieurs au sujet de l'option 2 : en modifiant wp-includes/functions.php, cette personnalisation ne risque t'elle pas d'etre effacée lors de la prochaine mise à jour de wordpress ? Ce code peut il etre placé dans function.php du thème enfant ? deniere question est il possible d'y ajouter des exceptions ? Merci de vos lumières !

Laissez une réponse

Commentaire*

Prénom*

E-mail*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Rejoignez Hostinger maintenant!

>