Quand, vous ou nous, utilisateur écrit dans la barre d’adresse du navigateur l’URL d’un site, on attend (un peu) que la page s’affiche et que le contenu soit lisible.

Pendant ce temps, le navigateur agit en coulisse

1/ le navigateur se connecte au serveur hébergeant le site et lui demande de renvoyer le contenu de la page HTML

2/ Reçoit le contenu de la page HTML

3/ Interprète le code HTML pour comprendre comment est structurée la page et estime les objets (images, feuille de style, scripts) associés nécessaires

4/ Charge l’ensemble des ressources (images, feuille de style, scripts). En chargeant la page, le navigateur va transformer l’arborescence HTML en une arborescence d’objets portant le nom de DOM (Document Object Model)

5/ Affiche la page

6/ Exécute d’autres scripts après le chargement, impliquant eux-mêmes le chargement de nouvelles ressources.

Une page charge…

Que se passe-t-il quand une page charge ?

Le temps du premier élément ou Time To First Byte

Le Time To First Byte est le temps séparant la demande de votre navigateur et la réponse du serveur hébergeant la page de destination.
Le TTB idéal serait de 100 ms. Dans les faits, les serveurs dédiés approchent les 100 ms et les mutualisés tendent vers les 200 ms.

Le Time To First Byte permet de déterminer les difficultés relatives au réseau (latences), à la résolution du nom DNS (Domain Name System, ou le lien entre l’URL du site et le serveur qui l’héberge) ou encore à un problème de délivrance du code HTML du site.

À moins d’être proche des secondes que des millisecondes, le « Time To First Byte » n’a que peu d’impact sur l’utilisateur.

Le temps de l’affichage ou Render Time

Selon la qualité du code HTML renvoyé par le serveur, un site s’affichera avant même que le navigateur n’ait reçu l’ensemble de la page.

Le moment auquel le premier élément est affiché est appelé « Start Render Time ».

Le moment auquel le dernier élément de la fenêtre du navigateur (qui n’est pas forcément le dernier élément de la page si la page est plus longue qu’un écran) est appelé « Perceived Render Time » ou parfois « Above-The-Fold Render Time »

Above the fold pour en dessous de la ligne de flottaison (qui change en fonction de la résolution de l’écran et du navigateur de l’internaute) ou tout ce qui est non visible, hors de l’écran.

Un mauvais temps de rendu peut signifier que le site est trop « lourd » (il contient tellement d’objets qu’il est nécessaire aux navigateurs de récupérer de très nombreux fichiers avant de l’afficher)

Le temps de chargement ou Load Time

Un site n’est pas qu’une page HTML. C’est ensemble de ressources multimédia.
Le Load Time est le temps nécessaire au navigateur pour rendre tous les éléments visibles (textes, images, feuilles de style) et non visibles comme les scripts Javascripts.

La mesure du Load Time étant renvoyée nativement par tous les navigateurs, il est facile à capturer et est donc souvent utilisé comme élément de comparaison pour la performance Web de deux sites, souvent à tort.

Le Load Time représente le temps de chargement des ressources utilisées par la page.

Un fort Load Time peut donc être dû à un trop grand nombre de ressources, puisque le navigateur à ses limitations sur le nombre d’objet à recevoir simultanément.
Un Load Time élevé est du si il y a un problème (réseau) dans la récupération des ressources utilisées par la page.

Un Load Time élevé est du si les ressources sont trop grosses (images mal dimensionnée)

Le temps du dernier élément ou Time To Last Byte

Le Time To Last Byte est la durée entre le Time To First Byte et le moment où plus aucune information n’est échangée par la page du site chargée.

Qu’est-ce que le temps d’attente

L’attente, se décompose en deux étapes :

La latence de réactivité : le temps entre le clic sur l’écran et le moment ou les pixels commencent à bouger

La latence d’information : le temps entre le clic sur l’écran et le moment ou l’information attendue est lisible

Les leviers d’action

Le premier levier : nombre de requêtes HTTP

  • Le nombre d’images de l’interface utilisateur : icônes, menu, etc.
  • Le nombre d’images illustrant le texte
  • Le nombre de feuilles de style
  • Le nombre de scripts

Le deuxième levier : poids des pages

  • Le poids d’une page HTML
  • Le poids des feuilles de style CSS
  • Le poids des fichiers JavaScript
  • Le poids des images PNG
  • Le poids des photos JPG

Le troisième levier : l’interprétation des ressources

  • La taille du DOM
  • Les sélecteurs CSS
  • Les fonctions JavaScript

Le quatrième levier : le serveur

  • Le Time To First Byte du serveur
  • L’offre de l’hébergement
  • Le service de l’hébergeur
  • Les CDN (Content Delivery Network)

Le cinquième levier : le code

  • PHP : langage intéraction client-serveur
  • JS : langage intéraction navigateur utilisateur
  • CSS : style et interface utilisateur
  • HTML : structure contenu et page web

Ressources

Si vous envisagez de creuser sérieusement le sujet, quelques ressources techniques (en anglais) comme la base de connaissance de Google et la base de connaissance de Yahoo! sont utiles.

Les quelques explications présentés dans cet articles permettront de comprendre ce qui se passe lors du chargement d’une page web, avant de travailler à obtenir un gain de temps de chargement. C’est bien souvent un travail de longue haleine qui demande patience et détermination afin d’obtenir une note maximale dans les outils de d’analyse, et « surtout » d’avoir un site qui charge vite.

Vous utilisez WordPress et vous voulez accélérer le chargement de votre site ? Découvrez 9 solutions simples pour accélérer WordPress

Pour aller plus loin dans l’optimisation côté client et serveur, vous pouvez lire comment avoir un site rapide et performant ?