davidbgk
/
larlet-fr-david

title: Cours IUT : Performances Web
slug: cours-iut-performances-web
date: 2015-02-11
chapo: Il s’agit de connaître les grands principes ET surtout de les appliquer.

> Le *mobile first* est l’héritier de la pensée « amélioration progressive » : délivrons très rapidement la promesse initiale, chargeons les fonctionnalité supplémentaires après et en fonction des capacités du client. Cela oblige à se poser la vraie question : quelles sont les priorités de chaque page ?
>
> Cela s'intègre parfaitement avec un processus de conception moderne où designer et intégrateur web passent pas mal de temps l’un à côté de l’autre pour fignoler les maquettes sur les mobiles.
>
> <cite>*[Le web mobile et la performance](http://www.24joursdeweb.fr/2014/le-web-mobile-et-la-performance/)* ([cache](/david/cache/dfe1ad5579069ea5f39d17c6ba94c5eb/))</cite>

Après avoir [fait du JavaScript](/david/blog/2015/cours-iut-comprendre-javascript/) lors du dernier [cours](/david/pro/enseignement/), on passe à quelque chose de plus léger avec les performances web. Vaste sujet. J’ai donné les grands principes [lors du premier cours sur le web mobile](/david/blog/2015/cours-iut-web-mobile/) et je leur ai demandé de venir avec un site d’exemple à analyser. J’ai pour ma part choisi celui de [Bertrand Billard](http://www.bertrandbillard.com/) car il y a presque tous les éléments réunis pour montrer ce qu’il ne faut pas faire (à moins que vous ne souhaitiez [faire subir](http://www.webpagetest.org/result/150210_0X_FH2/) un *ironman* à votre navigateur, huhu).

Premier outil indispensable, l’onglet réseau des outils du navigateur. Il permet de voir tout ce qu’il se passe pour votre configuration. (Mal)heureusement, beaucoup de vos utilisateurs n’ont [pas la chance d’avoir une machine/connexion aussi performante](http://www.webperformancetoday.com/2015/01/21/xx-things-slowing-site-control/) ([cache](/david/cache/be7b2fb6fb4d22751f625b3ecfc6f217/)). Second outil, [WebPageTest](http://www.webpagetest.org/) qui donne d’autres informations et qui permet de choisir le navigateur et la connexion.

Ces deux outils devraient suffire à alimenter la discussion pour un cours de 4 heures. Il sera question de compression, de workflows, de mesures, de minification, de chemin critique, de latence, de polices, de requêtes tierces, d’expérience utilisateur, de bande passante, de cache, de *sprites*, de rendu, de stratégie, etc. Ce sera l’occasion de leur présenter [le livre d’Éric sur la performance web](https://github.com/davidbgk/webperf-book) qui donne [les directives suivantes](https://github.com/davidbgk/webperf-book/blob/master/content/chap02-premiers-concepts.md#directives-principales) :

1. Réduire le nombre de requêtes HTTP
2. Réduire le poids des composants
3. Améliorer la parallélisation des téléchargements
4. Améliorer le ressenti utilisateur
5. Améliorer l'applicatif et les temps de traitement


On terminera peut-être avec quelques outils comme [lazyload](https://github.com/vvo/lazyload), [picturefill](https://github.com/scottjehl/picturefill), [fastclick](https://github.com/ftlabs/fastclick) ou [instantclick](http://instantclick.io/) que j’ai mis en place sur ce site. Mais je ne veux pas non plus tomber dans la micro-optimisation, **il s’agit plutôt de connaître les grands principes ET surtout de les appliquer.**