Téléchargé 83 fois
Téléchargé parAymeric Bouillat
La mise en cache et ses secrets
Le document présente l'importance de la mise en cache pour la performance des sites web et son impact sur le SEO, en expliquant les différents types de cache (client et serveur) et leur fonctionnement. Il aborde également les en-têtes HTTP, le versionnage, et les bonnes pratiques à adopter pour optimiser la mise en cache et réduire la charge serveur. Enfin, des exemples concrets illustrent les gains de performance obtenus grâce à une mise en cache efficace.
Contenu connexe
Similaire à La mise en cache et ses secrets
La mise en cache et ses secrets
- 1. 1#seocamp La mise encache et ses secrets Aymeric Bouillat, Benoit Chevillot
- 2. 2#seocamp Le cache? Mais jene fais que du SEO moi!
- 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#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#seocamp ▪ Vous pouvezcharger 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#seocamp Comment ça marche? CacheClient vs cache serveur Client Cache navigateur Serveur Client Cache navigateur Client Cache navigateur
- 7. 7#seocamp Comment ça marche? CacheClient vs cache serveur Client Cache navigateur Serveur de cache Serveur Client Cache navigateur Client Cache navigateur
- 8. 8#seocamp Hausse dunombre 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#seocamp A vous de jouer! Quelest 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#seocamp Le poids etles limites de votre connexion… Edge, 2G, 3G, 4G, Wifi & co
- 11. 11#seocamp Les limites du navigateur…Max ParallelHTTP connections Entre 2 à 8 connexions TCP simultanées /nom d’hôte (en moyenne, depend des navigateurs)
- 12. 12#seocamp JS synchrone qui bloquele 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#seocamp ▪ Réduire labande 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#seocamp Et ça donnequoi dans GSC? La performance intimmement liée au SEO
- 15. 15#seocamp En rapport avecle SEO! La performance intimmement liée au SEO Facteur de ranking Crawl budget Rebond UX
- 16.
- 17. 17#seocamp Comment savoir cequi est caché? No comment
- 18. 18#seocamp Comment savoir cequi est caché?
- 19. 19#seocamp • Votre navigateurmettra 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#seocamp Expires • 0 requêteintermé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#seocamp Cache-Control • Un contrôledu 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#seocamp Et si lefichier change?
- 23. 23#seocamp ▪ Ajout d’unechaî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#seocamp Last-modified • Consommation d’unerequê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#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.
- 27. 27#seocamp Attention, le cyclede 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#seocamp ▪ Balises depagination <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#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#seocamp Un cache serveurest 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#seocamp La miseen 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#seocamp Un cacheefficace 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#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#seocamp Cache decode (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#seocamp Cache depage 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#seocamp Permet desoulager 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#seocamp Tout cequi 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#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#seocamp Les pageshautement 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#seocamp Carla-bikini.com sur prestashop1.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#seocamp Lemoncurve.com sur prestashop1.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#seocamp Besoin dedé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#seocamp Un mauvaisré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.