Comment
optimiser la performance
de vos sites et applications Web ?
Pourquoi ?
La perception des utilisateurs
évolue
Les mobiles sont de plus en plus
utilisés
Comment ?
Étude de cas
Optimisation d’Unify
Étape 1
Analyser
WebPagetest
PageSpeed Insights
Étape 2
Optimiser
Utilisation de Node.js
Automatisation des tâches :

Grunt, Gulp…
Optimisation des
images
Choisir le bon format
Réduire la taille des fichiers
Imagemin : compression des images sans
perte de données
Optimisation des images
Avant Après
Temps de
chargement
17 secondes 11 secondes
Indice de vitesse 8371 7005
Données
transf...
Optimisation du
HTML
Réduire la taille des fichiers
Minize : minimisation des fichiers
Optimisation du HTML
Avant Après
Temps de
chargement
11 secondes 10 secondes
Indice de vitesse 7005 6408
Données
transféré...
Optimisation du
JS
Réduire la taille des fichiers,
limiter le nombre de requêtes
Personnaliser les librairies utilisées (jQuery,
Modernizr…)
Réduire la taille des fichiers,
limiter le nombre de requêtes
Uglify : concaténation et minimisation des
fichiers
Optimisation du JS
Avant Après
Temps de
chargement
10 secondes 9,5 secondes
Indice de vitesse 6408 6769
Données
transférée...
Optimisation du
CSS
Réduire la taille des fichiers,
limiter le nombre de requêtes
Ne pas utiliser @import, utiliser une
extension (Less, Sass, ...
Réduire la taille des fichiers,
limiter le nombre de requêtes
Autoprefixer : ajout automatique des
préfixes propriétaires
Réduire la taille des fichiers,
limiter le nombre de requêtes
CSSO : minimisation des fichiers,
optimisation des règles
Optimisation du CSS
Avant Après
Temps de
chargement
9,5 secondes 9 secondes
Indice de vitesse 6769 7942
Données
transférée...
Suppression du
CSS inutilisé
Suppression du CSS inutilisé
UnCSS : suppression du CSS inutilisé
Suppression du CSS inutilisé
Avant Après
Temps de
chargement
9 secondes 7,5 secondes
Indice de vitesse 7942 6079
Données
t...
Optimisation du
chemin critique
Fonctionnement d’un navigateur Web
Téléchargement du fichier HTML
Conversion octets -> caractères
Conversion caractères -> ...
Fonctionnement d’un navigateur Web
Si objet HTML <style> :
Téléchargement du fichier CSS
Conversion octets -> caractères
Co...
Fonctionnement d’un navigateur Web
Si objet HTML <script> :
Téléchargement du fichier JS
Conversion octets -> caractères
Tr...
Comment fonctionne un navigateur
Web ?
DOM et CSSOM fusionnés pour construire
la page
Chemin critique = étapes requises pour
construire la page
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 l...
Optimisation du chemin critique
Réduire le nombre de balises HTML
Optimisation du chemin critique
Réduire le nombre de règles CSS
Optimisation du chemin critique
Extraire les règles CSS critiques et les
ajouter dans le fichier HTML
Télécharger les fichie...
Optimisation du chemin critique
Réduire l’utilisation du JS
Optimisation du chemin critique
Télécharger les fichiers JS asynchrone
<script src=“main.js” async></script>
Optimisation du chemin critique
Avant Après
Temps de
chargement
7,5 secondes 6,5 secondes
Indice de vitesse 6079 4073
Donn...
Activation de la
compression
Activation de la compression
Deflate, GZIP : compression par le serveur
des fichiers txt (HTML, CSS, JS, XML,
JSON…) avant ...
Activation de la compression
Avant Après
Temps de
chargement
6,5 secondes 4,7 secondes
Indice de vitesse 4073 3002
Données...
Mise en cache
HTTP
Retourner les bonnes en-têtes HTTP
Mise en cache HTTP
1er chargement 2ème chargement
Temps de
chargement
4,7 secondes 1,5 secondes
Indice de vitesse 3002 169...
Optimisation
HTTPS
Optimisation HTTPS
“TLS a exactement un problème de
performance :

il n’est pas assez utilisé.”
- Ilya Grigorik, ingénieur...
HTTP Strict Transport Security (HSTS)
En-tête HTTP
Connexion sécurisée uniquement
Mise en cache -> suppression des
redirec...
Agrafage OCSP
Vérification que le certificat n’est pas
révoqué par le serveur à la place du client
Inclusion de la réponse O...
SPDY
Protocole réseau expérimental
Augmente la performance du protocole
HTTP sans le remplacer
Priorisation et multiplexag...
Optimisation HTTPS
Avant Après
Temps de
chargement
4,7 secondes 2,9 secondes
Indice de vitesse 3002 1928
Données
transféré...
Conclusion
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...
Conclusion
Conclusion
Restez léger, restez rapide
Conclusion
Ne pensez pas que… testez
Analysez puis optimisez
Définissez un objectif de performance
Concentrez vous sur ce q...
Q&A
Merci
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Comment améliorer la performance de vos sites et applications web    présentation
Prochain SlideShare
Chargement dans…5
×

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

406 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
406
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
12
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

×