Comprendre et bien mesurer
le temps de chargement d'un site
Les outils
GT Metrix
https://gtmetrix.com
Google PageSpeed Insight
https://developers.google.com/speed/pagespeed/insights/
Pingdom Tools
Les outils
Google PageSpeed Insights ne mesure pas votre temps de chargement.
Pingdom et GTMetrix le font, mais ils utilisent chacun des mesures différentes, et vous donneront des temps de chargement différents.
Vous devez comprendre ce que vous testez afin de mettre les résultats en contexte.
Les notes de performance
On s'en $#@&$
Personne ne veut un temps de chargement de 17 secondes, même si le score est de 92 !
Les notes de performance
Ça c'est mieux !
Tout le monde veut un temps de chargement de 756ms, même si le score est de 69 !
Exécuter plusieurs tests
Un seul test n'est pas représentatif de la performance globale.
Exécutez plusieurs tests à la fois pour obtenir une moyenne des performances.
Généralement que la page d'accueil est testée, mais vous devriez également tester d'autres pages critiques sur votre site.
Pourquoi un site peut-être lent ?
- Mauvaise mesure du temps de chargement
- Erreurs 404
- Utilisation abusive de service tiers (Facebook, Instagram, Youtube, Google Maps, etc...)
- Poids du site anormal
- Requêtes AJAX de WordPress
1- URL du site
La plupart des sites sont disponibles avec plusieurs variantes de leur URL :
- En utilisant http ou https
- Y compris le www avant le nom de domaine, ou sans le www
1.a- Exemple : WP Tech 2018
Avec redirection http => https
1.a- Exemple : WP Tech 2018
Sans redirection
1.b- Autre exemple
Avec redirection http => https
+ redirection www => sans www
1.b- Autre exemple
Sans redirection
2- Localité du serveur
La géographie est importante.
La distance entre la localité du serveur de votre site et celui de l'outil de mesure augmente la latence*
Pour connaître la localité du serveur d'un site :
https://check-host.net/ip-info
*C'est le temps de traitement pour servir une page Web.
2.a- Exemple : WP Tech 2018
Localisation du serveur
2.b- Exemple : WP Tech 2018
Stockholm
2.c- Exemple : WP Tech 2018
New-York City
2.d- Exemple : WP Tech 2018
Melbourne
3- Erreurs 404
Les erreurs 404 provoquent de gros ralentissements.
La raison est simple : tout "WordPress" est chargé lors d'une erreur 404 au lieu d'une erreur serveur.
3- Erreurs 404
Une erreur 404 retournée par le serveur
3- Erreurs 404
Une erreur 404 retournée par WordPress
3- Les erreurs 404
404 serveur VS 404 WordPress
3- Les erreurs 404
On peut contourner le problème en forçant la gestion des erreurs 404 au serveur.
Apache (via .htaccess)
https://gist.github.com/GeekPress/97ff5cb1a796c962a2e151f71a248679
NGINX (via la config)
https://gist.github.com/GeekPress/372d5072dddf2763063615a489fa5976
4- Poids et requêtes HTTP
Le poids moyen d'une page dépasse maintenant 2 Mo.
62%, c'est ce que représente le poids des images sur un site web.
Le nombre moyen de requêtes HTTP par page est supérieur à 99.
4.a- Exemple : Vidéos
4.b- Exemple : Images
4.b- Exemple : Images
4.b- Exemple : Images
4.b- Exemple : Images
Pour réduire le nombre de requêtes HTTP des images, on peut appliquer la technique du "LazyLoad".
Il existe plusieurs plugins WordPress :
4.c- Exemple : CSS & Javascript
4.c- Exemple : CSS & JavaScript
On peut optimiser le temps de chargement de ces fichiers en utilisant 2 techniques.
Minification
Supprime les espace et les commentaires afin de réduire la taille des fichiers CSS & JavaScript.
Concaténation
Condense tous vos fichiers CSS en un seul fichier, réduit le nombre de requêtes HTTP.
4.d- Exemple : Services tiers
4.d- Exemple : Services tiers
5- Requêtes AJAX de WordPress
Elles sont utilisées par les thèmes et les plugins via le fichier wp-admin/admin-ajax.php
À chaque fois, tout "WordPress" est chargé, ce qui provoque des ralentissements conséquents.
Pour trouver quel plugin utilise admin-ajax.php :
https://fr.docs.wp-rocket.me/article/984-plugin-admin-ajax-php
5- Requêtes AJAX de WordPress
Guide complet pour analyser l'utilisation des requêtes admin-ajax.php :
5.a- Le cas WooCommerce
La gestion dynamique du panier WooCommerce est gérer avec une requête AJAX.
On l'identifie facilement : exemple.fr?wc-ajax=get_refreshed_fragments
5.a - Le cas WooCommerce
Si votre thème n'utilise pas la gestion dynamique du panier, le plugin Disable Cart Fragments permet de supprimer la requête AJAX.
Ou un "mu-plugin" permet d'optimiser le temps de chargement de la requête :
5.a - Le cas WooCommerce
Mise en place du mu-plugin
Avant
Après
Jonathan Buttigieg
@geekpressfr
On recrute
