Load Ads Faster when Using Cloudflare’s Rocket Loader #AdSense

We have covered Cloudflare before, an online service that makes your website faster and more secure. Cloudflare has dozens of features, but if I were to pick my favorites, Rocket Loader would be among the top contenders.

Rocket Loader, when turned on and set to automatic mode, combines all the resource hogging JavaScript files from a web page and loads them asynchronously towards the end. This results in dramatically improved page load times and better responsiveness of the web page. Now, Rocket Loader isn’t the only service that does this. If your website runs on WordPress, you can use plugins like Autoptimize or W3 Total Cache’s Minify to get similar results. However, I have routinely found Rocket Loader to be more reliable and less prone to break things than these two plugins.

So, Rocket Loader is pretty damn good, but it can be an issue if you use ads on your site. Ads from all ad networks (like AdSense) are bits of JavaScript code that you place on your web page, therefore Rocket Loader in automatic mode will grab those ad codes and prevent them from loading until the non-JavaScript elements have finished loading. This can lead to fewer ad impressions, lower click-through-rate, and ultimately lower revenue.

If you’d like to reap the benefits of Rocket Loader without affecting your ads, worry not, for there is a way! All you have to do is find your ad code and add data-cfasync="false" to the <script> tags. For example, if your original ad code is,

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Before Single Post -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="1234567890"
  data-ad-format="auto"></ins>
<script data-cfasync="false">
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

After modification, your code should look like this,

<script data-cfasync="false" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Before Single Post -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="1234567890"
  data-ad-format="auto">
</ins>
<script data-cfasync="false">
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

The added code is highlighted in red. Rocket Loader will now ignore these script tags, and your ad will load as usual.


Source

As you might have guessed, you can use this for virtually any script on your website that may have issues with Rocket Loader.

comments (add yours)

    • It will be similar to the ad unit code. Something like this:

      <script data-cfasync="false" data-ad-client="publisherid" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

      Reply
  1. Thanks for the useful information. I was little confused about how to add the code on adsense. Your guide helped me. Now the adsense ads are showing fast on my website and I am using Cloudflare without any problem.

    I am also using AMP for WP plugin where I set up adsense but don’t know whether Rocket Loader effects the adsense in amp pages or not. Do you have any idea about that?

    Reply
    • Hi Amit,

      Glad you found the steps helpful! Rocket Loader is not compatible on AMP pages, so Cloudflare automatically turns it off for such pages.

      Reply

We run automated tests to catch spam, and moderate comments as per our policy. Your comment may take some time to appear below this post.