Thierry Michel
Passionné par l'optimisation et en quête du workflow idéal, je dresse des pixels chez @epicwebagency en tant que lead front-end developer.
FEWEB - NOVEMBRE 2015
Du navigateur au CDN,
augmentez la vitesse à laquelle vos pages sont délivrées
et ne faites plus patienter vos visiteurs !
Me
Thierry MICHEL, belge, plus tout jeune,
presque 20 ans de web…
Après quelques années comme formateur,
je suis de retour IRL
pour dresser des pixels chez
EPIC,
une valeureuse agence numérique
et créative !
Définition
La mise en cache de document web est utilisée afin de
réduire la consommation de bande passante,
diminuer la charge du serveur web (les tâches qu'il effectue)
et/ou améliorer la rapidité de consultation
lors de l'utilisation d'un navigateur web.
A fast site
is a good user experience,
and a satisfying UX
leads to higher conversions.
47% s'attendent à ce qu'une page
se charge en moins de 2 secondes
2”
3”
40% n'attendront pas plus de 3 secondes
avant de quitter votre site
4”
75% ne retourneront pas sur un site
qui met plus de 4 secondes à charger
Étude AKAMAI 2009
Plus d'infos : kissmetrics, webby monks
Caches are everywhere,
for everything and everyone !
everywhere
everything
Contenus statiques (assets, fichiers) ET dynamiques (données, vues, pages)
everyone
Côté client…
Browser cache (static)
Browser cache (static)
refresh your cache -> FAIL!
Browser cache (static)
Étape #1 : versioning
<link rel="stylesheet" href="style.min.css?v=1.1">
// bof
<link rel="stylesheet" href="style.min-38b7910c98.css">
// avec le petit hash, mieux…
À automatiser avec votre gestionnaire de tâches préféré !
Par exemple : gulp-rev, gulp-rev-replace et rev-del
Browser cache (static)
Étape #2 : réglages serveur (Apache)
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
</IfModule>
Plus d'infos : html5boilerplate (.htaccess)
Browser cache (static)
Étape #2 : réglages serveur (nginx)
if ($request_uri ~* .-\w{10}.(css|js)$) {
expires 1y;
access_log off;
break;
}
Browser storage (static/dynamic)
Vous faites de l'ajax à gogo ?
Pourquoi ne pas stocker vos réponses dans le navigateur ?
Pour aller plus loin : Simple cookie framework, HTML5 Local Storage Revisited, SimpleStorage, basket.js, …
Cookie
* Jusqu'à 5x plus rapide que le cache natif sur mobile !!!
Web Storage API (via localStorage)*
Côté serveur…
Web Accelerators (dynamic)
ou encore opcode cache, opcache, …
Vous utilisez un langage qui n'est pas forcément réputé pour sa rapidité ?
Comme ………… par exemple ^_^
Pourquoi ne pas lui mettre un petit coup d'accélérateur ?
> Extensions qui augmentent la vitesse de votre application et
améliorent la génération de vos contenus (2 à 7x plus vite).
Web Accelerators (dynamic)
ou encore opcode cache, opcache, …
<?php
// Vérifie si les données se trouvent dans le cache
if (apc_exists('feed')) {
// Récupère les données du cache
$feed = apc_fetch('feed');
} else {
// Sinon génère les données
$feed = 'mon flux Twitter';
// et les sauvegarde dans le cache (24h)
apc_store('feed', $feed, 86400);
}
?>
Cache Systems (dynamic)
ou engines…
Vous faites de nombreuses requêtes sur des bases de données ?
Pourquoi ne pas utiliser un système de cache pour stocker quelques résultats ?
Il y de fortes chances que votre framework préféré soit “cache ready” !
CMS intégré (dynamic)
Vous êtes plutôt fan de CMS ?
Ça tombe bien car il existe également des solutions !
Des fonctions natives et même des plugins…
WP Transients API
W3 Total Cache, WP Super Cache, …
CMS intégré (dynamic)
<?php
// Récupère une copie de nos "transient data"
if ( false === ( $events = get_transient( 'events' ) ) ) {
// Sinon génère les donées et sauve les "transient data"
$events = new WP_Query( 'cat=5&order=random&tag=feweb' );
set_transient( 'events', $events, 12 * HOUR_IN_SECONDS );
}
?>
Transients API
Toujours côté serveur…
Reverse proxy (static)
Le proxy inverse est un serveur placé entre Internet et votre serveur web.
Il est donc particulièrement bien placé pour soulager votre serveur
en jouant un rôle d'accélérateur HTTP !
On citera nginx, Apache, Squid ou encore Varnish…
CDN
C'est également un cache mais plus proche de vos utilisateurs
(et donc encore plus rapide !)
CDN
Il permet donc d'alléger la charge sur vos serveurs
tout en économisant la bande passante.
On citera Cloudflare, Amazon CloudFront, OVH, Akamai…
Vos contenus se retrouvant répliqués partout dans le monde,
la proximité géographique ainsi obtenue améliore le temps de réponse
et le positionnement dans les moteurs de recherche locaux.
Le CDN est donc particulièrement indiqué
pour de gros sites internationaux à fort traffic.
Pour terminer
> Attention aux réglages et à la purge
> Réel impact sur la fréquentation et la conversion
> Solutions multiples, côté client et côté serveur
> Des fichiers mais aussi n'importe quelles données
Quelques outils
et autres ressources
Cache me if you can!
By Thierry Michel
Cache me if you can!
Du navigateur au CDN, augmentez la vitesse à laquelle vos pages sont délivrées et ne faites plus patienter vos visiteurs !
