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