Qu'est ce qui a changé ces dernières années pour la performance Web ? Quelles sont les pratiques obsolètes, limite ou toujours au top ? Tour d'horizon en 20 minutes de la perf aujourd'hui

1. Quoi de neuf dans la Performance Web ?
Ce qui marche
Ce qui ne marche pas
Ce qui marchouille…

2. Bonjour je suis
• Jean-pierre VINCENT
• Dans le Web depuis 2000
• Dans la perf depuis 2005
• Startups, Yahoo!, grosses boites FR …
• Indépendant : expert JS et perfs
• Formateur, prof, auteur
• Viens jouer : @theystolemynick
braincracking.org

3. LE CHAMP DE BATAILLE
À quoi ça ressemble le front papa ?

4. Le monde est devenu merveilleux
Depuis 2005 :
• La fibre, la 4G !
• Des navigateurs qui
boostent !
• HTML5
• De nouveaux protocoles !

5. Le monde est devenu merveilleux
• Explosion du CSS3
• Flat Design
• Sites dédiés mobiles

6. Ce qui n’a pas changé
• L’être humain
– Need For Speed
• La vitesse de la lumière
– Fibre : débit X 10 mais chargement - 20% …
• La transmission radio
– Mobile = latence = pas si rapide

7. Ce qui n’a pas changé
• L’ADSL
• IE 8 (ou pire malheureux)

8. Ce qui a empiré
• Les attentes des utilisateurs :
– Si mon petit téléphone est fluide, pourquoi pas ton
site sur mon gros PC ?
• Google lit le JS
– Ce qui veut dire que la perf front va influencer le
taux de crawl

9. Ce qui a empiré
• Ton département
marketing :
– Tags
– Publicités
– Widgets
– AB Testing
en MASSE

10. Ce qui a empiré
• Le poids des sites
– +130% de poids en 3 ans !
– +56% sur les dédiés
mobile !
• Les nouvelles
fonctionnalités
– Font, grosses images,
HTTPS
• Le RWD
– Retina© + IE6 + 5
breakpoints

11. L’ARSENAL

12. Ce qui ne marche plus
Oublies :
• Le domain sharding
• JS en bas de page

13. Ce qui marchera (ou pas)
• SPDY / HTTP2
– 30% de gain selon les
organisateurs …
– 0% selon la police
• Images responsives, specs :
– ”srcset”, “src-N“, <picture>, client-
hints …
– ou pas
• CSS “will-change“
• Format d’image WebP

14. Les nouveaux trucs qui marchent
• Fonts asynchrones
• DOM Storage, offline
• Exécution non bloquante
de JavaScript
– Web Workers, RaF
– setTimeout (fn, 0)

15. Ce qui marchouille
• domaine des statiques
séparé
– des fois oui
– des fois non
• JS Asynchrone
• CDN

16. Ce qui marchouille
• Contenu dans le HTML :
– CSS, JS, images => google.fr
• CSS3
– Moins d’images
– Ça peut ramer
• JPG progressif
– Partout sauf IE8 / iOS

17. CE QUI MARCHERA TOUJOURS

18. Ce qui marchera toujours
• Configure ton serveur
bon sang :
– Keep-alive
– Gzip (lvl 9)
– Minifie
(Et offre toi de quoi surveiller tes admins)

19. Ce qui marchera toujours
• Gère ton cache !
– Savoir le créer
– Savoir l’invalider
• Le super cache : l’offline

20. Ce qui marchera toujours
• Asynchrone sur :
– Pubs
– Widgets
– Trackers
– Images non-visibles
• Grouper :
– JS et CSS en 2 X 2 fichiers
– Sprites, fonts iconiques

21. La morale de cette histoire
• Fais ta veille
• Teste (en Dev)
• Re-teste (en Prod)
• Surveille
(Et appelle moi, j’ai un paquet d’idées rentables)
(au pire je te forme)

22. Questions
?

23. Jean-pierre VINCENT
• Consultant indépendant
– Applications Web (HTML5 / JS)
– Performances !
• Formateur
– JavaScript
– Performances
• Veilleur : @theystolemynick
braincracking.org

24. J’ai quasi-volé ces photos à :
• Blurb Code
• Marcela Palma
• AlsaCréationS
• Alex Proimos
• JD Hancock
• Ant Baena
• Kit
• Honza Soukup
• Nicu Buculei
• Earl