Webperfs 101

Timothée Carry

  • Consultant Octo Technology
  • Spécialiste front-end Web
  • @pixelastic à l'extérieur

Pourquoi ?

On ne remarque pas quand c'est rapide,
mais on ressent quand c'est lent.

  • Lenteur ressentie au bout de 4s en 2008, 3s en 2014
  • Nouvelle génération habituée à l'instantané
  • Explosion du nombre de terminaux mobiles

Sommaire

  1. Concatenate

  2. Compress

  3. Cache

  4. Cheat

Concatenate

Télécharger moins de fichiers

france.fr

Waterfall france.fr

github.com

Waterfall github.com

Goulot d'étranglement

  • Maximum de connections parallèlles
  • TCP Slow-start
  • Overhead SSL

Compress

Télécharger des fichiers plus légers

GZIP ALL TEH THINGS!

GZIP : La formule magique

  • Gain de 66% en moyenne
  • Assets textuels : HTML, CSS, Javascript, XML, JSON
  • Serveur : Apache, Lighttpd, Nginx, IIS
  • Browser : IE5.5+

Apache

<IfModule mod_deflate.c>
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/javascript" "application/json" \
"text/css" "text/html" "text/xml" [...]
  </IfModule>
</IfModule>

Lighttpd

server.modules += ( "mod_compress" )
compress.filetype  = ("application/javascript", "application/json", \
"text/css", "text/html", "text/xml", [...] )

nginx

gzip on;
gzip_types application/javascript application/json text/css text/html text/xml [...]; 

Enlever le surpoids

En webperf, tout ce que vous avez écrit sera téléchargé et pourra être utilisé contre vous.
  • Minification
  • production != debug
  • Suppression du code mort

Cache

Télécharger moins souvent

Fraicheur

  • Date limite de consommation
  • Rapide, pas de requete si encore frais
  • Deux headers

    • Expires: Thu, 04 May 2014 20:00:00 GMT
    • Cache-Control: max-age=3600, must-revalidate

Validation

  • Vérification que le client possède la dernière version

    • Oui : 304 - Not Modified
    • Non: 200 - OK
  • Évite téléchargement inutile
  • Deux couples de headers

    • Last-Modified: Mon, 04 May 2014 02:28:12 GMT / If-Modified-Since
    • ETag: "3e86-410-3596fbbc" / If-None-Match

Un beau dessin

Le cache dans un beau dessin

Invalidation

There are only two hard things in Computer Science: cache invalidation and naming things.
  • Cache max (1 an)
  • Nouvelles urls (timestamp, hash, etc)

    • github2-c9b5fd6520f5ab77dd823b1b2c81ff9c461b1374.css
    • github-14e2a44e296739b8ec8d7763e88ed307a6d424e0.js

Cheat

Tout le monde le fait...

Faire illusion

  • Feedback en avance (Instagram)
  • Illusion d'optique (Gmail)
  • Spinner plus rapide (Firefox)
  • Spinner iOS (Facebook)

Questions ?

Photos