La mise en cache est un moyen efficace pour réduire les temps de chargement. Mais il est souvent difficile de l'appliquer aux pages web du fait de la personnalisation (compteur d'éléments dans le panier, bannière de login, ...)
Face à cette problématique, nos experts webperf ont cherché au cours des 4 dernières années, différentes méthodes pour améliorer la mise en cache.
Voici un petit tour d’horizon des différentes solutions de cache qu’ils ont mis à votre disposition sur Fasterize.
La mise en cache des ressources statiques
L’incontournable mise en cache classique ! Inutile de la présenter. Elle s’applique à toutes les ressources et pages statiques.
Le moteur Fasterize respecte l’entête HTTP Cache-Control renseigné par l’origine. Si celui-ci est absent ou incorrect, il est possible de les remplacer depuis le dashboard. Le moteur permet un paramétrage fin de la mise en cache en choisissant si la ressource peut être mise en cache par le navigateur et/ou par un CDN.
Nous appliquons une segmentation des pages cachées.
Ainsi, chaque page mise en cache dispose de différentes versions cachées : selon les navigateurs, les terminaux ou encore selon un cookie spécifique (nous utilisons la valeur d'un cookie dans notre clé de cache).
Où configurer le cache classique depuis votre dashbord Fasterize ?
Dans configuration > caching
NB. Si vous optez pour un CDN, les pages et les ressources statiques seront servies depuis celui-ci.
La mise en cache des pages dynamiques
Mettre en cache des ressources statiques est une chose. Mettre en cache des pages web dynamiques en est une autre.
Dans cette partie, nous allons voir comment cacher des pages web qui contiennent des parties personnalisées (ce qu’on appelle ici des pages dynamiques).
Nous avons constaté deux choses sur ce type de page :
- Les pages dynamiques ne sont pas complètement dynamiques
Souvent, une page n’est dynamique que parce que quelques zones de la page sont personnalisées. Le reste de la page en revanche est commun aux différents utilisateurs.
2. Les pages dynamiques ne sont pas toujours dynamiques
Vous l’avez probablement constaté vous aussi : la plupart du temps, les pages dynamiques non cachables sont identiques d’un utilisateur à l’autre. Les pages ne se personnalisent que lorsque l’utilisateur fait une action particulière.
Prenons l’exemple concret d’un site e-commerce : la page est identique d’une navigation à l’autre tant que le client n’a pas rempli son panier. Ainsi, la page peut être la même 90% du temps ou personnalisée selon la session utilisateur les 10% du temps restant.
Lors d’une précédente étude, nous avons pu constater que 30% des réponses aux pages dynamiques étaient identiques !
Dans ce contexte, il est dommage de se priver de la mise en cache de ces pages qui ne sont pas toujours et/ou pas complètement dynamiques.
Suite à ces deux constats, notre équipe d’experts a déployé 3 techniques de cache avancées sur Fasterize :
- Le Smart Cache
- Le Cookie Less Cache
- Le Dynamic Cache
Le Smart Cache
Le Smart Cache permet de mettre en cache la partie statique d’une page dynamique.
Nous identifions les parties dynamiques et statiques d’une page web. Ensuite, les parties statiques sont cachées tandis que les parties dynamiques sont chargées en asynchrone dans un second temps. (C’est un peu l’ajaxification de vos pages !)
Pour mettre en place le Smart Cache, un paramétrage spécifique est nécessaire pour discerner les parties dynamiques, des parties statiques.
En savoir plus sur le Smart Cache
Où configurer le Smart Cache depuis votre dashbord Fasterize ?
Toujours dans configuration > caching
Le Cookie Less Cache
Nous sommes partis du constat que beaucoup de pages "dynamiques" identiques étaient servies aux utilisateurs anonymes d'un site. En effet, tant qu'un utilisateur n'a pas reçu de cookie, le contenu de la page ne change pas d'un autre utilisateur sans cookie.
Nous avons alors développé le cookie less cache ou le cache pour les utilisateurs sans cookie. Cela nous permet de distinguer les utilisateurs étant “anonymes” pour le site (donc sans cookies), des utilisateurs connus pour le site (avec cookies).
Nous plaçons en cache les pages servies aux utilisateurs anonymes pour ensuite les servir depuis ce même cache aux utilisateurs anonymes suivants. Les utilisateurs identifiés par un cookie recevront quant à eux, la page (personnalisée) depuis le serveur d’origine.
Où configurer le Cookie Less Cache depuis votre dashbord Fasterize ?
Aller dans configuration > règles
Cocher “Mettre en cache les pages non cachables pour les utilisateurs anonymes“
Il y a une différence importante à comprendre entre le Smart Cache et le Cookie Less cache : le premier, demande une configuration fine qui nécessite aujourd'hui un paramétrage personnalisé (sélection des blocs dynamiques). Le second peut être activé de façon automatique sans paramétrage.
Le Dynamic Cache
Chez Fasterize, on optimise à la volée le code HTML des pages. Alors, quand on a vu que 30% des réponses aux pages dynamiques étaient identiques, nous avons eu envie de cacher ces pages identiques, afin de ne pas réappliquer continuellement les mêmes optimisations.. Pour cela, nous avons configuré le moteur pour qu’à la fin de l’optimisation d’une page, celui-ci garde donc une copie pendant une minute (cette copie est associée au hash de la réponse d’origine).
Ainsi avant de faire une optimisation, le moteur vérifie qu’il n’a pas déjà optimisé la page dans la minute précédente. Si c’est le cas, le moteur sert la version déjà optimisée et évite une nouvelle optimisation. Cela réduit d’environ 60ms de temps d’optimisation sur la page et soulage le moteur.
En savoir plus sur le Dynamic Cache
Quel cache choisir ?
Ces différentes typologies de cache amènent régulièrement la question “Quel cache dois-je activer ?”
Tout dépend bien évidemment de vos pages. Voici l’ordre de priorité que nous vous conseillons d’adopter :
Est-il possible d’utiliser le cache classique ? Si non, le paramétrage du Smart Cache est-il possible ? Si non, pouvez-vous activer le Cookie Less Cache ?
Si finalement le Cookie Less Cache n'est pas actif (la requête a un cookie), le Dynamic Cache sera automatiquement utilisé par notre moteur.
Cet article a-t-il été utile ?
C'est super !
Merci pour votre commentaire
Désolé ! Nous n'avons pas pu vous être utile
Merci pour votre commentaire
Commentaires envoyés
Nous apprécions vos efforts et nous allons corriger l'article