Switch To Adsense Asynchronous Ad Code For Faster Page Loading

Google recently introduced an asynchronous version of their Adsense ad Javascript code. If you serve Adsense ads on your blog and wish to improve your blog loading speed, then it is a good idea to switch to the asynchronous JavaScript tags.

Asynchronous Javascripts improve web latency and offer better users experience because they load in parallel and do not block other parts of your web page from loading. This means that users will be able to load the content of your pages, even if they are having trouble loading the ads.

Here's how to implement the asynchronous ad code in Blogger:

Part 1: Add the new Adsense script

First you need to add the asynchronous script near the top of your template.

Go to Template > Edit HTML and add this script before </head> tag:

<script async='async' src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

You only need to add this once, even if you have multiple ads.

Part 2: Replace your old ad codes 

Now replace your existing individual ad codes with the their asynchronous counterparts.

1. Locate your ad code in your template and note its ID. The ad ID is the number next to "google_ad_slot".
2. On your Google AdSense dashboard, click "My Ads" tab to view your ads list.
3. Locate the corresponding ad unit (based on the ID) and click "Get Code".
4. Then click the Code type dropdown menu and select "Asynchronous (BETA)".

   Your asynchronous code will look like this:

   <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   <ins class="adsbygoogle" 
   style="display:inline-block;width:300px;height:250px" 
   data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" 
   data-ad-slot="yyyyyyyyyy"></ins>
   <script> 
     (adsbygoogle = window.adsbygoogle || []).push({});
   </script>

5. Copy the asynchronous code and paste it over your existing ad code.
6. Remove the first line as it is already added in Part 1.
7. Repeat steps above for each ad unit.

Enjoy!