smartcache

Depuis le lancement début 2015 du Smartcache, cette solution de mise en cache des pages dynamiques est devenue indispensable pour nos clients. Cette solution de « full page caching » est particulièrement intéressante pour les pages pseudo-dynamiques lorsque l’essentiel de la page est commun pour l’ensemble des visiteurs. La partie publique de la page est alors mise en cache sur Fasterize, la partie privée (propre à la session de navigation) est récupérée directement à l’origine via une requête AJAX.

Par exemple, la page produit d'un site e-commerce peut être la même pour tous les utilisateurs du site, sauf le panier qui est propre au visiteur. Avec notre Smart Cache nous pouvons mettre en cache 99% de la page pour l'afficher instantanément aux utilisateurs. Le panier est ensuite chargé dynamiquement et inséré dans la page.

Nous avons apporté deux améliorations significatives au SmartCache pour le rendre plus intelligent et pour réduire son empreinte sur les performances.

Rafraichissement automatique des pages en cache

Chaque récupération des zones dynamiques d’une page « smartcachée » consiste à récupérer l’ensemble de la page à l’origine puis à séparer la partie privée de la partie publique. La partie privée est alors envoyée au navigateur.
La partie publique était jusqu’à présent non exploitée ; elle est maintenant remise en cache.

Ce changement apporte une fonctionnalité très importante : un rafraichissement passif des pages mises en cache. Cela permet d’éviter les purges manuelles de cache à chaque mise à jour d’une page produit. En effet, au fil des visites d’une même page, la page est continuellement placée dans le cache.

Chargement des zones privées en JSONP

Ce changement est plus complexe techniquement. Accrochez-vous :).
Jusqu’à présent, la récupération de la zone privée d’une page se faisait en AJAX. Le navigateur pouvait alors télécharger le CSS, le JS et les images pendant qu’il attendait la récupération de la zone privée. Dès que les éléments privés étaient récupérés en AJAX et intégrés dans le DOM, la page était considérée comme cohérente et l’exécution du JS était alors déclenchée via le DeferJS.

Le preloader HTML

Depuis plusieurs années, les navigateurs ont un pre-loader qui permet de découvrir en amont l’ensemble des ressources statiques de la page en analysant les attributs des balises contenant des URLs. Avoir une connaissance de l’ensemble des ressources de la page leur permet d’appliquer des règles de priorisation au niveau de la file de téléchargement.

preloader

Ils peuvent alors initier le téléchargement des ressources utiles pour la suite du rendu de la page en attendant le téléchargement des ressources bloquantes (CSS, JS).

En initiant la requête du SmartCache en AJAX, la navigateur était alors incapable de tirer parti du pre-loader pour télécharger au plus tôt cette ressource critique pour le rendu de la page (puisqu’elle bloque le déclenchement de l’exécution du Javascript via le DeferJS). Selon les pages et le nombre de ressources statiques, nous pouvions voir un délai de 100 à 500ms perdu avant que le script déclenchant l’appel AJAX ne soit exécuté.
Voici un exemple sur un de nos clients. La requête du smartcache est la requête 22 qui est déclenchée environ 600ms après la récupération de l’HTML.

exemple preloader

La requête du smartcache (requête 22) n’est déclenchée qu’après les balises script bloquantes.

Pour améliorer la priorisation de cette requête, nous avons alors tiré parti de la technique du JSONP pour télécharger les zones dynamiques via une balise script. Steve Souders décrit le bénéfice ainsi obtenu en mettant en place cette technique sur SpeedCurve.

Nous avons ajouté un attribut async à cette balise pour ne pas bloquer le premier rendu des zones publiques de la page. L’attribut async signale en effet au navigateur que la balise Javascript ne va pas bloquer le parser HTML (pas de document.write) mais que le script devra être exécuté dès la fin de son téléchargement. Le parser HTML sera alors bloqué pendant cette exécution.

parser HTML

Schéma décrivant le comportement du navigateur selon la présence des attributs async et defer.

L’impact de ce changement est le déclenchement immédiat du script récupérant les zones dynamiques.

Voici un avant / après la mise en place du JSONP :

JSONP

Chargement de la requête smartcache en AJAX : la requête est envoyée seulement après l’exécution du script JS inliné. Dans cet exemple, on compte 40ms d’attente.

JSONP

Chargement de la requête smartcache en JSONP : la requête est déclenchée par le preloader au même moment que les requêtes vers le CSS et Javascript.

Ce changement permet principalement d’accélérer l'application du Javascript. Cela se traduit par un meilleur TimeToInteractive [spécifiquement le Consistently Interactive]. Cela peut aussi être visible pour l’affichage des slideshows et des visionneuses d’images riches.

Evolutions futures

Nous avons encore beaucoup d’idées d’amélioration du SmartCache.

Lors des prochains développements, nous souhaitons donner la possibilité à l’origine de fournir directement le JSON des éléments privées pour ne pas télécharger l’ensemble de la page à l’origine pour réduire au maximum la charge à l’origine. Nous étudions aussi la possibilité de gérer les balises ESI pour les origines les supportant.

Un autre axe d’amélioration consistera à réécrire le moteur pour ne pas appliquer d’optimisations sur le code HTML avant l’extraction des zones dynamiques. Cela réduira le temps de traitement de Fasterize et améliorera la résilience du moteur. Aujourd’hui, les pages sont optimisées avant la récupération des zones dynamiques.

Enfin, nous étudions la possibilité de spécifier des zones dynamiques optionnelles lors de la définition du smartcache. Ce cas arrive souvent pour les bandeaux pour les utilisateurs admin ou pour les nouveaux utilisateurs sans cookie.

Restez informé.e, inscrivez-vous à notre Newsletter :


VOUS AIMEREZ PEUT-ÊTRE AUSSI...

Insight, pour évaluer la rapidité de votre site, e... Connaissez-vous Insight, l’outil de Fasterize qui vous permet d’analyser gratuitement et en quelques instants la rapidité de votre site web ...
Yellow Lab Tools + Fasterize = 💙 Nous vous en avions déjà parlé dans notre article sur les outils incontournables pour analyser la performance de votre site web. Yellow Lab ...
Rapport de transparence – janvier 2018 La transparence est une valeur importante pour Fasterize. C'est pourquoi nous avons choisi de vous dévoiler les coulisses de notre support. ...
L’extension Fasterize désormais disponible sur Chr... L'extension navigateur Fasterize est votre compagnon indispensable pour diagnostiquer rapidement l'état d'une page servie par Fasterize. Dan...