Comment améliorer la performance de vos sites et applications web présentation

453 vues

Publié le

Conférence présentée par LE BASTARD Yannick et LAVOISEY Thibaud

En France, l’usage des smartphones a presque doublé en trois ans. 46% des français ont fait leur dernier achat en ligne. 60% des français ont fait des recherches en ligne avant leur dernier achat. 71% des acheteurs en magasin qui utilisent les smartphones pour faire des recherches en ligne affirment que leur expérience sur leur appareil mobile est devenue plus importante que leur expérience en magasin.

Compte tenu de ces statistiques, il est aujourd’hui important que l’expérience des utilisateurs sur vos sites et applications Web soit des plus agréables.

En s’appuyant sur une démonstration étape par étape, l’objectif de cette conférence est de voir comment améliorer la performance, satisfaire vos clients et augmenter votre chiffre d’affaires.

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Comment améliorer la performance de vos sites et applications web présentation

  1. 1. Comment optimiser la performance de vos sites et applications Web ?
  2. 2. Pourquoi ?
  3. 3. La perception des utilisateurs évolue
  4. 4. Les mobiles sont de plus en plus utilisés
  5. 5. Comment ?
  6. 6. Étude de cas
  7. 7. Optimisation d’Unify
  8. 8. Étape 1 Analyser
  9. 9. WebPagetest
  10. 10. PageSpeed Insights
  11. 11. Étape 2 Optimiser
  12. 12. Utilisation de Node.js
  13. 13. Automatisation des tâches :
 Grunt, Gulp…
  14. 14. Optimisation des images
  15. 15. Choisir le bon format
  16. 16. Réduire la taille des fichiers Imagemin : compression des images sans perte de données
  17. 17. Optimisation des images Avant Après Temps de chargement 17 secondes 11 secondes Indice de vitesse 8371 7005 Données transférées 2,5 Mo 1,1 Mo
  18. 18. Optimisation du HTML
  19. 19. Réduire la taille des fichiers Minize : minimisation des fichiers
  20. 20. Optimisation du HTML Avant Après Temps de chargement 11 secondes 10 secondes Indice de vitesse 7005 6408 Données transférées 1,1 Mo 1,1 Mo
  21. 21. Optimisation du JS
  22. 22. Réduire la taille des fichiers, limiter le nombre de requêtes Personnaliser les librairies utilisées (jQuery, Modernizr…)
  23. 23. Réduire la taille des fichiers, limiter le nombre de requêtes Uglify : concaténation et minimisation des fichiers
  24. 24. Optimisation du JS Avant Après Temps de chargement 10 secondes 9,5 secondes Indice de vitesse 6408 6769 Données transférées 1,1 Mo 1,1 Mo
  25. 25. Optimisation du CSS
  26. 26. Réduire la taille des fichiers, limiter le nombre de requêtes Ne pas utiliser @import, utiliser une extension (Less, Sass, Stylus…)
  27. 27. Réduire la taille des fichiers, limiter le nombre de requêtes Autoprefixer : ajout automatique des préfixes propriétaires
  28. 28. Réduire la taille des fichiers, limiter le nombre de requêtes CSSO : minimisation des fichiers, optimisation des règles
  29. 29. Optimisation du CSS Avant Après Temps de chargement 9,5 secondes 9 secondes Indice de vitesse 6769 7942 Données transférées 1,1 Mo 1 Mo
  30. 30. Suppression du CSS inutilisé
  31. 31. Suppression du CSS inutilisé UnCSS : suppression du CSS inutilisé
  32. 32. Suppression du CSS inutilisé Avant Après Temps de chargement 9 secondes 7,5 secondes Indice de vitesse 7942 6079 Données transférées 1 Mo 0,8 Mo
  33. 33. Optimisation du chemin critique
  34. 34. Fonctionnement d’un navigateur Web Téléchargement du fichier HTML Conversion octets -> caractères Conversion caractères -> objets HTML Construction du DOM
  35. 35. Fonctionnement d’un navigateur Web Si objet HTML <style> : Téléchargement du fichier CSS Conversion octets -> caractères Conversion caractères -> objets CSS Construction du CSSOM
  36. 36. Fonctionnement d’un navigateur Web Si objet HTML <script> : Téléchargement du fichier JS Conversion octets -> caractères Transfert fichier JS au moteur d’exécution JS
  37. 37. Comment fonctionne un navigateur Web ? DOM et CSSOM fusionnés pour construire la page
  38. 38. Chemin critique = étapes requises pour construire la page
  39. 39. Le téléchargement des fichiers HTML, CSS et JS, la construction du DOM et du CSSOM et l’exécution des fichiers JS arrêtent le processus de construction de la page
  40. 40. Optimisation du chemin critique Réduire le nombre de balises HTML
  41. 41. Optimisation du chemin critique Réduire le nombre de règles CSS
  42. 42. Optimisation du chemin critique Extraire les règles CSS critiques et les ajouter dans le fichier HTML Télécharger les fichiers CSS asynchrone
  43. 43. Optimisation du chemin critique Réduire l’utilisation du JS
  44. 44. Optimisation du chemin critique Télécharger les fichiers JS asynchrone <script src=“main.js” async></script>
  45. 45. Optimisation du chemin critique Avant Après Temps de chargement 7,5 secondes 6,5 secondes Indice de vitesse 6079 4073 Données transférées 0,8 Mo 0,75 Mo
  46. 46. Activation de la compression
  47. 47. Activation de la compression Deflate, GZIP : compression par le serveur des fichiers txt (HTML, CSS, JS, XML, JSON…) avant envoi au client Gain de 66% en moyenne
  48. 48. Activation de la compression Avant Après Temps de chargement 6,5 secondes 4,7 secondes Indice de vitesse 4073 3002 Données transférées 0,75 Mo 0,45 Mo
  49. 49. Mise en cache HTTP
  50. 50. Retourner les bonnes en-têtes HTTP
  51. 51. Mise en cache HTTP 1er chargement 2ème chargement Temps de chargement 4,7 secondes 1,5 secondes Indice de vitesse 3002 1691 Données transférées 0,45 Mo 0,01 Mo
  52. 52. Optimisation HTTPS
  53. 53. Optimisation HTTPS “TLS a exactement un problème de performance :
 il n’est pas assez utilisé.” - Ilya Grigorik, ingénieur performance Web et développeur @ Google
  54. 54. HTTP Strict Transport Security (HSTS) En-tête HTTP Connexion sécurisée uniquement Mise en cache -> suppression des redirections HTTP -> HTTPS
  55. 55. Agrafage OCSP Vérification que le certificat n’est pas révoqué par le serveur à la place du client Inclusion de la réponse OCSP de l’autorité dans le certificat
  56. 56. SPDY Protocole réseau expérimental Augmente la performance du protocole HTTP sans le remplacer Priorisation et multiplexage du téléchargement des ressources, une seule connexion par client = réduction du temps de chargement
  57. 57. Optimisation HTTPS Avant Après Temps de chargement 4,7 secondes 2,9 secondes Indice de vitesse 3002 1928 Données transférées 0,45 Mo 0,45 Mo
  58. 58. Conclusion
  59. 59. Conclusion Avant Après Temps de chargement 17 secondes 2,9 secondes Indice de vitesse 8371 1928 Données transférées 2,5 Mo 0,45 Mo
  60. 60. Conclusion
  61. 61. Conclusion Restez léger, restez rapide
  62. 62. Conclusion Ne pensez pas que… testez Analysez puis optimisez Définissez un objectif de performance Concentrez vous sur ce qui est important pour vos utilisateurs/clients
  63. 63. Q&A
  64. 64. Merci

×