Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

La mise en cache et ses secrets

5,335 views

Published on

Le cache côté client, le cache côté serveurs et leur impact sur le SEO et l'expérience utilisateur. Conférence effectuée lors du SEOCamp'us Paris 2017 avec Benoit Chevillot de Divioseo

Published in: Internet
  • Be the first to comment

La mise en cache et ses secrets

  1. 1. 1#seocamp La mise en cache et ses secrets Aymeric Bouillat, Benoit Chevillot
  2. 2. 2#seocamp Le cache? Mais je ne fais que du SEO moi!
  3. 3. 3#seocamp Le cache client Sommaire ▪ Les caches ▪ Fonctionnement ▪ Les limites : connexion et navigateur ▪ Les limites: serveur ▪ Cache et SEO ▪ Les en-têtes de cache ▪ TTL ▪ Le cache anticipé
  4. 4. 4#seocamp “Tu as vidé ton cache?!” Oui!!! Mais tu parles de quell cache? Cache du Navigateur FAI: Proxy cache DNS cache Serveur HTTP PHP: APC / Cache d'OPCodes SQL: Cache des requêtes Applicatif: Cache disque, cache CMS Cache serveur / reverse proxy (ex: Varnish) Coté serveur Coté client
  5. 5. 5#seocamp ▪ Vous pouvez charger plusieurs fois des ressources identiques (images d’habillage,CSS,JS,…)  Ces resources sont souvent demandées  Elles ne changent pas souvent…  Elles peuvent induire une charge serveur importante ! (ex: #soldes) Quand vous surfez…mieux vaut cacher Tel un cliqueur fou
  6. 6. 6#seocamp Comment ça marche? Cache Client vs cache serveur Client Cache navigateur Serveur Client Cache navigateur Client Cache navigateur
  7. 7. 7#seocamp Comment ça marche? Cache Client vs cache serveur Client Cache navigateur Serveur de cache Serveur Client Cache navigateur Client Cache navigateur
  8. 8. 8#seocamp  Hausse du nombre de JS, CSS, images et fonts… 2013 88 requêtes 1270 Kb 2014 93 requêtes 1703 Kb 2015 100 requêtes 2087 Kb 2016 108 requêtes 2426 Kb Nombre de requêtes Desktop par page Source: http://httparchive.org/trends.php
  9. 9. 9#seocamp A vous de jouer! Quel est le temps de chargement moyen d’une page web mobile complète ? 5,4 sec. 9 sec. 13,6 sec. 22 sec. https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf
  10. 10. 10#seocamp Le poids et les limites de votre connexion… Edge, 2G, 3G, 4G, Wifi & co
  11. 11. 11#seocamp Les limites du navigateur…Max Parallel HTTP connections Entre 2 à 8 connexions TCP simultanées /nom d’hôte (en moyenne, depend des navigateurs)
  12. 12. 12#seocamp JS synchrone qui bloque le rendu Mise en attente du rendu CSS/HTML, au cas où le JS interviendrait… sur ce même rendu Les limites du navigateur…
  13. 13. 13#seocamp ▪ Réduire la bande passante sur le serveur ▪ Réduire la latence ▪ Réduire la charge serveur ▪ Cacher les plantages! A quoi sert le cache pour le serveur? La performance intimement liée au SEO
  14. 14. 14#seocamp Et ça donne quoi dans GSC? La performance intimmement liée au SEO
  15. 15. 15#seocamp En rapport avec le SEO! La performance intimmement liée au SEO Facteur de ranking Crawl budget Rebond UX
  16. 16. 16#seocamp Navigateur, fais tes réserves !
  17. 17. 17#seocamp Comment savoir ce qui est caché? No comment 
  18. 18. 18#seocamp Comment savoir ce qui est caché?
  19. 19. 19#seocamp • Votre navigateur mettra en cache ce qu’il pourra, en fonction des en-tête HTTP C’est dans l’en-tête que ça se passe
  20. 20. 20#seocamp Expires • 0 requête intermédiaire par la suite, mais… • Modification de fichier original ne mettra pas à jour le cache pendant 1 an dans cet exemple • Dépend de la date et l’heure du serveur Protocole HTTP 1.0 et expiration Accept-Language: fr-FR,fr; Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Linux ; Android 6.0.1... HTTP/1.0 200 OK Date: Thu, 04 Jun 2015 20:39:14 GMT Expires: Thu, 04 Jun 2016 20:49:14 GMT 269Ko
  21. 21. 21#seocamp Cache-Control • Un contrôle du cache au plus fin! • Gestion des proxies: Cache-Control: private, public • De nombreux paramètres possibles, mais un peu complexes! (public, private, no-cache, no-store, no-transform, max-age, must-revalidate, proxy-revalidate, …) Protocole HTTP 1.1 et expiration Accept-Language: fr-FR,fr; Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Linux ; Android 6.0.1... HTTP/1.0 200 OK Date: Thu, 04 Jun 2015 20:39:14 GMT Cache-Control: public; max- age=31536000 269Ko
  22. 22. 22#seocamp Et si le fichier change?
  23. 23. 23#seocamp ▪ Ajout d’une chaîne de paramètres à l’URL du fichier (appel du même fichier, URL différente) ▪ Ex: /javascript-cms.js?v=2.3 ▪ Également appelé versionning Cache busting is the key La performance intimement liée au SEO
  24. 24. 24#seocamp Last-modified • Consommation d’une requête seulement • On ne renvoie qu'une réponse partielle HEAD -> 304 Protocole HTTP 1.0 et validation Accept-Language: fr-FR,fr; Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Linux ; Android 6.0.1... HTTP/1.1 200 OK Date: Thu, 04 Jun 2015 20:39:14 GMT Last-Modified: Thu, 02 Jun 2015 17:32:03 Accept-Language: fr-FR,fr; Accept-Encoding: gzip, deflate User-Agent: User-Agent: Mozilla/5.0 (Linux ; Android 6.0.1... If-Modified-Since: Thu, 02 Jun 2015 17:32:03 HTTP/1.1 304 not modified Date: Thu, 04 Jun 2015 20:39:14 GMT Last-Modified: Thu, 02 Jun 2015 17:32:03 269Ko 1 Ko
  25. 25. 25#seocamp EntityTag • Etag = empreinte du fichier • Utile si un Last-Modified correspondant à une date de billet est renvoyée, et que le contenu autour a changé (ex: widgets, pub & co) Protocole HTTP 1.1 et validation Accept-Language: fr-FR,fr; Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Linux ; Android 6.0.1... HTTP/1.1 200 OK Date: Thu, 04 Jun 2015 20:39:14 GMT ETag: "UreJ2g" Accept-Language: fr-FR,fr; Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Linux ; Android 6.0.1... If-None-Match: "UreJ2g" HTTP/1.1 304 not modified Date: Thu, 04 Jun 2015 20:39:14 GMT ETag: "UreJ2g" 269Ko 1 Ko
  26. 26. 26#seocamp Règle optimale pour Cache-Control
  27. 27. 27#seocamp Attention, le cycle de vie des ressources dépend des sites et de vos besoins: c’est un ordre de grandeur… HTML JS CSS Images PDF, fonts TTL Minutes/ Heures Jours/Mois Jour/mois Mois/année Mois/Année Commentaires Dépend des contenus de la page Versionning si besoin Versionning si besoin Renommer les fichiers si besoin - Durée de vie des ressources Ça depend, ça depasse!
  28. 28. 28#seocamp ▪ Balises de pagination <link rel=next….> ▪ Balise prefetch (slides, carousel, habitudes des utilisateurs) <link rel="prefetch" href="/autre_page.html"> Le cache par anticipation La performance intimement liée au SEO
  29. 29. 29#seocamp Les caches serveur Sommaire ▪ C'est quoi un cache serveur ? ▪ Pourquoi cache-t-on ? ▪ Quels sont les différents types de cache coté serveur ? ▪ Que cache-t-on et pour combien de temps ? ▪ Qu'est ce qu'on ne cache pas ? ▪ Cas concrets : avant / après ▪ Quels sont les effets de bords d’un reverse proxy ? ▪ Astuces, légendes urbaines et pièges à éviter
  30. 30. 30#seocamp Un cache serveur est un mécanisme de stockage des ressources (page html, image, fichier javascript, fichier css, ...) de manière statique, le serveur génère la ressource, la stocke ‘en dur’ puis la sert ensuite au client avec une date de péremption. Lorsque la date de péremption est atteinte le serveur régénère la ressource à la première sollicitation, c’est à dire au premier visiteur qui la demande (humain ou bot). C'est quoi un cache serveur ? Quelques précisions https://www.smashingmagazine.com/2016/05/modern-wordpress-server-stack/
  31. 31. 31#seocamp  La mise en cache coté serveur permet de soulager énormément la charge du serveur et de grandement améliorer la vitesse de ‘livraison’ des ressources.  Une ressource en cache ne nécessite qu’une action de lecture sur le disque dur ou sur la mémoire vive du serveur.  Une ressource non cachée sollicite le serveur web, le langage de script associé (php, js, python, …), la base de donnée. Pourquoi cache-t-on ? Pour gagner du temps
  32. 32. 32#seocamp  Un cache efficace coté serveur permet de multiplier le nombre de visiteurs simultanés sans changer d’infrastructure.  Un cache efficace coté serveur permet d’améliorer l’expérience utilisateur.  Un cache efficace permet d’accélérer le crawl par les bots. Pourquoi cache-t-on ? Pour gagner de l’argent
  33. 33. 33#seocamp  Reverse proxy (le graal)  Permet de soulager l’intégralité du serveur car le cache est puisé directement en mémoire serveur sans intermédiaire applicatif.  Permet d’agir également en load balancer.  Peut être difficile a mettre en place et a maintenir Les types de cache Quels sont les différents types de cache coté serveur ?
  34. 34. 34#seocamp  Cache de code (APC, ...) permet de compiler le code  Evite la phase de compilation du script  Cache de ressource (Memcache, ...)  Intervient en milieu de chaine, cache d’objets, soulage essentiellement la BDD Cache applicatif Quels sont les différents types de cache coté serveur ?
  35. 35. 35#seocamp  Cache de page CMS (smarty, WPRocket, WPTotalcache, …)  Intervient en fin de chaine, cache de ressources.  Permet de piloter simplement Varnish et de s’assurer que les 2 caches sont synchronisés. Cache CMS Quels sont les différents types de cache coté serveur ?
  36. 36. 36#seocamp  Permet de soulager la base de donnée sur les requêtes coûteuses et récurrentes, par exemple les facettes les plus consultées d’un ecommerce. (query cache + 238 % d’apres mysql sur les select)  Généralement à implémenter au niveau du code ou de l’ORM  Si vous utilisez massivement le cache de requêtes pour la recherche alors vous devriez surement déporter votre fonctionnalité recherche sur une technologie dédié à cela : elasticsearch Cache base de donnée Quels sont les différents types de cache coté serveur ?
  37. 37. 37#seocamp  Tout ce qui transite par http peut être caché : pages html, javascript, css, images, pdf, …  La durée de vie (date de péremption) de chaque ressources peut être différente, elle dépend avant tout de vos besoins. Par exemple les pages produit d’un site ecommerce peuvent avoir une durée de vie de 1h alors que la page home peut avoir une durée de vie de 3h ou plus. To cache ? Que cache-t-on et pour combien de temps ?
  38. 38. 38#seocamp  ATTENTION : ne pas confondre la durée de vie d’une ressource coté serveur et les entêtes de cache (Expires et Cache-control). En effet une ressource peut tout a fait être régénérée coté serveur avant son expiration coté client, ou inversement. To cache ? Que cache-t-on et pour combien de temps ?
  39. 39. 39#seocamp  Les pages hautement personnalisées.  Les pages qui enregistre des données (formulaires)  De manière générale toutes les requêtes POST, les back- offices, les tunnels de conversion, les espaces perso. Or not to cache ? Qu'est ce qu'on ne cache pas ?
  40. 40. 40#seocamp Carla-bikini.com sur prestashop 1.6 multiboutique et https Avant : devais doubler son d’infrastructure pour accompagner sa croissance, TTFB : 1,2s Après : pas besoin de faire évoluer l’infrastructure, TTFB : 0,4s code promo NET10 -10 % hors points rouge Cas concrets Varnish : avant / après Des chiffres
  41. 41. 41#seocamp Lemoncurve.com sur prestashop 1.4 (avant mars 2017, racheté et migré par shopinvest depuis) Avant : 1500€ d’infrastructure par mois + des sueurs froides lors des soldes, TTFB : 2s Après : 700€ d’infrastructure par mois, plus de sueurs froides lors des soldes ou passage TV, TTFB : 0,2s Cas concrets Varnish : avant / après Des chiffres
  42. 42. 42#seocamp  Besoin de développements complémentaires dans certains cas pour garder un certain dynamisme des pages tout en gardant un cache efficace. (ajax ou ESI pour les zones panier Prestashop par exemple)  Besoin de faire des concessions pour avoir le cache le plus performant possible (ou pas au détriment du cache), par exemple afficher tous les prix en TTC sur une boutique quelque soit le pays de l’ip du visiteur. Si on souhaite afficher du HT pour les pays etranger alors on maintiendra 2 caches différents. Effets de bords Quels sont les effets de bords d’un reverse proxy ?
  43. 43. 43#seocamp  Un mauvais réglage de cache peut s’avérer catastrophique.  Pensez a auditer soigneusement le site et ses réglages métier avant la mise en place et la configuration d’un reverse proxy comme Varnish.  On ne peut pas mettre en place Varnish sur Prestashop → FAUX  On ne peut pas mettre en place Varnish avec https → FAUX  Utiliser un réchauffeur de cache  Réglez soigneusement vos entêtes d’expiration Astuces et pièges Astuces, légendes urbaines et pièges à éviter
  44. 44. 44#seocamp Benoit Chevillot (DIVIOSEO) @beunwa Aymeric Bouillat (RESONEO) @aymerictwit Merci!Des questions?

×