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.

1. Comment
optimiser la performance
de vos sites et applications Web ?

2. Pourquoi ?

3. La perception des utilisateurs
évolue

4. Les mobiles sont de plus en plus
utilisés

5. Comment ?

6. Étude de cas

7. Optimisation d’Unify

8. Étape 1
Analyser

9. WebPagetest

14. PageSpeed Insights

18. Étape 2
Optimiser

19. Utilisation de Node.js

20. Automatisation des tâches :
Grunt, Gulp…

21. Optimisation des
images

23. Choisir le bon format

24. Réduire la taille des fichiers
Imagemin : compression des images sans
perte de données

25. 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

26. Optimisation du
HTML

28. Réduire la taille des fichiers
Minize : minimisation des fichiers

29. 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

30. Optimisation du
JS

32. Réduire la taille des fichiers,
limiter le nombre de requêtes
Personnaliser les librairies utilisées (jQuery,
Modernizr…)

33. Réduire la taille des fichiers,
limiter le nombre de requêtes
Uglify : concaténation et minimisation des
fichiers

34. 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

35. Optimisation du
CSS

37. Réduire la taille des fichiers,
limiter le nombre de requêtes
Ne pas utiliser @import, utiliser une
extension (Less, Sass, Stylus…)

38. Réduire la taille des fichiers,
limiter le nombre de requêtes
Autoprefixer : ajout automatique des
préfixes propriétaires

39. Réduire la taille des fichiers,
limiter le nombre de requêtes
CSSO : minimisation des fichiers,
optimisation des règles

40. 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

41. Suppression du
CSS inutilisé

45. Suppression du CSS inutilisé
UnCSS : suppression du CSS inutilisé

46. 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

47. Optimisation du
chemin critique

48. Fonctionnement d’un navigateur Web
Téléchargement du fichier HTML
Conversion octets -> caractères
Conversion caractères -> objets HTML
Construction du DOM

49. 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

50. 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

51. Comment fonctionne un navigateur
Web ?
DOM et CSSOM fusionnés pour construire
la page

52. Chemin critique = étapes requises pour
construire la page

53. 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

54. Optimisation du chemin critique
Réduire le nombre de balises HTML

55. Optimisation du chemin critique
Réduire le nombre de règles CSS

56. Optimisation du chemin critique
Extraire les règles CSS critiques et les
ajouter dans le fichier HTML
Télécharger les fichiers CSS asynchrone

57. Optimisation du chemin critique
Réduire l’utilisation du JS

58. Optimisation du chemin critique
Télécharger les fichiers JS asynchrone
<script src=“main.js” async></script>

59. 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

60. Activation de la
compression

61. 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

62. 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

63. Mise en cache
HTTP

64. Retourner les bonnes en-têtes HTTP

65. 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

66. Optimisation
HTTPS

67. 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

68. HTTP Strict Transport Security (HSTS)
En-tête HTTP
Connexion sécurisée uniquement
Mise en cache -> suppression des
redirections HTTP -> HTTPS

69. 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

70. 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

71. 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

72. Conclusion

73. 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

74. Conclusion

75. Conclusion
Restez léger, restez rapide

76. 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

77. Q&A

78. Merci