Upload
aymeric-bouillat
View
981
Download
6
Embed Size (px)
Citation preview
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?