Quoi de neuf dans la Performance Web ?
Ce qui marche
Ce qui ne marche pas
Ce qui marchouille…
Bonjour je suis
• Jean-pierre VINCENT
• Dans le Web depuis 2000
• Dans la perf depuis 2005
• Startups, Yahoo!, grosses boi...
LE CHAMP DE BATAILLE
À quoi ça ressemble le front papa ?
Le monde est devenu merveilleux
Depuis 2005 :
• La fibre, la 4G !
• Des navigateurs qui
boostent !
• HTML5
• De nouveaux p...
Le monde est devenu merveilleux
• Explosion du CSS3
• Flat Design
• Sites dédiés mobiles
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 - 2...
Ce qui n’a pas changé
• L’ADSL
• IE 8 (ou pire malheureux)
Ce qui a empiré
• Les attentes des utilisateurs :
– Si mon petit téléphone est fluide, pourquoi pas ton
site sur mon gros ...
Ce qui a empiré
• Ton département
marketing :
– Tags
– Publicités
– Widgets
– AB Testing
en MASSE
Ce qui a empiré
• Le poids des sites
– +130% de poids en 3 ans !
– +56% sur les dédiés
mobile !
• Les nouvelles
fonctionna...
L’ARSENAL
Ce qui ne marche plus
Oublies :
• Le domain sharding
• JS en bas de page
Ce qui marchera (ou pas)
• SPDY / HTTP2
– 30% de gain selon les
organisateurs …
– 0% selon la police
• Images responsives,...
Les nouveaux trucs qui marchent
• Fonts asynchrones
• DOM Storage, offline
• Exécution non bloquante
de JavaScript
– Web W...
Ce qui marchouille
• domaine des statiques
séparé
– des fois oui
– des fois non
• JS Asynchrone
• CDN
Ce qui marchouille
• Contenu dans le HTML :
– CSS, JS, images => google.fr
• CSS3
– Moins d’images
– Ça peut ramer
• JPG p...
CE QUI MARCHERA TOUJOURS
Ce qui marchera toujours
• Configure ton serveur
bon sang :
– Keep-alive
– Gzip (lvl 9)
– Minifie
(Et offre toi de quoi su...
Ce qui marchera toujours
• Gère ton cache !
– Savoir le créer
– Savoir l’invalider
• Le super cache : l’offline
Ce qui marchera toujours
• Asynchrone sur :
– Pubs
– Widgets
– Trackers
– Images non-visibles
• Grouper :
– JS et CSS en 2...
La morale de cette histoire
• Fais ta veille
• Teste (en Dev)
• Re-teste (en Prod)
• Surveille
(Et appelle moi, j’ai un pa...
Questions
?
Jean-pierre VINCENT
• Consultant indépendant
– Applications Web (HTML5 / JS)
– Performances !
• Formateur
– JavaScript
– P...
J’ai quasi-volé ces photos à :
• Blurb Code
• Marcela Palma
• AlsaCréationS
• Alex Proimos
• JD Hancock
• Ant Baena
• Kit
...
Prochain SlideShare
Chargement dans…5
×

Performances web - quoi de neuf ?

4 275 vues

Publié le

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

Publié dans : Technologie
0 commentaire
7 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 275
Sur SlideShare
0
Issues des intégrations
0
Intégrations
472
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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

  • Pas plus rapide qu’une requête HTTP non faite
  • Lazy-load images
  • Performances web - quoi de neuf ?

    1. 1. Quoi de neuf dans la Performance Web ? Ce qui marche Ce qui ne marche pas Ce qui marchouille…
    2. 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. 3. LE CHAMP DE BATAILLE À quoi ça ressemble le front papa ?
    4. 4. Le monde est devenu merveilleux Depuis 2005 : • La fibre, la 4G ! • Des navigateurs qui boostent ! • HTML5 • De nouveaux protocoles !
    5. 5. Le monde est devenu merveilleux • Explosion du CSS3 • Flat Design • Sites dédiés mobiles
    6. 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. 7. Ce qui n’a pas changé • L’ADSL • IE 8 (ou pire malheureux)
    8. 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. 9. Ce qui a empiré • Ton département marketing : – Tags – Publicités – Widgets – AB Testing en MASSE
    10. 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. 11. L’ARSENAL
    12. 12. Ce qui ne marche plus Oublies : • Le domain sharding • JS en bas de page
    13. 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. 14. Les nouveaux trucs qui marchent • Fonts asynchrones • DOM Storage, offline • Exécution non bloquante de JavaScript – Web Workers, RaF – setTimeout (fn, 0)
    15. 15. Ce qui marchouille • domaine des statiques séparé – des fois oui – des fois non • JS Asynchrone • CDN
    16. 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. 17. CE QUI MARCHERA TOUJOURS
    18. 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. 19. Ce qui marchera toujours • Gère ton cache ! – Savoir le créer – Savoir l’invalider • Le super cache : l’offline
    20. 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. 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. 22. Questions ?
    23. 23. Jean-pierre VINCENT • Consultant indépendant – Applications Web (HTML5 / JS) – Performances ! • Formateur – JavaScript – Performances • Veilleur : @theystolemynick braincracking.org
    24. 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

    ×