Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 3.3KB

12345678910111213141516171819202122232425
  1. title: Cours IUT : Performances Web
  2. slug: cours-iut-performances-web
  3. date: 2015-02-11
  4. chapo: Il s’agit de connaître les grands principes ET surtout de les appliquer.
  5. > 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 ?
  6. >
  7. > 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.
  8. >
  9. > <cite>*[Le web mobile et la performance](http://www.24joursdeweb.fr/2014/le-web-mobile-et-la-performance/)* ([cache](/david/cache/dfe1ad5579069ea5f39d17c6ba94c5eb/))</cite>
  10. 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).
  11. 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.
  12. 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) :
  13. 1. Réduire le nombre de requêtes HTTP
  14. 2. Réduire le poids des composants
  15. 3. Améliorer la parallélisation des téléchargements
  16. 4. Améliorer le ressenti utilisateur
  17. 5. Améliorer l'applicatif et les temps de traitement
  18. 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.**