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
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
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)
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
Hinweis der Redaktion
Fibre : 50Mb/s , 4G : 20-30 Mb/s.
Même la 3G est passée récemment à 6Mb/s, + rapide que l’ADSL
moteur JS IE 9 10x plus rapide que IE 8, lui même 5x plus rapide que IE 7
accès GPU, compilos optimisés
Moins d’images à la con
Sites plus légers
Humain : La vitesse reste une exigence
4G : 50-100ms au mieux, 3G : on ne compte plus
France : 6,5Mb de MOYENNE => viser les 3 Mb pour être serein
Fibre : 10% de la population couverte
4G : des fois. La saturation arrivera
IE8 : 20%
Jusqu’ici, seules les perfs serveur influençaient le taux de crawl
AB Testing retarde VOLONTAIREMENT l’affichage
Bouton Google ou facebook : 150-200K chacun, un max de JS
Parce que IE7 c’est fini
Parce que mobile =
peu de bande passante,
HTTP pipelining : une ressource peut ralentir les autres
Par défaut dans Ruby par ex.
JS bas de page : ralentit les mobiles et le temps d’accès à la fonctionnalité
SPDY (HTTP2)
-30% selon les organisateurs, 0% selon la police
WebP : dans Chrome, déployé par Facebook, 30% meilleure que JPG
FONT :
Ça bloque, mais pas partout pareil
Le moins possible
Option asynchrone
Storage : stocker liste de pays, remplacer les cookies, stockage CSS / image
Grands gagnants : requireJS ou LabJS
1 seule requête pour le premier contenu visible
Le reste en asynchrone