Nous avions déjà signalé les différents problèmes entre les codes JavaScript avec l’option Rocket Loader ™ (Web Optimization) ici https://archive.brizawen.com/?p=3949. L’option est toujours à ce jour en Beta et ce depuis quelques années. Comme quoi, mettre en cache du code JavaScript n’est pas sans poser quelques problèmes.
Pour rappel, l’option Rocket Loader de la plateforme CloudFlare permet d’optimiser le code JavaScript qui s’exécute alors plus rapidement sur le navigateur de votre visiteur. Ainsi, vous pouvez diviser par 4 le temps de chargement de vos codes JavaScript.
Sauf qu’en mode automatique, vous êtes quasiment assuré d’avoir quelques problèmes avec vos codes JavaScript.
Une des solutions est de désactiver l’option mais on passe à côté d’une possibilité optimisation performante.
L’autre solution est de passer en mode manuel.
Pour cela, il faut ajouter, un tag pour indiquer les scripts qui doivent être mis en cache par Cloudflare. Tous les scripts ne portant pas le tag seront traités normalement, sans optimisation.
Le tag à ajouter est data-cfasync=”true”
Par exemple,
<script data-cfasync= »true » src= »<?php bloginfo(‘template_directory’); ?>/jdgallery/jd.gallery.transitions.js » type= »text/javascript »></script>
Ensuite, il vous appartient de tester chaque script JavaScript.
Pour cela, nous utilisons l’excellent site Gtmetrix, ici, http://gtmetrix.com/ (onglet timeline).
A vous de décider, d’activer ou pas l’option Rocket Loader pour chaque code JavaScript en fonction des problèmes relevés.
J’ai vu des sites qui ne chargent les images que si elles sont visibles à l’oeil, ce qui permet considérablement d’alleger le chargement d’une longue page, puisque les élements hors visibilité sont chargés progressivement, savez vous quel script permet de faire ça ?
merci.