Your SlideShare is downloading. ×
0
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Performances web - quoi de neuf ?

3,248

Published on

Qu'est ce qui a changé ces dernières années pour la performance Web ? …

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,248
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • Transcript

    • 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

    ×