DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[End of Lesson 2]]|[[Text Problems]] ->|

La réalité du réseau mobile fait que le nombre de requêtes peut être aussi significatif que la taille des fichiers. En d'autres termes, visez la réduction du nombre de requêtes image, ps juste leur taille. c'est un problème que l'on appelle la latence : le délai entre la requête et la réponse.

Chaque requête génère un délai qui peut varier significativement et de manière imprévisible.

Vitesse actuel le un peu mieux que 1/2 vitesse de la lumière, donc au mieux, de londres à la californie, A/R 100ms.

La latence appelée le nouveau 'bottleneck' (engorgement). La bande passante n'est plus aussi importante que la latence (on a une très large bande-passante, la latence est incompressible).

Les performances sont une partie fondamentale du design adaptatif.

Dans la suite on va voir comment avoir de beaux effets visuels sans images.

====== Performance ======

Why is latency the new bottleneck? [[http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH|Check out what Ilya has to say]] in //High Performance Browser Networking//. Notice how reducing latency continues to improve page load times, whereas for bandwidth the graph flattens out:

{{http://orm-chimera-prod.s3.amazonaws.com/1230000000545/images/hpbn_1006.png|graph about latency}}

To reduce the number of image downloads, you can also use [[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites|CSS image sprites]] (or [[http://blog.brianjohnsondesign.com/responsive-background-image-sprites-css-tutorial/|responsive sprites]]). A [[https://www.google.co.uk/images/nav_logo195.png|sprite sheet]] image combines lots of images, which can be displayed individually by setting the sprite sheet as the background to an element, then adjusting background position with CSS. This technique can be particularly useful for icons and other repeated graphics.

**Whatever techniques you use to avoid latency, be aware of the changes that are coming with HTTP/2.**

In a nutshell, HTTP/2 will mean that requesting multiple files will be less costly: prepare to stop using spriting, concatenating and other HTTP/1 hacks!

To find out more, check out [[https://mattwilcox.net/web-development/http2-for-front-end-web-developers|HTTP2 for front-end web devs]].