Google Ads Are Slowing You Down

Google has a well earned reputation for speed. At least on their own sites. It’s an entirely different story when it comes to their ad network. Google ads are slowing down thousands of sites across the internet.

Google Ads in Action

Regardless of what you think of their content, CNN is one of the most popular sites on the internet - and they use Google Ads. There is a large Google-served banner advertisement at the top of the page. It often pops in seconds after the rest of the site has rendered. This ad dramatically slows page load and causes a large layout shift which irritates users and could hurt their search rankings.

CNN.com Banner Ad Example

Google Ads Are Everywhere

It’s easy to pick on cnn.com, but Google ads are ubiquitous. They’re served up everywhere, especially in the media industry, and they’re causing performance issues.

For this post we’re going to focus on these major news sites: nytimes.com, cnn.com, foxnews.com, wsj.com, and espn.com. Every one of them has at least one Google ad on the page.

The goal is to find out what impact, if any, do Google ads have on their web performance?

Measuring the Performance Impact of Google Ads

The best way to measure the performance impact of Google ads on a site like cnn.com would be to run A/B tests with Google ads on and off, over a diverse cross section of users. But we don’t work for CNN and don’t control their ads (the site would be faster if we did) so we have to use the tools available to us.

The Test Setup

In order to A/B test the web performance of sites with and without Google ads, we’re going to use Puppeteer. This is a tool from Google that allows us to automate Chrome with code.

To attempt some level of fairness, each site will be loaded 10 times with Google ads enabled, and 10 times with Google ads blocked. The browser’s cache will be disabled, and we’ll alternate between loading with ads, and loading without, in an attempt to smooth over any network hiccups.

Rather than blocking all ads on the page (some of these sites are using more than one provider), we’re only going to block those domains belonging to Google. Puppeteer allows us to inspect every outgoing request, and block it as we see fit.

The load times of each page will be pulled directly from the window.performance API in the browser. We’ll also grab the Cumulative Layout Shift to see if Google ads are having a negative effect on The Core Web Vitals as well.

Slow Going

After gathering data from all the sites - with ads and without - the results were clear. Google ads had a negative impact on the performance of every site tested. In most cases a sizably negative impact.

Load Performance Results

ESPN had the lowest impact from Google ads - seeing only a 20% increase in load time when ads were enabled. On the other end of the spectrum, load times for the Wall Street Journal were a whopping 5.3x slower with ads vs. without.

CNN escaped with a medium impact score, but only because they notched the worst absolute load times both with and without ads.

Overall, it’s evident that running ads from Google on your site will slow things down.

Layouts are Shifting Too

Have you ever tried to click a link on a website as its loading, only to see the link shift down and another element on the page get clicked in its place? This is called a layout shift, and it happens when new content forces existing elements to move and make space.

Layout shifts are very common on sites with advertising. Ads are often large, and loaded after part of the page has already rendered. The CNN video above shows a classic example of a large and user-hostile layout shift as the banner ad comes in.

Google measures this behavior as a Core Web Vital called Cumulative Layout Shift (CLS). In addition to measuring load performance impact, we wanted to see whether ads contributed to greater layout shifts by measuring their CLS.

Cumulative Layout Shift Results

The results here aren’t as clear cut. ESPN does a great job limiting layout shift in both cases. The New York Times actually has a better CLS score with ads enabled! (More on that below)

However, three of the five sites still have a much worse layout shift score with ads enabled than without. So in general, layout shifts are something you’ll want to monitor if you’re using Google ads.

The New York Times Has a Better CLS Score With Ads Enabled?

The New York times website is reserving space using CSS for the large banner ad at the top of their site. When the ad pops in, it’s not causing any re-flow or layout shift because the space already exists for it.

When ads are disabled, the placeholder collapses, causing a larger layout shift than if ads were enabled!

One could make an argument that no banner ad at all would be better, but then they probably wouldn’t have the cash to buy Wordle, so it’s pros and cons.

How to Improve Google Ad Performance

In almost all cases the revenue generated by Google ads outweighs their performance costs, so removing them is probably not an option. There are still some things that can be done to mitigate their performance hit though.

Load Scripts Statically

It’s not uncommon to see sites using dynamic script loading to inject the Google ad tags. You might see something like this on your site:

<script>
  var el = document.createElement('script');
  el.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
  var node = document.getElementsByTagName('script')[0];
  node.parentNode.insertBefore(el, node);
</script>

Instead of using a dynamic script loader, which can be delayed by other events and elements on the page, it’s better to use statically defined async scripts, like the examples below.

Static Script Loading, Asynchronously

Google suggests their scripts should be loaded asynchronously, so as not to block page load.

<!-- Use of the async attribute on the script tag can help defer load -->
<!-- For Adsense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!--Or using the Google Publisher Tag-->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

Despite this advice, many sites are still loading ad scripts with slow dynamic loaders, or synchronously loading static script tags.

Lazy Load Ads Below The Fold

There’s no sense is waiting for an ad to load that the user can’t even see. When possible, load ads below the fold lazily - preventing load blocking. Google has a nice lazy load example if you’re using Google Publisher Tag. Google even hosts a demo so you can see it in action.

Reserve Size For Above-the-Fold Ads

Preventing layout shift is just as important as optimizing page load performance. The easiest way to prevent frustrating layout shifts for users is to reserve space for your ads, like the New York Times does. The simplest way to reserve space is using the min-width and min-height CSS properties to define a placeholder size.

<div id="banner-ad" style="min-width: 600px; min-height: 200px;"></div>

Multiple Content Sizes

Sometimes ads have multiple sizes, and in that case you’ll have a decision to make with regards to reserving space. Common strategies are:

• Reserve space for the largest content size
• Reserve space for the smallest content size
• Reserve size for the most commonly served content size

Google has more information regarding layout shifts and ad best practices.

Conclusion

Ads may be necessary on a site, but it’s important to minimize performance impact as much as possible. If you’re using Google Ads, give Request Metrics a try and improve your site’s performance.

Request Metrics will monitor Cumulative Layout Shift, load performance, and dozens of other metrics, for every user on your site. You’ll get up-to-date metrics that show you exactly how your site is performing. You’ll also get 90 days of historical data to see if things are trending in the right direction.