Temps de chargement : approche et bonnes pratiques

Il est donc crucial de bien connaître le profil de nos utilisateurs et leur contexte (localisation, connexion, matériel).

Comment mesurer la performance de mon site

En performance, la mesure est essentielle. Sans mesure, nous naviguons sans objectifs. On distingue deux type de mesure :

1. Mesure synthétique : Mesure la performance avec des outils dans une configuration particulière.
2. RUM : Real User Monitoring ou Measurement : Mesure la performance sous l'angle des vraies visites (expériences)  utilisateurs avec leur contexte dans la vraie vie.

Ces deux types de mesure ont des avantages et des inconvénients, mais ils sont nécessaires et complémentaires.

Parmi les outils de mesure de performance synthétique, on peut trouver :

1. WebpageTest : https://www.webpagetest.org/;
2. LightHouse de Google : https://developers.google.com/web/tools/lighthouse/;
3. Google PageSpeed Insight :https://developers.google.com/speed/pagespeed/insights/; (RUM également)
4. Gtmetrix : https://gtmetrix.com/;
5. La console de Google Chrome.

Et voici également quelques outils de mesure RUM :

1. Google Analytics;
2. Chrome user Experience Report (dataset public) : https://developers.google.com/web/tools/chrome-user-experience-report/;
3. HttpArchive (dataset public) : https://www.httparchive.org/reports/state-of-the-web;
4. SpeedCurve (outil de monitoring): https://speedcurve.com/.

Ne vous limitez pas à des mesures ponctuelles (avant / après), la mesure doit être continue et historisée dans le temps. Automatisez également des vérifications des métriques avant chaque release (version) de votre site web afin d'éviter des régressions sur le plan performance. La performance web fait partie intégrante de la AQ (Assurance Qualité) de ce que vous livrez !

Quelles métriques de performance devrais-je suivre ?

Il existe plusieurs métriques en performance et on en voit des nouvelles apparaître avec l'évolution des outils, l'apparition de nouvelles méthodes et depuis qu'on s'intéresse plus à la performance perçue. Parmi les métriques que nous préconisons, on peut distinguer :

1. FCP : First Contentful Paint ou le début du rendu ;
2. FMP : First meaningful Paint ou le début du rendu utile ;
3. TTI : Time To interactive ou quand la page devient utilisable ;
4. Le score performance de LightHouse ;
5. La taille de la page ;
6. Le nombre de requêtes.

Nous pouvons également créer nos propres métriques, par exemple le temps d'affichage d'un élément principal (photo produit, barre de recherche) et les corréler avec des métriques business. L'objectif de la mesure est également d'insuffler une culture de performance dans l'organisation qui anime les différentes équipes (marketing, métier, technique).

Comment améliorer son temps de chargement

1. Alléger la taille et le nombre de ressources envoyées

Ceci paraît évident, mais c'est un très bon point de départ. Le principe est simple : plus un site envoie de données, plus cela prend du temps à les transférer à travers le réseau et à les traiter au niveau du support. Afin d'alléger, il faut s'assurer de servir uniquement ce dont la page a vraiment besoin.

Ouvrez la console de Google Chrome, faites la combinaison clavier Ctrl+Shift+P (Windows) et tapez : “Show Coverage” comme l'indique la figure.1

Fig. 1. Modale Google Chrome.

Cet outil vous permettra d'identifier du code CSS ou JS non utilisé (en rouge) versus le code utilisé (en vert). Dans l'exemple de la figure 2, 50% du code n'est pas utilisé, ce qui représente un potentiel à gagner de 1.4Mo de données.

Fig. 2. Exemple de rapport de code coverage sur Chrome.

Cette technique de couverture du code nous amène systématiquement à déplacer les bouts de code non utilisés vers les pages appropriées ou se qu'on appelle le code splitting. Que ferait le code JS de la galerie de photo sur la home page ? Ou encore, le style CSS du formulaire de contact sur la page blog ? Le principe est simple : à chaque page, on sert le strict nécessaire comme l'illustre la figure 3.

Fig. 3. Principe du code splitting. source : https://developers.google.com.

Si vous êtes sous WordPress, vous pouvez également utiliser les méthodes wp_enqueue_script et wp_enqueue_style pour mieux gérer les inclusions de fichiers Javascript et CSS.

Après avoir allégér et splitté le code, il est toujours recommandé de minifier (réduire la taille du code) vos scripts, feuilles de style et code HTML. Voici quelques outils pour le faire :

1. Javascript : Uglify https://github.com/mishoo/UglifyJS2
2. CSS : CSSnano https://github.com/ben-eb/cssnano
3. HTML : html-minifier https://github.com/kangax/html-minifier

2. Vérifiez les ressources externes

Parmi les ressources qu'on donne à nos utilisateurs, une bonne partie est souvent externe (située sur un autre site). Exemples : un script d'Analytics, de tag management, de publicité, des pixels de tracking, des librairies JS ou des polices (fonts). Ces ressources externes dégradent généralement les performances de votre site web. Afin de les identifier, ouvrez la console de Chrome et activez cette fois l'option Show third party badges (Figure 4), ce qui va rajouter des badges sur les ressources externes au niveau de l'onglet Network.

Fig. 4. Activation des badges externes.

