Depuis le début de Fasterize, nous proposons une optimisation sur l'exécution du Javascript appelée Deferjs. Celle-ci permet d’exécuter les scripts des pages de façon différée sans bloquer le rendu de la page.
Cette optimisation améliore le Start Render et le Speed Index mais peut, dans certain cas dégrader, le Time To Interact. Les éléments de la page construits via du Javascript de type carrousel, popup s’affichent en effet dans un second temps.
Par ailleurs, l’utilisation du DejerJs empêche le pre-scanner des navigateurs de commencer le téléchargement des scripts avant de devoir les exécuter.
Preload, prefetch : quelle différence ?
Il existe deux balises permettant de télécharger une ressource sans l’exécuter :
- la balise “link rel=prefetch” supportée par l’ensemble des navigateurs récents.
- la balise “link rel=preload” supportée uniquement par Chrome.
La balise “link rel=prefetch” déclenche un téléchargement avec une priorité faible. En pratique, elle est utile pour des ressources qui seront probablement utiles lors de la navigation future.
Au contraire, la balise “link rel=preload” déclenche un téléchargement immédiat avec une priorité basée sur la nature de la ressource téléchargée. La ressource est utilisable lors de la navigation courante.
Les limites du DeferJS dépassées
Depuis peu, la donne a changé au niveau des possibilités offertes par les navigateurs.
Depuis Chrome 51 et bientôt pour Firefox, il est possible d’utiliser la balise HTML « link rel=preload » pour pré-charger des ressources.
Les cas d’usage sont nombreux et sont décrits ici >>
Fasterize intègre le Preload du DeferJS
Le moteur d’optimisation développé par Fasterize tire maintenant parti de cette balise « link rel=preload » pour télécharger en amont l’ensemble des scripts. Ils sont alors déjà disponibles lors de leur exécution orchestrée par le Deferjs.
En implémentant cette optimisation sur notre moteur, nous réduisons encore un peu plus les temps de chargement. L’impact est clairement visible : le Time To Interact arrive bien plus tôt dans la majorité des cas.
NB. Il convient de noter que, comme toutes optimisations webperf, il s’agit d’un compromis puisque les ressources JS pré-chargées peuvent entrer en concurrence avec des ressources critiques.
Cette fonctionnalité n’est pas activée par défaut sur le moteur. Aussi, si vous souhaitez en bénéficier, il suffit de vous rendre dans votre tableau de bord et l’activer.