I work on a customer website. An adserver script is very slow, but can't be edited. Inside of the script are some document write pieces and other scripts are included.
To improve page speed, the script should be "defer", "async" or "load after page is finished". The script can't be placed at the bottom.
I tried many solutions, but none have worked. Everything I tried had the result that the script doesn't load any more. (customer afid removed for examples)
What I did:
1. Jquery document ready / get script
$(document).ready(function() {
$.getScript("http://www35.glam.com/gad/glamadapt_jsapi.act?afid=");
});
2. Java Script bind
$(window).bind("load", function() {
<script type="text/javascript" src="http://www35.glam.com/gad/glamadapt_jsapi.act?afid="></script>
<script>
)};
3. Add defer or async
<script async type="text/javascript" src="http://www35.glam.com/gad/glamadapt_jsapi.act?afid="></script>
<script>
<script defer type="text/javascript" src="http://www35.glam.com/gad/glamadapt_jsapi.act?afid="></script>
<script>
4. Jquery lazy load
http://jqueryad.web2ajax.fr/
You could load the adserver script in a friendly IFrame.
Something like that:
<script>
(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="' +
'var d = document;d.getElementsByTagName(\'head\')[0].' +
'appendChild(d.createElement(\'script\')).src' +
'=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
</script>
I run the same code on two websites. One website should contain Google AdSense block, when another shouldn't. Is there any way to disable Google AdSense on the second site, if showGoogleAd is false?
JavaScript:
var showGoogleAd = false;
HTML:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- vkkar.ru -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I know that I can load script based on boolean value -
if (showGoogleAd) {
$.getScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', function(){});
But what should I do with remaining part? Or, can I just leave it?
Looks like it is enough to remove the following line from the html:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
and load it with JavaScript, if ad should be shown -
if (showGoogleAd) {
$.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
}
i test it on my website to disable Google AdSense, i use below script that remove ads ?
*
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Resposive_TEST -->
<ins class="adsbygoogle responsive-test"
data-ad-client="ca-pub-3086914080036003"
data-ad-slot="1408862175"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><pre> <code>
*
Without Google Ads, my HTTPS webpage loads in about 500ms. With Google Ads, the same webpage takes 2-5 seconds to load. I have two banner ads (one at the top and one at the bottom). Yes, it renders the entire page before the ads, but I still think it's clunky to have the browser spinning while it waits for the ads to finish.
Is there any way with Javascript to finish page loading before the ads, and then just load the ads in the background? Basically, trick it into thinking the entire page is already loaded?
Current code:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My Ad Banner -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="myid"
data-ad-slot="myid"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Looking at the waterfall for my site, it doesn't look like the adsbygoogle.js is causing the load indicator. Instead, it's the actual ad content itself. For example, this object (the banner ad) doesn't even start loading until 1.8 seconds (long after my entire page has already loaded): tpc.googlesyndication.com/simgad/AdID
Thanks!
Try this article.
The trick is to put your ad initializing and loading logic in window's onload event:
<script>
window.onload = function(){
...
};
</script>
This is my ultimate Vanilla JS solution:
<script async defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
[].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
adsbygoogle.push({})
})
}
</script>
A Vanilla solution is to leave all your ad code as is, except to remove the script tag, and then add to your javascript
function loadGoogleAds() {
var scriptTag = document.createElement('script');
scriptTag.setAttribute('src', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
scriptTag.setAttribute('type', 'text/javascript');
scriptTag.setAttribute('async', 'async');
document.body.appendChild(scriptTag);
}
window.addEventListener("load", loadGoogleAds);
Disclaimer: as with the other answers to this question it is assumed that Google does not disapprove of methods to improve page performance
Ads_onscroll_event
Naturally, this is how an original ad unit code look.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
First of all, remove below script from all existing ad units.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
And
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Now it will appear like this
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
This approach will load ad unit once user scroll your web page add this on page that has ads:
<script type="text/javascript">
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&& (!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);//]]>
</script>
And
<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
[].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
adsbygoogle.push({})
})
}
</script>
No matter how many google ads you have on the page, put ONE copy of the external js within the head of your page ... it's OK at the top since it's async.
Put the ins supplied by google where the ad is to appear.
At the bottom of your page, just before the end body tag, put the script to push the ad.
Now the ad will load after your page is complete !
If you want to add a second adsense ad on the page, do not repeat the adsbygoogle.js (one copy is enough) ... put the second where it is to be displayed ... add another push at the bottom of your page so it looks like this:
(adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({});
Place the code for initiating the ad's at the bottom of the page just before the closing /body> tag
This topic has been already answered here under lazy load topic, But this is actually defer loading.
How to lazy load new Google Adsense code using JS
<script>
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
element.async = true;
element.setAttribute('crossorigin', 'anonymous');
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
This JavaScript is cross-browser compatible and works with old browsers too.
If you are looking for Lazy Loading Adsense Ads, Check this answer
How to Lazy Load Adsense Ads?
(This solution requires jQuery)
Remove the <script> tag from your code and add this to your javascript:
$(function() {
$.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
});
This will do an AJAX call to get the script, rather than using the async browser method. This should result in not having the loading indicator.
ref: http://api.jquery.com/jquery.getscript/
This is what I did, after noticing adsense slows down page loading/rendering:
first of all add this code to your <Body> tag:
<body onLoad="initialize_page();">
Now, put only one adsense script code, above the <HEAD> tag:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Remove adsense <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> from all of your adsense code(one copy at the header is enough).
Remove all (adsbygoogle = window.adsbygoogle || []).push({}); from your adsense code from your page. We will be using them over our initialize function.
To our initialize_page() function, add this code:
function initialize_page()
{
(adsbygoogle = window.adsbygoogle || []).push({});//this is for the first adsense
(adsbygoogle = window.adsbygoogle || []).push({});//this is for the second
(adsbygoogle = window.adsbygoogle || []).push({});//this is for the third
}
This code is suitable for 3 adsense on your page. if you use only 2 or 1 adesnes, just remove (adsbygoogle = window.adsbygoogle || []).push({}); from the function respectively.
I put
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
just before closing the body tag and removed it from every adsense ad.
Ads show fine and the page loads very fast.
After many tests I found that sometimes ads don't show in safari.
I have a page name index.php. And I have a script variable as follows at the top of the page:
<script>
var search_quarry = "some_test";
</script>
At the bottom of the same page I want to add this variable into the src attribute of a script tag:
<script src=NEED_TO_ADD_HERE></script>
This doesn't work:
<script src=search_quarry> </script>
Can anyone please tell me how to do this?
You'd need to do with DOM manipulation:
var search_query = 'some_test';
s = document.createElement('script');
s.src = search_query;
document.getElementsByTagName('head')[0].appendChild(s);
or, as an alternative, though I'm not sure if this'd work:
<script id="fixme"></script>
<script type="text/javascript">
var search_query = 'some_test';
document.getElementById('fixme').src = search_query;
</script>
Why would you do this? Seems like a hack to make sever code work without fixing the back end
Option 1 is with document.write
<script>
document.write("<script src='" + search_quarry + "'></scr" + "ipt>");
</script>
Option 2 is to use createElement and appendChild
<script>
var scr = document.createElement("script");
scr.src = search_quarry;
document.getElementsByTagName("head")[0].appendChild(scr); //or use body with document onready
</script>
This is not possible. You cannot use a javascript variable inside the declaration tags for javascript. That is the point of the tags: everything inside them is parsed as javascript; everything outside them is not.
Here's a simple way to do what you want
window.onload=function(){
var script=document.createElement("script");
script.type="text/javascript";
script.src=search_quarry;
document.appendChild(script)
}
Although you would like to change window.onload into something else or just put the code inside at the top level, or if using jQuery:
$(document).ready(function(){
$(document).append("<script type='text/javascript' src='"+search_quarry+"'/>");
});
I'm trying to add a horizontal rule as the last item in a div container. I tried
<script>
var rule = '<hr />';
$('#content-nav').append(rule);
</script>
I added this code into the header.php section of my website which is added onto multiple php files using php include. But jQuery files are also added and work fine for other jQuery plugins that have been implemented.
I'm never sure where in my html js is supposed to go. Am I putting this in the wrong place? Or is there something wrong with the code?
As long as your script comes after the jQuery script AND after the DOM is ready (or after the element is declared, but on DOM ready is preferable) your code will work:
<script src="pathToJQuery.js" />
<script>
$(function() {
$('#content-nav').append('<hr />');
});
</script>
...
<div id="content-nav">
...
</div>
NB in the above the $(function() { ... }); is shorthand for $(document).ready(function() {...});