1#seocamp

La mise en cache et ses secretsAymeric Bouillat, Benoit Chevillot

2#seocamp

Le cache?

Mais je ne fais que du SEO moi!

3#seocamp

Le cache clientSommaire

▪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#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#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 cacherTel un cliqueur fou

6#seocamp

Comment ça marche?Cache Client vs cache serveur

Client

Cache navigateur

Serveur

Client

Cache navigateur

Client

Cache navigateur

7#seocamp

Comment ça marche?Cache Client vs cache serveur

Client

Cache navigateur

Serveur de cache

Serveur

Client

Cache navigateur

Client

Cache navigateur

8#seocamp

Hausse du nombre de JS, CSS, images et fonts…

2013

88 requêtes 1270 Kb

2014

93 requêtes1703 Kb

2015

100 requêtes2087 Kb

2016

108 requêtes2426 Kb

Nombre de requêtes Desktop par pageSource: http://httparchive.org/trends.php

9#seocamp

A vousde 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#seocamp

Le poids et les limites de votre connexion…Edge, 2G, 3G, 4G, Wifi & co

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#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#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#seocamp

Et ça donne quoi dans GSC?La performance intimmement liée au SEO

15#seocamp

En rapport avec le SEO!La performance intimmement liée au SEO

Facteur de ranking

Crawl budget

Rebond UX

16#seocamp

Navigateur,fais tes

réserves !

17#seocamp

Comment savoir ce qui est caché?

No comment

18#seocamp

Comment savoir ce qui est caché?

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#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, deflateUser-Agent: Mozilla/5.0 (Linux ; Android 6.0.1...

HTTP/1.0 200 OKDate: Thu, 04 Jun 2015 20:39:14 GMTExpires: Thu, 04 Jun 2016 20:49:14 GMT

269Ko

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, deflateUser-Agent: Mozilla/5.0 (Linux ; Android 6.0.1...

HTTP/1.0 200 OKDate: Thu, 04 Jun 2015 20:39:14 GMTCache-Control: public; max-age=31536000

269Ko

22#seocamp

Et si le fichier change?

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 keyLa performance intimement liée au SEO

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 validationAccept-Language: fr-FR,fr;Accept-Encoding: gzip, deflateUser-Agent: Mozilla/5.0 (Linux ; Android 6.0.1...

HTTP/1.1 200 OKDate: Thu, 04 Jun 2015 20:39:14 GMTLast-Modified: Thu, 02 Jun 2015 17:32:03

Accept-Language: fr-FR,fr;Accept-Encoding: gzip, deflateUser-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 modifiedDate: Thu, 04 Jun 2015 20:39:14 GMTLast-Modified: Thu, 02 Jun 2015 17:32:03

269Ko

1 Ko

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 validationAccept-Language: fr-FR,fr;Accept-Encoding: gzip, deflateUser-Agent: Mozilla/5.0 (Linux ; Android 6.0.1...

HTTP/1.1 200 OKDate: Thu, 04 Jun 2015 20:39:14 GMTETag: "UreJ2g"

Accept-Language: fr-FR,fr;Accept-Encoding: gzip, deflateUser-Agent: Mozilla/5.0 (Linux ; Android 6.0.1...If-None-Match: "UreJ2g"

HTTP/1.1 304 not modifiedDate: Thu, 04 Jun 2015 20:39:14 GMTETag: "UreJ2g"

269Ko

1 Ko

26#seocamp

Règle optimale pour Cache-Control

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

CommentairesDé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#seocamp

▪Balises de pagination <link rel=next….>

▪Balise prefetch (slides, carousel,

habitudes des utilisateurs)

<link rel="prefetch" href="/autre_page.html">

Le cache par anticipationLa performance intimement liée au SEO

29#seocamp

Les caches serveurSommaire

▪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#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#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#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#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 cacheQuels sont les différents types de cache coté serveur ?

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 applicatifQuels sont les différents types de cache coté serveur ?

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 CMSQuels sont les différents types de cache coté serveur ?

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éeQuels sont les différents types de cache coté serveur ?

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#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#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#seocamp

Carla-bikini.com sur prestashop 1.6 multiboutique et httpsAvant : devais doubler son d’infrastructure pour accompagner sa croissance, TTFB : 1,2sAprès : pas besoin de faire évoluer l’infrastructure, TTFB : 0,4s

code promo  NET10 -10 % hors points rouge

Cas concrets Varnish : avant / aprèsDes chiffres

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 : 2sAprès : 700€ d’infrastructure par mois, plus de sueurs froides lors des soldes ou passage TV, TTFB : 0,2s

Cas concrets Varnish : avant / aprèsDes chiffres

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 bordsQuels sont les effets de bords d’un reverse proxy ?

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ègesAstuces, légendes urbaines et pièges à éviter

44#seocamp

Benoit Chevillot(DIVIOSEO) @beunwa

Aymeric Bouillat(RESONEO) @aymerictwitMerci!

Des questions?