Introduction à la
performance web
Damien Jubeau
CEO @DareBoost
Performance web, quels enjeux ?
Bonnes pratiques HTTP/1
HTTP/2, ce qui (va) change(r)
Le budget de performance
Toolbox
Pourquoi
la #webperf ?
6 octobre 2015
MV CubeMV Cube
Attente = Frustration
6 octobre 2015
MV CubeMV Cube
6
$11.500.000
300 ms...
2016 - source :
From Application Metrics to Customer Experience Metrics
7
53%
des visites sur mobile
abandonnées après
3 secondes
Le challenge du web mobile
2016 - source :
DoubleClick - The nee...
8
Guidelines Mobile Friendly (2015)
« Chargement lent
des pages mobiles »
Mobile Friendly
Avant AMP...
Red Slow Label
février 2015
Slow To Load
juin 2015
source :
Google : « Slow To Load » en cours de test
10
Impacts rapidité sur le web
Acquisition Conversion
Référencement,
Coût adwords,
Taux de rebond,
Tenue de charge,
Referr...
« 80-90% of the end-user response time
is spent on the frontend. Start there. »
Steve Souders
Performance Golden Rule
et pourtant...
chargement : 7 sec 2 sec
Infrastructure nécessaire : -50 %
Architecture et bonnes pratiques
+ 10%
sur le taux
de conversion
Architecture et bonnes pratiques
2009 - source :
Shopzilla - Performance By Design
Performance Front-End
1 - Optimisation des images
Les formats
Commencer par choisir
le bon format
JPEG 30ko GIF 7ko PNG 17ko
Optimisation des images
JPEG : Compression
10% - 3.5ko 50% - 9.6ko
100% - 63ko
Minification JS/CSS
.maClass { /* Commentaire sur ma classe */
margin: 0px 0px 0px 0px;
}
Minification JS/CSS
.maClass{margin:0}
Minification JS/CSS
Minfication vs compression
En savoir plus :
http://blog.dareboost.com/fr/2014/07/la-minification-css/
...
Minification JS/CSS
Obfuscation
function maFonction(param){
var maValeur = 1;
return param+4;
}
function maFonction(e){var...
Gzip
Les données sont
compressées par le serveur
puis décompressées par le
client
Ne pas compresser des formats qui le son...
Zopfli / Brotli
Above the fold!
Privilégier le chargement de
la partie de la page
avant la ligne de flottaison
Above the fold !
Le Javascript, comme le CSS sont bloquants
<html>
<head>
<script type="text/javascript" src="script.js"><...
Déporter le Javascript
Solution 1 : script inline
<html>
<head>
<script type="text/javascript">
/* Pour un script très cou...
Déporter le Javascript
Solution 2 : script async
<html>
<head>
<script async type="text/javascript" src="script.js"></scri...
Déporter le Javascript
Solution 3 : différer l'appel
<script type="text/javascript">
function downloadJSAtOnload() {
var e...
Erreurs et redirections
29% des sites comportent une erreur 4XX ou 5XX
Source :
Httparchive.org – septembre 2016
9% des si...
HTTP/2
Les grands principes
HTTP/1.1
Les grands principes
Domain Sharding
! Hacky  !
Les grands principes
Les grands principes
Multiplexing
(1 seule connexion TCP / origine)
Compression des en-têtes
Server Push
Aujourd'hui !
HTTPS
Ce qu'il va falloir désapprendre
Domain Sharding
Concaténation, Spriting
Asset inlining
Budget de
performance
dareboost.com
@Dareboost
38
« As a product manager you should
know that speed is
product feature number one. »
Larry Page
dareboost.com
@Dareboost
39
« Don’t launch features
that slow us down.»
Google Gospel of Speed
Se fixer des objectifs
« le site doit être rapide »
« la page doit faire moins de 1Mo »
« le serveur doit répondre en 150m...
Budget : 1Mo
La home page du site
800ko
Cas pratique
On me demande d'y
ajouter un habillage
publicitaire
300ko
Cas pratique
Budget KO ???
800ko 300 ko
Cas pratique
Optimiser
Épurer
Abandonner
Rentrer dans le budget
Respect du budget
200ko800ko
Budget toujours KO ?
=> il évolue !
Et quand ça coince
Pour chaque étape et
pour chaque interlocuteur
Budget = implication + compromis
TTFB
(délai avant premier octet)
Temps de réponse serveur
Start Render
Délai avant début d'affichage
Visually Complete
Délai avant fin d'affichage
Speed Index
Indice de performance
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
< 1000
(1 seconde pour le contenu « above the fold »)
https://developers.google.com/speed/docs/insights/mobile
Speed Index
Toolbox
59
Impacts rapidité sur le web
wpostats.com
dareboost.com/webperf-impacts
httparchive.org
Content Security Policy
Performance API
Pour aller plus loin
Real User Monitoring
(monitoring passif)
« la vraie vie »
2 approches de surveillance
Google Analytics et temps de chargem...
Monitoring Synthétique
(monitoring actif)
internaute simulé
2 approches de surveillance
Outils
Consoles des navigateurs
Ctrl + Maj + i
Safari : Cmd + Option + c (après avoir activé le menu développement)
IE : F...
Outils
OpenSource / Gratuit
www.webpagetest.org
Riche fonctionnellement mais parfois
complexe. Pas de monitoring.
@DareBoost
Rennais ;)
Freemium, à vous de découvrir !
www.dareboost.com
6 octobre 2015
MV CubeMV Cube
6 octobre 2015
MV CubeMV Cube
Merci !
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
Prochain SlideShare
Chargement dans…5
×

RennesJS Talk webperf by Dareboost

508 vues

Publié le

Talk sur la "Performance Web : Enjeux, techniques et méthodologie" pour @RennesJS

Rappel du programme :
"Après la découverte de quelques success stories sur la performance web - des éléments pour se convaincre et savoir convaincre de l'importance de la webperf - nous aborderons les techniques élémentaires pour mettre vos pages web au régime (compression, optimisation des images, politique de cache, etc).
Ce sera aussi l'occasion d'aborder HTTP/2 : les bonnes pratiques de performance ne sont peut être plus celles que vous croyez et vos habitudes vont devoir changer, nous verrons pourquoi !

Nous n'oublierons pas d'évoquer les différents indicateurs de performance (speedindex, start render, etc), et il est fort possible que je m'égare à l'occasion sur d'autres outils de qualité front-end, comme la Content Security Policy...

En conclusion, on parlera de budget. Pas celui de la soirée, mais du budget de performance, à appliquer sur vos projets, pour créer une véritable culture de la performance web dans votre équipe !"

Publié dans : Internet
  • Soyez le premier à commenter

RennesJS Talk webperf by Dareboost

  1. 1. Introduction à la performance web Damien Jubeau CEO @DareBoost
  2. 2. Performance web, quels enjeux ? Bonnes pratiques HTTP/1 HTTP/2, ce qui (va) change(r) Le budget de performance Toolbox
  3. 3. Pourquoi la #webperf ?
  4. 4. 6 octobre 2015 MV CubeMV Cube Attente = Frustration
  5. 5. 6 octobre 2015 MV CubeMV Cube
  6. 6. 6 $11.500.000 300 ms... 2016 - source : From Application Metrics to Customer Experience Metrics
  7. 7. 7 53% des visites sur mobile abandonnées après 3 secondes Le challenge du web mobile 2016 - source : DoubleClick - The need for mobile speed
  8. 8. 8 Guidelines Mobile Friendly (2015) « Chargement lent des pages mobiles » Mobile Friendly
  9. 9. Avant AMP... Red Slow Label février 2015 Slow To Load juin 2015 source : Google : « Slow To Load » en cours de test
  10. 10. 10 Impacts rapidité sur le web Acquisition Conversion Référencement, Coût adwords, Taux de rebond, Tenue de charge, Referral Image de marque, Panier moyen, Taux de conversion, Sécurité
  11. 11. « 80-90% of the end-user response time is spent on the frontend. Start there. » Steve Souders Performance Golden Rule
  12. 12. et pourtant... chargement : 7 sec 2 sec Infrastructure nécessaire : -50 % Architecture et bonnes pratiques
  13. 13. + 10% sur le taux de conversion Architecture et bonnes pratiques 2009 - source : Shopzilla - Performance By Design
  14. 14. Performance Front-End
  15. 15. 1 - Optimisation des images Les formats Commencer par choisir le bon format JPEG 30ko GIF 7ko PNG 17ko
  16. 16. Optimisation des images JPEG : Compression 10% - 3.5ko 50% - 9.6ko 100% - 63ko
  17. 17. Minification JS/CSS .maClass { /* Commentaire sur ma classe */ margin: 0px 0px 0px 0px; }
  18. 18. Minification JS/CSS .maClass{margin:0}
  19. 19. Minification JS/CSS Minfication vs compression En savoir plus : http://blog.dareboost.com/fr/2014/07/la-minification-css/ Traitements Taille finale Aucun (CSS brut) 132 ko Compression Gzip 19,4 ko Minification 109,5 ko Minification puis Compression Gzip 18 ko 7 %
  20. 20. Minification JS/CSS Obfuscation function maFonction(param){ var maValeur = 1; return param+4; } function maFonction(e){var t=1;return e+4}
  21. 21. Gzip Les données sont compressées par le serveur puis décompressées par le client Ne pas compresser des formats qui le sont déjà (png, jpeg...) !
  22. 22. Zopfli / Brotli
  23. 23. Above the fold! Privilégier le chargement de la partie de la page avant la ligne de flottaison
  24. 24. Above the fold ! Le Javascript, comme le CSS sont bloquants <html> <head> <script type="text/javascript" src="script.js"></script> </head> <body> <div> Hello, world! </div> </body> </html> Bloque le téléchargement d'autres ressources jusqu'à la fin de l'exécution
  25. 25. Déporter le Javascript Solution 1 : script inline <html> <head> <script type="text/javascript"> /* Pour un script très court et indispensable */ </script> </head> <body> <div> Hello, world! </div> </body> </html>
  26. 26. Déporter le Javascript Solution 2 : script async <html> <head> <script async type="text/javascript" src="script.js"></script> </head> <body> <div> Hello, world! </div> </body> </html> Pas de garantie d'ordre. IE >= 10
  27. 27. Déporter le Javascript Solution 3 : différer l'appel <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </body> Code proposé par Google sous licence Apache 2.0
  28. 28. Erreurs et redirections 29% des sites comportent une erreur 4XX ou 5XX Source : Httparchive.org – septembre 2016 9% des sites avec 5 redirections ou plus
  29. 29. HTTP/2
  30. 30. Les grands principes HTTP/1.1
  31. 31. Les grands principes Domain Sharding ! Hacky  !
  32. 32. Les grands principes
  33. 33. Les grands principes Multiplexing (1 seule connexion TCP / origine) Compression des en-têtes Server Push
  34. 34. Aujourd'hui !
  35. 35. HTTPS
  36. 36. Ce qu'il va falloir désapprendre Domain Sharding Concaténation, Spriting Asset inlining
  37. 37. Budget de performance
  38. 38. dareboost.com @Dareboost 38 « As a product manager you should know that speed is product feature number one. » Larry Page
  39. 39. dareboost.com @Dareboost 39 « Don’t launch features that slow us down.» Google Gospel of Speed
  40. 40. Se fixer des objectifs « le site doit être rapide » « la page doit faire moins de 1Mo » « le serveur doit répondre en 150ms » Budget de performance Article détaillé : Budget de performance : un indispensable à la rapidité des sites web
  41. 41. Budget : 1Mo La home page du site 800ko Cas pratique
  42. 42. On me demande d'y ajouter un habillage publicitaire 300ko Cas pratique
  43. 43. Budget KO ??? 800ko 300 ko Cas pratique
  44. 44. Optimiser Épurer Abandonner Rentrer dans le budget
  45. 45. Respect du budget 200ko800ko
  46. 46. Budget toujours KO ? => il évolue ! Et quand ça coince
  47. 47. Pour chaque étape et pour chaque interlocuteur Budget = implication + compromis
  48. 48. TTFB (délai avant premier octet) Temps de réponse serveur
  49. 49. Start Render Délai avant début d'affichage
  50. 50. Visually Complete Délai avant fin d'affichage
  51. 51. Speed Index Indice de performance
  52. 52. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  53. 53. < 1000 (1 seconde pour le contenu « above the fold ») https://developers.google.com/speed/docs/insights/mobile Speed Index
  54. 54. Toolbox
  55. 55. 59 Impacts rapidité sur le web wpostats.com dareboost.com/webperf-impacts httparchive.org
  56. 56. Content Security Policy Performance API Pour aller plus loin
  57. 57. Real User Monitoring (monitoring passif) « la vraie vie » 2 approches de surveillance Google Analytics et temps de chargement : bénéfices et limites du Real User Monitoring
  58. 58. Monitoring Synthétique (monitoring actif) internaute simulé 2 approches de surveillance
  59. 59. Outils Consoles des navigateurs Ctrl + Maj + i Safari : Cmd + Option + c (après avoir activé le menu développement) IE : F12
  60. 60. Outils OpenSource / Gratuit www.webpagetest.org Riche fonctionnellement mais parfois complexe. Pas de monitoring.
  61. 61. @DareBoost Rennais ;) Freemium, à vous de découvrir ! www.dareboost.com
  62. 62. 6 octobre 2015 MV CubeMV Cube
  63. 63. 6 octobre 2015 MV CubeMV Cube Merci !

×