Une bonne pratique est également de comparer le temps de chargement du site avec et sans ses ressources pour évaluer leur "coût" sur la performance. L'outil webpagetest.org permet de le faire avec l'option Block. Il suffit de renseigner les domaines des ressources à bloquer avant de lancer un test de comparaison (Figure 5). Cette comparaison est l'occasion de faire le tri parmi les différents scripts, identifier des librairies inutiles et mieux gérer ses inclusions (les héberger en interne ? différer leur chargement ?).

Fig. 5. Comparaison avec et sans ressources externes (WebpageTest).

3. Optimiser le chemin critique

Le chemin critique représente la séquence de chargement des différents éléments d'une page web. Optimiser ce chemin critique permet de mieux ordonnancer le chargement en priorisant les ressources critiques : celles responsables du contenu principal, au-dessus de la ligne de flottaison. Un chemin critique optimisé évite d'avoir un blanc et une attente comme le montre la figure 6.

Fig. 6. Un chemin critique optimisé Vs non optimisé. Source : https://developers.google.com.

Afin d'y arriver, nous allons modifier la priorité des fichiers Javascript grâce au "Async" et au "Defer". La régle est la suivante :

•  Pour un script essentiel au rendu, nous demandons au navigateur de l'exécuter après l'avoir téléchargé grâce à la propriété async. Il bloque le rendu uniquement pendant son temps d'exécution.

•  Pour un script non essentiel (au rendu), nous demandons au navigateur de l'exécuter après avoir fini le traitement de la page grâce à la propriété defer (il ne bloque pas le rendu).

Une deuxième technique d'optimisation du chemin critique consiste à donner en premier la partie critique des styles CSS (celle responsable du style du contenu principal). Nous allons alors utiliser ce script (casperjs) afin de générer notre CSS critique : https://github.com/ibrennan/automation/tree/master/content/critical-css

Ill suffit de l'exécuter en donnant l'url de votre site et ensuite coller en inline le code CSS généré dans le <head> avant l'inclusion des autres ressources. (plus d'informations sur l'Internal CSS : https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_internal).

4. Utiliser les "resources hints"

Les resources hints sont des indicateurs de chargement d'une ressource destinés aux navigateurs. On utilise des indicateurs avec la balise <link> comme suit :

1. Preload : on l'utilise pour charger en haute priorité et sans blocage une ressource. Exemple :
   <link rel="preload" href="/styles/other.css" as="style">
2. Prefetch : Utile pour précharger une éventuelle page suivante. Exemple :
   <link rel="prefetch" href="//example.com/next-page.html" as="html">
3. Dns-prefetch : Indique au navigateur d'effectuer le plutôt possible la résolution DNS d'un domaine (dans le cas des scripts externes). Exemple :
   <link rel='dns-prefetch' href='//fonts.googleapis.com' />

Astuce : Regardez le flux de comportement au niveau de votre compte Google Analytics pour savoir quelle serait la page suivante par rapport à une page donnée sur votre site pour mieux exploiter le prefetch.

5. Passez en HTTP/2

La version 2 du protocole HTTP présente plusieurs avantages pour la performance. L'avantage principal est le multiplexage des ressources. En HTTP/1.1, on ouvre une connexion TCP par ressource, en HTTP/2 on peut servir plusieurs ressources en une seule connexion TCP (Figure 7), ce qui permet d'aller plus rapidement et casser l'aspect séquentiel bloquant. Les ressources critiques (CSS et JS) auront alors une meilleure priorisation. Un deuxième avantage du HTTP/2 est la compression des headers ce qui permet d'économiser la bande passante (moins de données à transférer).

Fig. 7. Comparaison HTTP/1.1 et HTTP/2.

Une question qui revient toujours : Googlebot est il compatible avec HTTP/2 ? La réponse est non. Le service WRS (Web Rendering Service) de Googlebot ne supporte pas pour le moment cette version du protocole, mais pas d'inquiétude car face à un site en HTTP/2 Googlebot fait un fallback en HTTP/1.1. Il suffit donc de supporter les deux versions pour assurer la compatibilité, comme l'indique Gary Ilyes (Google Zurich) dans une conversation Twitter (Figure 8).

Fig. 8. Confirmation de Gary Ilyes sur le fallback HTTP/1.1. Source : Twitter.

6. Compressez les images

Selon les données publiques de HTTParchive, les images occupent la première place parmi les ressources téléchargées. Rick Viscomi, Web transparency advocate chez Google, a publié une statistique intéressante à partir des données HTTPArchive : en moyenne, 25% de la taille d'une image est inutile ! En d'autres termes, nous avons un potentiel d'économiser un quart de la taille de chaque image sur le Web.

La compression permet souvent d'obtenir ce gain et donc d'avoir des images moins coûteuse en taille et plus rapide en chargement. Pour compresser les images, il existe plusieurs outils gratuits ou payants. Caesium, par exemple, offre de nombreuses fonctionnalités, est compatible Desktop / ligne de commande et gratuit: https://saerasoft.com/caesium/.

7. Autres techniques d'optimisation du temps de chargement

1. Compression GZIP : https://varvy.com/pagespeed/enable-compression.html ;
2. Mise en cache navigateur des ressources statiques ;
3. Lazy loading des images : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API ;
4. Mise en place d'un CDN (Content Delivery Network) ;
5. Meilleure gestion des polices de caractères.

Nous avons fait dans cet article un tour général sur l'importance du temps de chargement, sur la méthodologie de mesure et l'optimisation. Nous avons également évoqué quelques bonnes pratiques pour améliorer les performances web de nos sites. Profitez-en et cherchez la satisfaction de vos utilisateurs et de Google 😉 Bonne optimisation !