Université du Système d'Information 2010
Performance des sites web : qui, pourquoi, quoi, comment et où ?
Éric Daspet
http...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
Éric Daspet
http://eric.daspet.name/
qualité, ouverture, ...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
« Users really respond to speed »
Marissa Meyer,
VP user ...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
« Users really respond to speed »
Marissa Meyer, VP user ...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
« Users really respond to speed »
Marissa Meyer, VP user ...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
Performance des sites web : qui, pourquoi, quoi, comment et où ?
Performance des sites web : qui, pourquoi, quoi, comment et où ?
« Users really respond to speed »
Marissa Meyer, VP user ...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
« Users really respond to speed »
Marissa Meyer, VP user ...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
chargement complet
4 à 10 secondes
images, javascript, fl...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
95 %
front-end
5 %
back-end
Performance des sites web : qui, pourquoi, quoi, comment et où ?
moins c'est plus
(de performance)
Performance des sites web : qui, pourquoi, quoi, comment et où ?
moins de requêtes HTTP
cache http, sprites, fusions, réut...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
moins de requêtes HTTP
cache http, sprites, fusions, réut...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
moins de requêtes HTTP
cache http, sprites, fusions, réut...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
moins de volume échangé
compression http et images, minim...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
moins de séquentiel
domaines multiples, js asynchrone, en...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
3x moins (requêtes, volume, séquentiel)
c'est plus de per...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
• Yslow
• Yahoo! Best Pratices
• Google Page Speed
• AOL ...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
questions, réactions, discussions
(éventuellement en priv...
Légal
• Photographies sous licences Creative Commons
– Eye-Open, par calico_13
http://www.flickr.com/photos/calico_13/4198...
Performance des sites web : qui, pourquoi, quoi, comment et où ?
Éric Daspet
http://eric.daspet.name/
qualité, ouverture, ...
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
Prochain SlideShare
Chargement dans…5
×

Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010

871 vues

Publié le

Université du SI, juin 2010

Voir http://www.universite-du-si.com/fr/conferences/6-paris-usi-2010/sessions/916-performance-des-sites-web-quoi-et-comment

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
871
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Cache HTTP
    Fusion JS – CSS
    Réutiliser les mêmes composants sur tout le site
  • Compression http
    Recompression png
    Minimisation css et js
  • 2 domaines
    Js asynchrone, ajax lazy loading
    Js en bas de page
    Éviter l’aspect synchrone
  • Eval
    Callback
    Variables locales
    DOM
    Reflow, repaint
  • Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010

    1. 1. Université du Système d'Information 2010 Performance des sites web : qui, pourquoi, quoi, comment et où ? Éric Daspet http://eric.daspet.name/ qualité, ouverture, web
    2. 2. Performance des sites web : qui, pourquoi, quoi, comment et où ? Éric Daspet http://eric.daspet.name/ qualité, ouverture, web Livre sur les performances des sites web en écriture
    3. 3. Performance des sites web : qui, pourquoi, quoi, comment et où ? « Users really respond to speed » Marissa Meyer, VP user experience, Google
    4. 4. Performance des sites web : qui, pourquoi, quoi, comment et où ? « Users really respond to speed » Marissa Meyer, VP user experience, Google + 1/3 bc de latence → -1 % de ventes + 1,5 bc au chargement → - 20 % de trafic (pages vues) + 1,2 bc au chargement → + 5 à 9 % d’abandon (rebond) + 3 bc au chargement → - 2,8 % de revenu publicitaire - 6 bc au chargement → + 15 % de taux transformation
    5. 5. Performance des sites web : qui, pourquoi, quoi, comment et où ? « Users really respond to speed » Marissa Meyer, VP user experience, Google + 1/3 bc de latence → -1 % de ventes + 1,5 bc au chargement → - 20 % de trafic (pages vues) + 1,2 bc au chargement → + 5 à 9 % d’abandon (rebond) + 3 bc au chargement → - 2,8 % de revenu publicitaire - 6 bc au chargement → + 15 % de taux transformation qu'est-ce qu'un bc ? combien de temps ça prend ?
    6. 6. Performance des sites web : qui, pourquoi, quoi, comment et où ?
    7. 7. Performance des sites web : qui, pourquoi, quoi, comment et où ?
    8. 8. Performance des sites web : qui, pourquoi, quoi, comment et où ? « Users really respond to speed » Marissa Meyer, VP user experience, Google + 100 ms de latence → -1 % de ventes + 500 ms au chargement → - 20 % de trafic (pages vues) + 400 ms au chargement → + 5 à 9 % d’abandon (rebond) + 1 sec. au chargement → - 2,8 % de revenu publicitaire - 2,2 sec. au chargement → + 15 % de taux transformation
    9. 9. Performance des sites web : qui, pourquoi, quoi, comment et où ? « Users really respond to speed » Marissa Meyer, VP user experience, Google + 100 ms de latence → -1 % de ventes + 500 ms au chargement → - 20 % de trafic (pages vues) + 400 ms au chargement → + 5 à 9 % d’abandon (rebond) + 1 sec. au chargement → - 2,8 % de revenu publicitaire - 2,2 sec. au chargement → + 15 % de taux transformation c’est encore pire en réalité
    10. 10. Performance des sites web : qui, pourquoi, quoi, comment et où ? chargement complet 4 à 10 secondes images, javascript, flash, rendu, initialisation, tout compris
    11. 11. Performance des sites web : qui, pourquoi, quoi, comment et où ?
    12. 12. 95 % front-end 5 % back-end
    13. 13. Performance des sites web : qui, pourquoi, quoi, comment et où ? moins c'est plus (de performance)
    14. 14. Performance des sites web : qui, pourquoi, quoi, comment et où ? moins de requêtes HTTP cache http, sprites, fusions, réutilisations c’est plus de performance
    15. 15. Performance des sites web : qui, pourquoi, quoi, comment et où ? moins de requêtes HTTP cache http, sprites, fusions, réutilisations c’est plus de performance
    16. 16. Performance des sites web : qui, pourquoi, quoi, comment et où ? moins de requêtes HTTP cache http, sprites, fusions, réutilisations c’est plus de performance
    17. 17. Performance des sites web : qui, pourquoi, quoi, comment et où ? moins de volume échangé compression http et images, minimisation c’est plus de performance
    18. 18. Performance des sites web : qui, pourquoi, quoi, comment et où ? moins de séquentiel domaines multiples, js asynchrone, en bas de page c’est plus de performance
    19. 19. Performance des sites web : qui, pourquoi, quoi, comment et où ? 3x moins (requêtes, volume, séquentiel) c'est plus de performance et c’est seulement après qu’on optimise le code et le système, si vraiment vous en avez encore besoin
    20. 20. Performance des sites web : qui, pourquoi, quoi, comment et où ? • Yslow • Yahoo! Best Pratices • Google Page Speed • AOL Web Page Test • Un expert conseil (attention, message subliminal)
    21. 21. Performance des sites web : qui, pourquoi, quoi, comment et où ? questions, réactions, discussions (éventuellement en privé après)
    22. 22. Légal • Photographies sous licences Creative Commons – Eye-Open, par calico_13 http://www.flickr.com/photos/calico_13/419846038/in/set-72157594579918893/ licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique – Eye-closed 2, par calico_13 http://www.flickr.com/photos/calico_13/419383830/in/photostream/ licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique – Purbeck Way Direction Post, par TreeHouse1977 http://www.flickr.com/photos/treehouse1977/2979812858/ Paternité-Partage des Conditions Initiales à l'Identique 2.0 Générique – Danbo conoce a Domo - Danbo meets Domo, par GViciano http://www.flickr.com/photos/gviciano/4060850226/ licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique – Max Hoogte, par wester http://www.flickr.com/photos/wester/12949097/ licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 Générique • Présentation sous licence Creative Commons – Par Eric Daspet, SQLI http://eric.daspet.name/ - http://www.sqli.com/ licence Creative Commons Paternité-Pas d’Utilisation Commerciale-Pas de Modification 3.0 http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr Éric Daspet http://eric.daspet.name/ qualité, ouverture, web
    23. 23. Performance des sites web : qui, pourquoi, quoi, comment et où ? Éric Daspet http://eric.daspet.name/ qualité, ouverture, web Livre sur les performances des sites web en écriture

    ×