3

A lot of times when I'm browsing on a mobile device in an area with low reception, pages will seemingly load forever and then appear all at once. I've since learned to tell my mobile browser to stop loading the page, because often what I need (page content) has been fetched but is not being rendered. The reason it's not being rendered is because an ad on the site haa not finished loading.

I understand that you would want to show the ad to generate ad views+revenue but why should an ad be allowed to delay the user's access?

Improve this question

2 Answers 2

Reset to default
2

This is more than likely due to the fact that ads are served by third party services, which require additional network requests. These additional requests introduce latency which delays the page load. Because a web page is more or less a single thread, any delay by any portion of the page rendering causes the whole process to pause until that request is done.

The experience you are describing is an artifact of the technology behind it, rather than an intentional effort on the part of the site owners. Despite CDNs and whatnot for serving third party ads, latency is part of the equation (especially on mobile).

Some things could be done to load ads after the page has been rendered using Javascript, perhaps, but all of this really is implementation details that aren't really on topic for this SE.

Improve this answer
2

One thing that improves the experience of viewing a web document is progressive rendering, where browser displays the parts that have arrived while waiting for other requested parts to arrive. In the early days of the web, when dial-up access was common and documents had little styling, this was a big UX win: the user could be reading an early part of the document while the later parts continued to load.

But one negative thing associated with progressive rendering is a phenomenon called flash of unstyled content (FOUC). This happens when one part of the document loads, and then another part loads that drastically changes the appearance of an earlier part. This could be a style sheet, a web font, a background image, or the changes that a script makes in the name of progressive enhancement.

  • A style sheet will cause elements in the document to assume the position:, dimensions, colors, and other appearance aspects dictated by the style sheet.
  • A web font may have metrics (sizes of glyphs) that differ from the generic font, such as sans-serif or serif, that the browser uses while the web font loads. The difference in metrics causes the text to reflow, which moves inline elements such as links and can also move boxes up or down as the preceding text takes fewer or more lines.
  • A background image may cause the color of the text in front of it to switch in and out of readability if the style sheet provides no fallback color.
  • A script may remove controls intended for no-script users and replace them with controls intended for script users.

So to avoid the negative experience associated with FOUC, browsers include heuristics to delay rendering until certain important resources have loaded. For example, a browser won't render past a <script> until it loads; placing a script in the <head> element will pause rendering until it has loaded. A web document may exploit these anti-FOUC heuristics by covering the partially loaded document with a full-page ad until the rest of the document has loaded. In a way, hiding a partially loaded document actually improves the experience by presenting an ad that animates smoothly rather than the less intuitive jumping of a progressively loading document.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.