Make Show Ads Asynchronous

Note: New feature as of 1.10.33.0.

Configuration

The 'Make Show Ads Asynchronous' filter is enabled by specifying:

Apache:

ModPagespeedEnableFilters make_show_ads_async

Nginx:

pagespeed EnableFilters make_show_ads_async;

in the configuration file.

Description

The filter rewrites pages that load Google AdSense ads with the synchronous show_ads.js snippet to load them with the asynchronous adsbygoogle.js instead. Loading AdSense asynchronously helps keep ads from delaying the rest of the page content.

Operation

The filter looks for a Google AdSense snippet such as the following:

<div style="border: 2px solid blue;">
  <script>
    google_ad_client = "ca-google";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90";
    google_adtest = "on";
    google_ad_type = "text";
  </script>
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
</div>
<div style="border: 2px solid blue;">
  <script>
    google_ad_client = "ca-google";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90";
    google_adtest = "on";
    google_ad_type = "text";
  </script>
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
</div>

and rewrites such snippets in-place to:

<div style="border: 2px solid blue;">
  <script async
    src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
  </script>
  <ins
    class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-google"
    data-ad-format="728x90"
    data-ad-type="text"
    data-adtest="on">
  </ins>
  <script>(adsbygoogle = window.adsbygoogle ||  []).push({})
  </script>
</div>
<div style="border: 2px solid blue;">
  <ins
    class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-google"
    data-ad-format="728x90"
    data-ad-type="text"
    data-adtest="on">
  </ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({})
  </script>
</div>

Example

You can see the filter in action at www.modpagespeed.com on this example.

Requirements

This filter requires that ads specify a specific width and height with google_ad_width and google_ad_height.

If google_ad_output is specified it must be set to html. Alternate outputs like js or json_html are not supported by adsbygoogle.js.

Ad snippets that don't meet these requirements won't be rewritten. Other ad blocks on the same page will still be rewritten, loading both show_ads.js and adsbygoogle.js. To avoid this, we recommend not enabling this filter for pages that have a mixture of eligible and ineligible ad blocks.

Risks

This filter is considered high risk.

The make_show_ads_async filter is experimental and has not had extensive real-world testing. It manipulates JavaScript, which is always risky, and if errors keep ads from displaying that could mean lost revenue for your site.