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 !

@thierrymichel

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 : kissmetricswebby 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 ?

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” !

> Plusieurs solutions basées sur le système de fichiers,
une table spécifique ou encore la mise en mémoire.

Par exemple: memcached ou Redis.

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

Merci de votre attention.

 

 

 

@thierrymichel

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 !

  • 2,753