pourquoi les annonces se chargent-elles avant le contenu sur tant de sites Web?

Question

Souvent, lorsque je navigue sur un appareil mobile dans une zone à faible réception, les pages se chargent apparemment pour toujours, puis apparaissent en une seule fois. J'ai depuis appris à dire à mon navigateur mobile d'arrêter le chargement de la page, car souvent ce dont j'ai besoin (contenu de la page) a été récupéré mais n'est pas rendu. La raison pour laquelle elle n'est pas affichée est parce qu'une annonce sur le site n'a pas fini de se charger.

Je comprends que vous souhaitiez diffuser l'annonce pour générer des vues et des revenus publicitaires, mais pourquoi une annonce devrait-elle être autorisée à retarder l'accès de l'utilisateur?

Charles Wesley · Accepted Answer

Cela est probablement dû au fait que les annonces sont diffusées par des services tiers, qui nécessitent des demandes réseau supplémentaires. Ces demandes supplémentaires introduisent une latence qui retarde le chargement de la page. Étant donné qu'une page Web est plus ou moins un seul thread, tout retard de n'importe quelle partie du rendu de la page entraîne la pause de l'ensemble du processus jusqu'à ce que cette demande soit effectuée.

L'expérience que vous décrivez est un artefact de la technologie derrière elle, plutôt qu'un effort intentionnel de la part des propriétaires du site. Malgré les CDN et ainsi de suite pour la diffusion d'annonces tierces, la latence fait partie de l'équation (en particulier sur mobile).

Certaines choses pourraient être faites pour charger les publicités après que la page a été rendue en utilisant Javascript, peut-être, mais tout cela est vraiment des détails d'implémentation qui ne sont pas vraiment sur le sujet pour cette SE.

Damian Yerrick · Answer

Une chose qui améliore l'expérience de visualisation d'un document Web est le rendu progressif, où le navigateur affiche les parties qui sont arrivées en attendant l'arrivée d'autres parties demandées. Au début du Web, lorsque l'accès à distance était courant et que les documents avaient peu de style, c'était une grande victoire UX: l'utilisateur pouvait lire une première partie du document tandis que les autres parties continuaient à se charger.

Mais une chose négative associée au rendu progressif est un phénomène appelé flash de contenu non stylisé (FOUC). Cela se produit lorsqu'une partie du document se charge, puis une autre partie se charge, ce qui modifie considérablement l'apparence d'une partie antérieure. Il peut s'agir d'une feuille de style, d'une police Web, d'une image d'arrière-plan ou des modifications apportées par un script au nom de l'amélioration progressive.

Une feuille de style fera en sorte que les éléments du document assument le position:, Les dimensions, les couleurs et d'autres aspects d'aspect dictés par la feuille de style.
Une police Web peut avoir des métriques (tailles de glyphes) différentes de la police générique, comme sans-serif Ou serif, que le navigateur utilise pendant le chargement de la police Web. La différence de métriques fait refluer le texte, ce qui déplace les éléments en ligne tels que les liens et peut également déplacer les boîtes vers le haut ou vers le bas car le texte précédent prend moins ou plus de lignes.
Une image d'arrière-plan peut entraîner la permutation de la couleur du texte en face de celle-ci si la feuille de style ne fournit aucune couleur de secours.
Un script peut supprimer des contrôles destinés aux utilisateurs sans script et les remplacer par des contrôles destinés aux utilisateurs de script.

Ainsi, pour éviter l'expérience négative associée à FOUC, les navigateurs incluent une heuristique pour retarder le rendu jusqu'à ce que certaines ressources importantes soient chargées. Par exemple, un navigateur ne restituera pas au-delà d'un <script> Jusqu'à ce qu'il se charge; placer un script dans l'élément <head> suspendra le rendu jusqu'à ce qu'il soit chargé. Un document Web peut exploiter ces heuristiques anti-FOUC en couvrant le document partiellement chargé avec une annonce pleine page jusqu'à ce que le reste du document soit chargé. D'une certaine façon, masquer un document partiellement chargé améliore réellement l'expérience en présentant une annonce qui s'anime en douceur plutôt que le saut moins intuitif d'un document à chargement progressif.