We were working on client’s site to optimize its front end performance. Home page had 7 ads placed via AdButler. As a general practice we don’t recommend to have this many ad slots, specially on home page. This is because the 3rd party ads load too many files and add significant delays to page load time for visitors. The revenue of the ads was very important for client so the slots could not be reduced. Not all the slots were in first fold so that gave us an opportunity to optimize performance while still having same number of ad slots. To avoid loading all ads on page load we modified the AdButler code snippet. We made it only loads when slot is in visible area after user scrolls. I am sharing the modified code as it may benefit some sites which have lot of ad slots from AdButler. Here is the original sample slot
<script type="text/javascript">if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}</script>
<script type="text/javascript">
var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
var abkw = window.abkw || '';
var plc212726 = window.plc212726 || 0;
document.write('<'+'div id="placement_212726_'+plc212726+'"></'+'div>');
AdButler.ads.push({handler: function(opt){ AdButler.register(160009, 212726, [300,600], 'placement_212726_'+opt.place, opt); }, opt: { place: plc212726++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
</script>
The code above initializes the AdButler and renders the ad, the line #7 is responsible for rendering the ad. Now what we had to do was to to execute that line only when users scrolls to specific position. So we removed that line from the code snippet so the updated code looked like
<script type="text/javascript">if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}</script>
<script type="text/javascript">
var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
var abkw = window.abkw || '';
var plc212726 = window.plc212726 || 0;
document.write('<'+'div id="placement_212726_'+plc212726+'"></'+'div>');
</script>
We did same to another slot. With help of jQuery we were able to trigger that line when user scrolled to a specific position. In this case we loaded 1st slot when scroll is greater than 800, and 2nd slot gets loaded after 4300. You may need to adjust as per you design. Here is the code which does the magic.
<script>
var loadedSecondAd = 0;
var loadedThirdAd = 0;
$(function () {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 800 && window.loadedSecondAd == 0) {
AdButler.ads.push({handler: function(opt){ AdButler.register(160009, 212726, [300,600], 'placement_212726_'+opt.place, opt); }, opt: { place: plc212726++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
window.loadedSecondAd = 1;
}
else if (scroll > 4300 && window.loadedThirdAd == 0) {
AdButler.ads.push({handler: function(opt){ AdButler.register(160009, 213039, [728,90], 'placement_213039_'+opt.place, opt); }, opt: { place: plc213039++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
window.loadedThirdAd = 1;
}
});
});
</script>
The variable window.loadSecondAd is used to avoid loading ad more than once. Using code above we were able so save bandwidth consumed by 3 slots on page load so user page load time improved.
