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.

Différez ou chargez en différé le JavaScript inutile. Chargez le JavaScript après l'affichage du contenu principal (DOMContentLoaded) pour améliorer la vitesse perçue.

Utilisez la fonctionnalité « JS différé » ou « JS combiné » du plugin LiteSpeed ​​Cache (LSCache) si vous utilisez WordPress. Testez avec le JavaScript spécifique à l'origine des erreurs et ajoutez « JS exclus » pour l'exclure de l'optimisation.

Utilisez les outils de développement (F12) dans le navigateur pour identifier les erreurs spécifiques qui se produisent. Y a-t-il des scripts bloqués ? Y a-t-il des ressources JavaScript qui ne sont pas chargées ?

Hello Alexandre,

Bien vu pour l’optimisation avec LiteSpeed, c’est un très bon choix pour booster les perfs sous WordPress !
Concernant ton souci, j’ai eu exactement le même cas sur un site e-commerce : carrousel qui plante ou qui s’affiche mal quand le JS est en *defer*.

Ce qui a marché chez moi :

* **Exclure les scripts du carrousel** dans les réglages "JS Deferred" de LiteSpeed Cache.
* S’assurer que **jQuery est bien chargé avant** tout script qui en dépend. Parfois, même si jQuery est différé, certains scripts s’exécutent trop tôt.
* Si tu utilises un thème ou un builder visuel, vérifie s’il **force des appels jQuery inline** (certains ne tolèrent pas le defer du tout).
* **Test utile** : mets jQuery en *async* à la place de *defer* et observe. C’est parfois suffisant pour débloquer tout sans trop impacter le rendu.
* Pour le *blocking render*, malheureusement, **jQuery reste souvent nécessaire** au-dessus du fold, donc tu peux soit l’assumer, soit envisager (à terme) de basculer sur du Vanilla JS pour les interactions simples (selon ton budget/temps).

Au besoin, je peux jeter un œil à la page si tu veux du feedback plus ciblé (console, ordre de chargement, etc.).

Bon courage avec ton site de tapis logo, super idée de niche d’ailleurs

‎ ‎ ‎ ‎ ‎ ‎ ‎