![Page 1: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/1.jpg)
Comment
optimiser la performance de vos sites et applications Web ?
![Page 2: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/2.jpg)
Pourquoi ?
![Page 3: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/3.jpg)
La perception des utilisateurs évolue
![Page 4: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/4.jpg)
Les mobiles sont de plus en plus utilisés
![Page 5: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/5.jpg)
Comment ?
![Page 6: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/6.jpg)
Étude de cas
![Page 7: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/7.jpg)
Optimisation d’Unify
![Page 8: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/8.jpg)
Étape 1
Analyser
![Page 9: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/9.jpg)
WebPagetest
![Page 10: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/10.jpg)
![Page 11: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/11.jpg)
![Page 12: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/12.jpg)
![Page 13: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/13.jpg)
![Page 14: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/14.jpg)
PageSpeed Insights
![Page 15: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/15.jpg)
![Page 16: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/16.jpg)
![Page 17: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/17.jpg)
![Page 18: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/18.jpg)
Étape 2
Optimiser
![Page 19: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/19.jpg)
Utilisation de Node.js
![Page 20: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/20.jpg)
Automatisation des tâches :Grunt, Gulp…
![Page 21: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/21.jpg)
Optimisation des images
![Page 22: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/22.jpg)
![Page 23: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/23.jpg)
Choisir le bon format
![Page 24: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/24.jpg)
Réduire la taille des fichiers
Imagemin : compression des images sans perte de données
![Page 25: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/25.jpg)
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
![Page 26: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/26.jpg)
Optimisation du HTML
![Page 27: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/27.jpg)
![Page 28: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/28.jpg)
Réduire la taille des fichiers
Minize : minimisation des fichiers
![Page 29: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/29.jpg)
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
![Page 30: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/30.jpg)
Optimisation du JS
![Page 31: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/31.jpg)
![Page 32: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/32.jpg)
Réduire la taille des fichiers, limiter le nombre de requêtes
Personnaliser les librairies utilisées (jQuery, Modernizr…)
![Page 33: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/33.jpg)
Réduire la taille des fichiers, limiter le nombre de requêtes
Uglify : concaténation et minimisation des fichiers
![Page 34: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/34.jpg)
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
![Page 35: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/35.jpg)
Optimisation du CSS
![Page 36: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/36.jpg)
![Page 37: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/37.jpg)
Réduire la taille des fichiers, limiter le nombre de requêtes
Ne pas utiliser @import, utiliser une extension (Less, Sass, Stylus…)
![Page 38: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/38.jpg)
Réduire la taille des fichiers, limiter le nombre de requêtes
Autoprefixer : ajout automatique des préfixes propriétaires
![Page 39: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/39.jpg)
Réduire la taille des fichiers, limiter le nombre de requêtes
CSSO : minimisation des fichiers, optimisation des règles
![Page 40: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/40.jpg)
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
![Page 41: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/41.jpg)
Suppression du CSS inutilisé
![Page 42: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/42.jpg)
![Page 43: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/43.jpg)
![Page 44: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/44.jpg)
![Page 45: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/45.jpg)
Suppression du CSS inutilisé
UnCSS : suppression du CSS inutilisé
![Page 46: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/46.jpg)
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
![Page 47: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/47.jpg)
Optimisation du chemin critique
![Page 48: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/48.jpg)
Fonctionnement d’un navigateur Web
Téléchargement du fichier HTML
Conversion octets -> caractères
Conversion caractères -> objets HTML
Construction du DOM
![Page 49: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/49.jpg)
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
![Page 50: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/50.jpg)
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
![Page 51: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/51.jpg)
Comment fonctionne un navigateur Web ?
DOM et CSSOM fusionnés pour construire la page
![Page 52: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/52.jpg)
Chemin critique = étapes requises pour construire la page
![Page 53: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/53.jpg)
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
![Page 54: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/54.jpg)
Optimisation du chemin critique
Réduire le nombre de balises HTML
![Page 55: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/55.jpg)
Optimisation du chemin critique
Réduire le nombre de règles CSS
![Page 56: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/56.jpg)
Optimisation du chemin critique
Extraire les règles CSS critiques et les ajouter dans le fichier HTML
Télécharger les fichiers CSS asynchrone
![Page 57: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/57.jpg)
Optimisation du chemin critique
Réduire l’utilisation du JS
![Page 58: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/58.jpg)
Optimisation du chemin critique
Télécharger les fichiers JS asynchrone
<script src=“main.js” async></script>
![Page 59: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/59.jpg)
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
![Page 60: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/60.jpg)
Activation de la compression
![Page 61: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/61.jpg)
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
![Page 62: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/62.jpg)
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
![Page 63: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/63.jpg)
Mise en cache HTTP
![Page 64: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/64.jpg)
Retourner les bonnes en-têtes HTTP
![Page 65: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/65.jpg)
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
![Page 66: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/66.jpg)
Optimisation HTTPS
![Page 67: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/67.jpg)
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
![Page 68: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/68.jpg)
HTTP Strict Transport Security (HSTS)
En-tête HTTP
Connexion sécurisée uniquement
Mise en cache -> suppression des redirections HTTP -> HTTPS
![Page 69: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/69.jpg)
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
![Page 70: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/70.jpg)
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
![Page 71: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/71.jpg)
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
![Page 72: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/72.jpg)
Conclusion
![Page 73: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/73.jpg)
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
![Page 74: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/74.jpg)
Conclusion
![Page 75: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/75.jpg)
Conclusion
Restez léger, restez rapide
![Page 76: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/76.jpg)
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
![Page 77: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/77.jpg)
Q&A
![Page 78: Comment améliorer la performance de vos sites et applications web présentation](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55ac15811a28ab6e788b4779/html5/thumbnails/78.jpg)
Merci