Nadia Bouhadi a refait le site d'une jardinerie de Tourcoing. Le serveur répond en 74 millisecondes. Sur un téléphone, les horaires d'ouverture apparaissent au bout de 4,8 secondes. Et la première chose que voit le visiteur n'est ni l'un ni l'autre : c'est un bandeau qui lui demande s'il accepte les cookies, et ce bandeau est arrivé avant la page.
Le web est deux machines et un contrat entre elles, ce qui le sépare du développement mobile, où l'une des deux est dans une poche et n'a rien signé. Presque toute question rangée ici revient à savoir de quel côté du contrat se trouve un problème, et la réponse est presque toujours visible dans un onglet que la plupart des gens qui font des sites n'ont jamais ouvert. En France une troisième partie s'est ajoutée au contrat, et elle n'est ni la machine du visiteur ni la vôtre.
Le fichier reçu n'est pas la page
Un téléphone a demandé une page. Il a trouvé l'adresse, ouvert une connexion, l'a sécurisée, envoyé une ligne de requête, et reçu un fichier de balisage. Ce fichier n'est pas la page. C'est une liste d'instructions qui nomme tout le reste, et le navigateur fait une requête pour le HTML et une par fichier qu'il nomme. Celle de Nadia en nomme 41 : une feuille de style, deux fontes, un script de cartographie, un script de consentement, et trente-six photographies de plants.
C'est pourquoi le temps du serveur et le temps de la page sont deux nombres différents avec deux propriétaires différents. Le TTFB est le serveur, le LCP est tout ce qui vient après. Les 74 millisecondes sont excellentes et ne feront pas bouger les 4,8 secondes d'un millième, parce que le serveur avait fini depuis longtemps quand la page a commencé à exister.
Le fichier qui retient l'affichage, et celui que la loi a mis devant
Sur ces 41 requêtes, la plupart peuvent arriver quand elles veulent. Deux ne le peuvent pas. Une feuille de style dans le head retient l'affichage jusqu'à son arrivée : le navigateur refuse de dessiner un texte qu'il devra peut-être redessiner dans une autre fonte et une autre taille, donc il attend, et sur une connexion lente il tient un écran blanc aussi longtemps qu'il faut. Celle de la jardinerie est un fichier unique de 160 ko qui porte les styles de tout le site, et la page des horaires en utilise environ un dixième.
Le second est propre au web européen, et personne ne l'écrit comme un fait de code. Le bandeau de consentement est un script tiers sur le chemin du premier affichage : il est chargé en tête de page pour que rien ne se dépose avant la réponse du visiteur, celui de Nadia pèse 210 ko, et il vient d'un quatrième nom de domaine, qu'il faut donc résoudre, joindre et sécuriser avant même que le bandeau existe. Sur un téléphone en 4G, cette seule dépense passe devant les 74 millisecondes du serveur.
La CNIL a sanctionné Google à hauteur de 150 millions d'euros le 31 décembre 2021 et Facebook à hauteur de 60 millions la veille, pour un seul et même motif : refuser doit être aussi simple qu'accepter. Un bandeau qui offre un bouton pour accepter et cinq gestes pour refuser n'est donc pas un choix de maquette, c'est le point exact qui a coûté 210 millions d'euros à deux entreprises.
La réparation qui tient n'est pas un framework. Elle consiste à poser dans le balisage les règles qui habillent le premier écran, à laisser le reste arriver en retard, et à choisir un outil de mesure qui n'a pas besoin du bandeau. Matomo auto-hébergé, configuré aux conditions de la CNIL, est le seul outil que celle-ci cite comme pouvant être exempté de consentement, et il compte donc tout le monde et non les seuls visiteurs qui ont dit oui. Les deux premiers de ces trois gestes sont le sujet de la performance web, et le troisième est celui dont les pages anglaises n'ont pas l'équivalent.
Les deux redirections, et celle dont le navigateur se souvient
Le site avait un second défaut sous le premier. L'ancienne adresse de la page existait encore et renvoyait vers la nouvelle, donc chaque téléphone déjà passé par là faisait deux allers-retours au lieu d'un. Le code d'état décide de la durée de cette dépense. Une 301 est permanente et le navigateur la garde, une 302 se repaie à chaque visite. Celle de Nadia avait été posée en 2022 comme un essai, et changer un chiffre dans une ligne de configuration a retiré un aller-retour à chaque visiteur qui revient.
Le même réflexe couvre les trente-six photographies. Un navigateur garde un fichier déjà téléchargé si le serveur lui dit combien de temps il en a le droit, et l'en-tête qui le dit tient sur une ligne. Celles de la jardinerie n'en portaient aucune, donc un client qui vérifie les horaires deux fois dans la même semaine a téléchargé deux fois les mêmes plants. C'est aussi pourquoi un site paraît rapide à qui l'a fait : son navigateur a déjà tout, et la mesure qu'il devrait lire est celle de la première visite.
Cache-Control: max-age=31536000, immutablepour un fichier dont le nom porte sa versionCache-Control: no-cachepour le document, qui doit être revalidé et non redemandé301à la place de302dès qu'une adresse ne reviendra pas<link rel="preconnect">vers le domaine du bandeau, qui est le seul qu'on ne peut pas différer
La structure
Ce qui doit tenir avant que l'étage du dessus veuille dire quelque chose
Se lit du sommet vers le bas. Chaque étage repose sur celui d'en dessous, et une faute traverse vers le haut.
- Le framework de composantsLà où presque tout le monde commence, et l'étage dont la mémoire est la plus courte
- Les stylesDisposition et apparence, et le plus gros sujet de la rubrique
- Le balisageStructure, sens, et la question de savoir si un lecteur d'écran en tire quoi que ce soit
- Le contrat sur le filRequêtes, codes d'état, cache et consentement, dont les trois étages du dessus héritent
Elle ne dit rien de la quantité de code par étage. Les deux du bas sont les plus courts à écrire et les plus chers à rater, parce que tout ce qui est au-dessus suppose qu'ils ont été faits.
Ce qui porte quoi, et l'ordre qui tient
L'ordre qui marche est celui qu'emploie le navigateur, et c'est le seul endroit de ce métier où la séquence de la machine et celle des programmes d'enseignement tombent d'accord. HTML vient en premier, parce que tout le reste s'y accroche et parce qu'un document correctement structuré est déjà accessible, déjà indexable et déjà lisible sans une seule règle de style. Vient ensuite CSS, le plus gros sujet de la rubrique, et celui que sautent le plus souvent ceux qui vont droit aux composants.
En France la première de ces deux phrases a une conséquence que la page anglaise n'a pas à tirer. Le RGAA impose l'accessibilité aux organismes publics, et l'application de la directive européenne sur l'accessibilité depuis juin 2025 étend l'obligation à une part croissante des services privés. Un niveau de titre juste et un libellé de champ associé ne sont donc pas un raffinement : ils sont la moitié gratuite de la conformité, et elle se perd à la minute où l'on remplace un bouton par une division stylée.
Pris à l'envers, l'échec est précis et très fréquent. Quelqu'un apprend un framework front-end en premier, sait construire une interface, et ne sait dire ni ce qu'est un élément ni pourquoi sa page n'a aucun titre. Il est productif et il fabrique quelque chose qu'un lecteur d'écran ne peut pas lire, et ni le framework ni le cours ne le lui diront.
Où l'on cale : la permission avant la compétence
Le blocage arrive vers le quatrième mois. Jusque-là tout était des fichiers qu'un navigateur ouvre. Puis un formulaire doit retenir quelque chose, et il y a soudain un serveur, une base de données, une session, un déploiement et une variable d'environnement. Le back-end est une autre discipline sous le même intitulé de poste, et la prendre pour la suite de la première est ce qui fait ressembler le quatrième mois à un échec personnel.
En France ce blocage arrive doublé, et la seconde moitié n'est pas technique. La question qui arrête vraiment n'est pas comment poser un cookie, c'est de savoir si on a le droit de le poser, et elle n'a pas de réponse dans la documentation du framework. Combien de temps garder un journal qui contient des adresses IP, combien de temps une session, ce qu'on peut mesurer sans demander : ce sont des lignes de code, écrites par la personne qui écrit le code, et rien dans son cursus ne lui a dit que cela relevait d'elle.
Le remède n'est pas de devenir juriste. Il est de savoir que la question se pose au moment de la conception et non à la fin, parce qu'une durée de session est une décision et pas une valeur livrée par défaut. Le même réflexe, tourné vers les attaques plutôt que vers le droit, est la sécurité web.
Ce qu'on ouvre en 2026
L'onglet Réseau des outils de développement est la chose la plus utile de cette page. Il liste les 41 requêtes dans l'ordre, avec ce qui a retenu quoi, et il a remplacé l'habitude de deviner quel fichier était lent puis de supprimer des choses jusqu'à ce que la page accélère. Il est gratuit et il est déjà installé, dans les quatre navigateurs.
Lighthouse, dans le même panneau, donne aux nombres un nom et une cible, et il a fait de la vitesse d'une page une mesure au lieu d'une opinion. Ses notes sont un résumé et non un diagnostic : il annonce à Nadia un LCP de 4,8 secondes, il ne lui dit pas que la cause est une feuille de style de 160 ko et un script tiers de 210 ko. Matomo répond à la question française, gratuit et ouvert en auto-hébergé, payant en version infogérée, et c'est le seul des trois dont le résultat ne dépend pas du taux d'acceptation du bandeau.
Reste le cas où les deux machines ne sont plus un navigateur et un serveur, mais deux programmes sans personne qui attend devant. Le contrat change de forme, les codes d'état se lisent autrement et le consentement se pose ailleurs, ce qui est le sujet des API.