Load Ads Faster When Using Cloudflare’s Rocket Loader

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.

Cloudflare Rocket Loader

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>
(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.

11 thoughts on “Load Ads Faster When Using Cloudflare’s Rocket Loader

  1. 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.

  2. 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.

  3. 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 ☺

    • 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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.