Forums Tout JavaScript

Hello à tous,

Je bosse sur un site WordPress de vente de tapis personnalisés et pour optimiser ses performances, j'ai installé LiteSpeed afin d'améliorer la vitesse et l'expérience utilisateur.

Tout fonctionne bien sauf un petit souci : en defer le JavaScript, j’ai remarqué quelques bugs légers sur les carrousels produits. Rien de grave, mais je me demande si d'autres ont rencontré ce type de souci et comment ils gèrent le defer.

Aussi, il ne me reste plus que jQuery qui bloque le rendu, quelqu’un aurait des astuces pour améliorer ça sans tout casser ?

Le site en question : tapis logo

Merci d’avance,
Alexandre

Je pense qu'au lieu de supprimer complètement JavaScript, il faudrait différer les scripts non critiques. Cela permet à votre site de se charger plus rapidement tout en conservant ses fonctionnalités une fois que l'utilisateur commence à interagir. Dans LiteSpeed, activez « Charger JS différé » et vérifiez les résultats.

"Same here! Defer helps a lot, but jQuery and carousels can be tricky. Keen to see how others handle it. Italian Brainrot Clicker

C'est super que tu utilises LiteSpeed pour optimiser ton site ! Pour le problème de déférer le JavaScript, tu pourrais essayer d'utiliser la méthode async pour charger jQuery, ce qui permettrait de ne pas bloquer le rendu tout en gardant la fonctionnalité. Assure-toi également que les scripts de tes carrousels sont chargés après jQuery pour éviter les conflits. Une autre option serait de vérifier si les plugins que tu utilises ont des réglages spécifiques pour le chargement des scripts. Bonne chance et n'hésite pas à partager tes progrès !

Salut Alexandre,

Merci pour ton retour sur l’optimisation avec LiteSpeed ! C’est toujours super de voir que tu pousses la perf’ de ton site.

En ce qui concerne les bugs légers avec le defer de JavaScript, c’est effectivement assez fréquent, surtout pour les carrousels ou les sliders qui ont besoin que le DOM soit déjà prêt avant de s’exécuter. Voici quelques suggestions :

Tester les exclusions : Dans LiteSpeed Cache, tu peux exclure certains scripts critiques de l’optimisation (JS Deferred / Delayed par exemple). Pour les carrousels, essaye d’exclure les scripts spécifiques à ces modules. Ça peut souvent résoudre les petits bugs.

Prioriser jQuery : Comme jQuery est encore bloquant, tu peux essayer de le charger en priorité (en tête) ou en async, mais attention à ne pas le defer s’il est nécessaire pour certains scripts d’init.

jQuery slim : Si ton thème le permet, tu peux envisager de remplacer jQuery complet par la version slim si tu n’utilises pas les fonctionnalités Ajax, ce qui réduit un peu la taille.

Évaluer le report du JS : Tu peux aussi voir si LiteSpeed propose un mode delay qui retarde l’exécution JS jusqu’à l’interaction de l’utilisateur. Cela réduit le blocage initial, mais il faut tester pour s’assurer que l’UX n’est pas impactée.

Debug pas à pas : Active la console du navigateur (F12), et regarde les erreurs JS. Ça te dira si un script en particulier est mal chargé ou a besoin d’être retiré de la liste des scripts différés.

Pour jQuery qui bloque le rendu, beaucoup de plugins en dépendent encore. Souvent, le compromis consiste à accepter ce blocage minimal ou à migrer progressivement vers Vanilla JS si c’est envisageable à long terme.