Ouvrez le panneau réseau, rechargez, et regardez la FORME avant de lire quoi que ce soit. Quatre formes couvrent presque toutes les pages lentes, et chacune désigne un endroit différent.
1. Une longue barre en haut, puis tout le reste
Le document lui-même a pris l'essentiel du temps. C'est du temps serveur, et rien du côté des images ou des scripts n'y changera quoi que ce soit. Allez mesurer le TTFB.
2. Un escalier
Chaque requête commence quand la précédente finit. Quelque chose n'est découvert qu'après le chargement d'autre chose : une feuille de style qui en importe une autre, ou un script qui insère un script. Chaque marche est un aller-retour complet.
<link rel="preload" href="/fonts/body.woff2" as="font" crossorigin>3. Un mur, puis une longue traîne
Tout démarre en même temps et quelques éléments prennent beaucoup plus longtemps. Ces quelques-là sont d'ordinaire des tiers : un script de mesure, un widget de discussion, une police venue d'un autre domaine. Votre serveur va bien et la page toujours pas.
4. Un grand vide avant le premier affichage
Les octets sont arrivés et rien n'a été dessiné. Du CSS bloquant le rendu, ou une police qui attend d'être échangée. Regardez la taille de la première feuille de style et font-display.
@font-face { font-display: swap; }Les trois colonnes qui méritent d'être lues
- Waiting (TTFB) - le serveur réfléchit.
- Content Download - les octets qui circulent. Grand ici veut dire que le fichier est trop gros.
- Queueing / Stalled - l'attente d'une connexion. Grand ici en HTTP/1.1, c'est la raison d'être de HTTP/2.
