Upload
roland-coma
View
96
Download
2
Embed Size (px)
Citation preview
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érées 2,5 Mo 1,1 Mo
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ées 1,1 Mo 1,1 Mo
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ées 1,1 Mo 1,1 Mo
Optimisation du CSS
Réduire la taille des fichiers, limiter le nombre de requêtes
Ne pas utiliser @import, utiliser une extension (Less, Sass, Stylus…)
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ées 1,1 Mo 1 Mo
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 transférées 1 Mo 0,8 Mo
Optimisation du chemin critique
Fonctionnement d’un navigateur Web
Téléchargement du fichier HTML
Conversion octets -> caractères
Conversion caractères -> objets HTML
Construction du DOM
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
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
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 le processus de construction de la page
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 fichiers CSS asynchrone
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ées transférées 0,8 Mo 0,75 Mo
Activation de la compression
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
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
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 1691
Données transférées 0,45 Mo 0,01 Mo
Optimisation HTTPS
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
HTTP Strict Transport Security (HSTS)
En-tête HTTP
Connexion sécurisée uniquement
Mise en cache -> suppression des redirections HTTP -> HTTPS
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
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
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
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 0,45 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 qui est important pour vos utilisateurs/clients
Q&A
Merci