Most of us who care about web performance do so because we care about delivering good user experiences.
But the business cares about other things too.
For media owners, advertising is a critical source of revenue. And if getting editorial content in front of end users is paramount, then delivering ad content fast has to be a close second.
However, a reliance on third-party code and content outside of your direct control can make this challenging.
Here are a few common issues, together with some suggestions on how best to deal with them.
Common problems with ad content
- Long chains of dependencies
The waterfall extract opposite (taken from a test in Performance Analyzer) shows how at least ten assets have to be loaded before an ad can be displayed. Many are scripts, which in turn bring in other scripts—all of which have to be loaded, parsed and executed. While this can happen very quickly on a powerful device with a fast connection, it can be much more challenging on a slower mobile device with poor or intermittent connectivity. In the test opposite, the whole process takes about 4 seconds on a desktop PC with a 5Mbps connection.
- Poorly optimized ads
Ads may be oversized for the viewport, contain redundant metadata, or saved in the wrong format (e.g. PNGs for photographic content or JPEGs for simple graphics and text). All of this can make them slow to load and to display, with mobile users again bearing the brunt of any hit to performance.
- Scripts that trigger on certain events
If a script that delivers ad content is dependent on an event, such as DOMContentLoaded or the onload event, this can lead to some serious delays, as anything that holds up those events also holds up your advertising.
- Reflowing content
This is a UX issue that’s guaranteed to turn people off both your content and your ads: someone lands on a news page and starts reading a story, only to lose their place as ads start to drop in and the page layout reflows before their eyes.
Tips for delivering ad content quickly and effectively
Sometimes, you know you’re going to need content from a certain third-party domain, but it’s loaded dynamically, so you can’t predict exactly what that content will be. This is when preconnecting becomes useful. As the name suggests, preconnecting involves making an early connection to a domain, so by the time you come to load the resource, you already have an open connection. This is great for mitigating the risk of slow connect or DNS lookup times and is simple to implement, either through a <link> element or through a response header (the latter enjoys slightly wider browser support).
- Setting and monitoring KPIs
You can’t control exactly what third parties do, but you can track it. By setting KPIs and monitoring what your third-party advertisers are doing, you can begin to police the advertising on your site. The heatmap feature in Performance Analyzer can be particularly useful here. This shows which portions of the viewport are fastest and slowest to render, and you can adjust your KPI using a slider.
- Placeholder content
Rather than changing the page layout dynamically as ads are dropped in, it may be better to ensure that the initial page layout will accommodate them. This can lead to large blocks of white space on your page while people are waiting—in which case, it could be a sign that you need to address one of the previous points! But even this is preferable to content moving around while people are trying to read it. And if people do have to hold on while advertising loads, why not add some first-party placeholder content while they wait?
Love it or hate it, advertising is the lifeblood of the internet. It’s a big part of why we can access so much information with little or no up-front cost. By optimizing its delivery, media owners not only stand to gain in terms of revenue, they can also help to ensure that visitors to their site get the best possible user experience.