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.