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