Terrain5 min de lecture

Ce qui arrive à votre site quand un service extérieur tombe.

Votre site va chercher à chaque visite des morceaux chez des tiers : une police, une carte, un chat, des statistiques. Tant que tout répond, personne ne le remarque. Mais quand l'un de ces services tombe ou ralentit, votre page tient-elle encore, ou se casse-t-elle avec lui ? Voici un relevé de vingt minutes pour le savoir, et ce qu'il prouve ou non.

Par Andréa, Dréa Digital

Votre site n'est pas un bloc autonome. À chaque visite, il va chercher des morceaux ailleurs : une police chez Google Fonts, une carte chez un fournisseur, un lecteur vidéo, un bouton de réseau social, un widget de chat, un script de statistiques. Tant que tout répond, personne ne le remarque. Le jour où l'un de ces services extérieurs tombe ou ralentit, la question devient concrète : votre page s'affiche-t-elle encore, ou se casse-t-elle avec lui ?

Cela se teste, en vingt minutes, sans rien installer. Le relevé ne remplace pas une étude, mais il répond à une question simple et utile : de quels tiers votre site dépend-il vraiment pour s'afficher.

Pourquoi un tiers peut emporter toute la page

Le mécanisme tient à l'ordre des opérations. Quand le navigateur lit votre page, il croise des instructions pour charger des fichiers extérieurs. Si l'une d'elles est un script placé dans l'en-tête et chargé de façon bloquante, le navigateur s'arrête là et attend sa réponse avant de continuer à dessiner la page. Si le serveur du tiers répond en une fraction de seconde, c'est invisible. S'il rame dix secondes, votre visiteur regarde un écran blanc pendant dix secondes. S'il ne répond pas du tout, la page peut ne jamais finir de s'afficher.

Les polices distantes forment un cas à part, documenté par web.dev, le site de ressources techniques de Google. Par défaut, le navigateur cache le texte le temps de télécharger la police, jusqu'à trois secondes sur Chrome et Firefox, et indéfiniment sur Safari. Un simple réglage, font-display: swap, change la donne : le texte s'affiche aussitôt dans une police de secours, puis bascule vers la bonne quand elle arrive. Sans ce réglage, un serveur de police lent suffit à rendre un site muet.

Tous les tiers ne sont pas dangereux. Un script de statistiques ou un widget de chat, chargé correctement après le reste, peut tomber sans conséquence visible : il manque, mais la page tient. La différence ne vient pas du service lui-même, elle vient de la façon dont il est branché.

Le relevé, vingt minutes

Faites-le sur votre page d'accueil et sur une page de contenu. Il vous faut seulement un navigateur sur ordinateur.

Ce qu'on en fait

Un tiers qui casse la page se répare sans forcément le supprimer. On le charge de façon non bloquante, avec les attributs async ou defer, pour que le reste s'affiche d'abord. Je pose font-display: swap sur les polices. Et pour les éléments vraiment critiques, une police ou un script dont dépend la lecture, l'option la plus solide reste de les héberger sur son propre serveur plutôt que de dépendre d'un tiers. Moins d'adresses extérieures à contacter, c'est aussi une page plus rapide, un sujet que j'ai abordé à propos du vrai coût des images.

Ce que ce test prouve, et ce qu'il ne prouve pas

Il dit de quels services extérieurs votre affichage dépend, et lesquels cassent la page quand ils manquent. C'est une information que presque personne n'a sur son propre site, et elle se récolte en une fois.

Il ne dit pas tout. Bloquer un domaine dans le navigateur imite une panne franche, pas une lenteur partielle, qui est pourtant le cas le plus fréquent et parfois le plus traître. Le comportement varie aussi d'un navigateur à l'autre, le cas des polices sur Safari en est l'exemple. Le test ne juge pas non plus de l'utilité d'un tiers : certains sont là pour de bonnes raisons, le but n'est pas de tout couper mais de savoir ce qui dépend de quoi. Enfin, un relevé fait un jour sur une machine ne dit rien de ce qui se passe sous forte charge ou depuis un mobile en bord de réseau.

Reste l'essentiel : un site qui continue de s'afficher, même amputé d'une carte ou d'un chat, est un site qui respecte le visiteur venu pour autre chose. Si vous voulez un premier relevé de ce genre sans vous y plonger, un devis commence toujours par regarder ce que la page charge vraiment.

Sources

Questions fréquentes

Que se passe-t-il si un service extérieur de mon site tombe ?

Cela dépend de la façon dont il est chargé. Un script tiers synchrone placé dans l'en-tête peut bloquer tout l'affichage s'il ne répond pas. Un élément chargé de façon non bloquante, avec async ou defer, disparaît sans casser le reste : la carte ou le chat manquent, mais la page tient.

Comment tester la dépendance de mon site aux services tiers ?

Ouvrez les outils de développement du navigateur (touche F12), onglet Réseau, rechargez et repérez les fichiers dont l'adresse n'est pas votre domaine. Puis passez la connexion en « Hors ligne » ou bloquez un domaine tiers et rechargez : vous voyez si la page tient ou se casse.

Pourquoi un texte reste-t-il parfois invisible au chargement ?

Souvent à cause d'une police distante. Par défaut, le navigateur cache le texte le temps de la télécharger, jusqu'à trois secondes sur Chrome et Firefox, davantage sur Safari. Le réglage font-display: swap affiche aussitôt une police de secours et évite ce texte invisible.

Un doute sur votre site ?

Un relevé de votre site permet de faire le point sur ce sujet, et de voir ce qui vous concerne vraiment. Demandez un devis pour en parler.

Retour au journal