Archive de la catégorie ‘Outils’

Faites chauffer votre cache

tl;dr⇒

Lors de la récente refonte de www.touteslespoitrines.com, j’ai eu la chance d’avoir du temps pour approfondir certaines optimisations de performances côté Front. Quand on a un client e-commerçant qui a compris l’importance du temps de chargement pour son taux de conversion, et qui, en plus, alloue du budget pour ça, c’est vraiment précieux !

J’ai pu donc utiliser les tags ESI avec Varnish pour tirer parti au mieux de la mise en cache des pages. Je ne rentrerai pas dans le détail de leur implémentation dans cet article, vous pourrez retrouver quelques articles pour aller plus loin.
Une fois les vcl bien configurés et les ESI en place, c’est redoutablement efficace ! On a pu ainsi (avec d’autres techniques d’optimisations), diminuer de moitié les temps de chargement.

Mais, nous avons vite remarqué que les performances ne sont optimales que quand la page est chargée dans le cache de Varnish. Les temps de traitement serveur dans le cas contraire sont raisonnables, mais tant qu’à faire autant avoir le meilleur temps possible ! Pour cela, j’ai eu l’idée de pré-charger l’ensemble du site en utilisant un robot qui utiliserait un sitemap pour parcourir les pages à intervalles régulières.

Après quelques recherches, je suis tombé sur Optimus Cache Prime, c’est une application écrite en Go, compatible Windows et Linux, et qui consomme un sitemap XML pour faire des requêtes HTTP. Il dispose de plusieurs options et possède même un mode compatible avec les modules WP Super Cache et W3 Total Cache de WordPress qui permet de vérifier l’existence du cache avant de faire la requête.

Installation et configuration d’Optimus Cache Prime

Pour l’utiliser sur un serveur Linux, téléchargez et décompressez l’archive :

wget https://cdn.pmylund.com/files/tools/ocp2/linux/ocp-2.7-amd64.tar.gz
tar -xzvf ocp-2.7-amd64.tar.gz

Pour lancer le robot, donnez lui l’url de votre sitemap en dernier paramètre :

./ocp -c 4 -ua "Chauffeur de cache" -v http://www.monsite.com/sitemap.xml

Les options :

  • -ua définit le User-Agent utilisé par le robot,
  • -c définit le nombre de requêtes simultanées, prenez un peu de temps pour tester cette dernière valeur, ça serait dommage de faire tomber votre site si vous êtes sur un hébergement peu puissant,
  • -v demande d’afficher les urls en traitement,
  • le dernier paramètre sera donc le sitemap, il peut très bien être situé en local ou en distant sur une url.

Si vous souhaitez le lancer à intervalles réguliers, insérez cette ligne dans votre crontab :

0 */2 * * * /chemin/vers/ocp/ocp -c 4 -ua "Chauffeur de cache" -v http://www.monsite.com/sitemap.xml > /chemin/vers/les/logs/ocp.log 2>&1

L’instruction 0 */2 * * * indique au crontab d’exécuter le script toutes les 2 heures, ce n’est qu’un exemple et adaptez le à votre configuration !

 

Pour l’anecdote, voici à quoi ressemble la courbe de la moyenne des temps de chargement lorsqu’on lance le script toutes les 2 heures (chaque creux correspond à l’exécution du script) :

Stats avec OCP

Bien sûr, il n’est pas possible de pré-charger tout le site. Toute la partie de recherche avec filtres reste « froide » et l’utilisateur aura forcément un temps de traitement serveur lorsqu’il utilise plusieurs filtres. Mais en analysant un peu vos statistiques, vous pouvez essayer d’anticiper le comportement de vos visiteurs et insérer dans le sitemap par exemple :

  • les recherches par mot-clé les plus courantes,
  • les recherches avec un filtre marque et dont les produits sont en promotion,
  • la recherche par taille, dans le cas de toutes les poitrines, cela ne fait que 20 bonnets x 15 tailles hauts + 14 tailles bas = 314 pages.

 

Bonus

Pour savoir, sous Chrome, si la page que vous visitez vient directement du cache Varnish (HIT) ou non (MISS), je vous conseille l’extension Cache Hit or Miss. Il faut configurer Varnish pour renvoyer les entêtes d’information :

sub vcl_deliver {
    if (obj.hits > 0) {
        set resp.http.X-Cache = "HIT";
        set resp.http.X-Cache-Hits = obj.hits;
    } else {
        set resp.http.X-Cache = "MISS";
    }
}