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
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 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#seocamp
Comment ça marche?
Cache Client vs cache serveur
Client
Cache navigateur
Serveur
Client
Cache navigateur
Client
Cache navigateur
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#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#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
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#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
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#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#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
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#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#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
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#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#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 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#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#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#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 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#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#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#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#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 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#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#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#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#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