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)

  1. Why are you using it ( data-cfasync=”false” ) twice in your script? is there any benefit? Because, according to your source link cloudflare says, You can have Rocket Loader ignore individual scripts by adding the data-cfasync=”false” attribute to the relevant script tag. So, should i use once or twice in my script? Thanks in advance.

    Reply
    • I have used it twice for the two script tags. You can use it just for the first tag, the one that loads adsbygoogle.js. It should work equally well.

      Reply
  2. In fact, this piece of code has helped me solve the headache, the site loads according to the ads, no lazy load on ads, thanks brethren

    Reply
  3. This is against Adsense policy or not? i am using cloudways hosting + cloudways cdn for my website which is monetized through Adsense. This will work for me or not? will google disable my account for ad code modification?

    Reply
    • This is not against AdSense policy as far as I am aware. You’re not modifying the AdSense code, just adding a tag so that Cloudflare Rocket Loader will skip it. I cannot provide any guarantee however.

      Reply
  4. Hey I Have Both W3 Total Cache And Rocket Loader Enabled. This Trick Is Only For Rocket Loader I Think And You Said W3TC Does The Same Thing. So Any Trick For W3TC Because I Don’t Want To use Both W3TC And Rocket Loader.
    Although Thanks For The Trick ☺

    Reply
    • Hi there,

      I believe W3TC’s Minify has an option to push JS files to the bottom of the page and you can mention which files should be ignored. I still believe Rocket Loader to be a far better option – it’s recently come out of beta and has improved significantly over the time. You can always use Cloudflare with W3TC, the two services complement each other very well.

      Reply
  5. Thank you so much, Finally I found something which helped me to run Cloudflare’s automatic rocket loader and adsense ads flawlessly together. I wasn’t sure how to exclude ad codes from cloudflare. good work brother.

    Reply
  6. I will give it a try… 🙂 The problem is that I switched from adsense to setupad. But I will test it out.

    Reply
  7. Thank you, Ashutosh. I have been searching for something like this solution for a long time. My site revenue was getting affected my the slow loading ads even though site speed had fairly increased after adding Cloudflare! Hope this does the trick.

    Reply

Leave a Reply to George Cancel 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.