Comprendre et bien mesurer
 

le temps de chargement d'un site

Les outils

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

En utilisant un "optimisateur d'images", on peut réduire le poids des images sans perte de qualité visible à l'oeil nu.

 

Il existe plusieurs plugins WordPress :

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 :

https://kinsta.com/blog/admin-ajax/

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 :

https://bit.ly/2r0IaBl

5.a - Le cas WooCommerce

Mise en place du mu-plugin

Avant

Après

Jonathan Buttigieg

@geekpressfr