Loading Your Site With Google Adsense Quicker
By Xps. 3 Comments
You decided to add some Google Adsense to your website for a little ad revenue, but your web page loads much slower now. That’s because the browser is trying to call an external script (Google’s) and their Adsense servers seem to always run slow. Google wants you to put the Adsense script directly into the element it’s to be displayed. In our case, it’s:
<div id="topAdvert"></div>
There is a better way! Create a division element (<div>) in your page footer, right before the closing for your container/wrapper and the closing body tag (</body>), and put the Adsense script in there. Modify the division’s attributes to give it a unique ID and also set the display to none:
<div id="topAdvert2" style="display:none;">
Directly after this topAdvert2 division, use the script element to call a JavaScript function we’ll get to next:
<script type="text/javascript">displayTopAd();</script>
Open up your web page’s JavaScript file and add the following function:
/**
* Load topAdvert
* https://www.computertechtips.net/44/loading-your-site-with-google-adsense-quicker/
*/
function displayTopAd () {
window.onload = function() {
document.getElementById('topAdvert').appendChild(document.getElementById('topAdvert2'));
document.getElementById('topAdvert2').style.display = '';
}
}- Line 1 of the script is the comment. It’s smart to leave comments in your script so you can better understand it in case you forget. Remember, an end-user can read the source code of your HTML, CSS, and JavaScript so they can read your comments too.
- Line 2 creates the function. It must be the same name you used in the Script element above.
- Line 3 creates a child function which will begin after the web page has loaded.
- Line 4 takes the contents of an element named “topAdvert2” (the one from the page footer) and put them in the element named “topAdvert” (the one from the page header).
- Line 5 removes the style attribute “display:none” from topAdvert2 so it’s no longer hidden. Note that the end is two apostrophies, not a quotation mark.
- Lines 6 and 7 close both the functions.
If you didn’t already have a JavaScript file before this tutorial, you need to reference it in your web page’s header. Add the following line within the <head> element where “javascript” is the name of your file:
<script src="http://www.mywebsite.com/javascript.js"></script>
In actuality, this won’t make your web page load any quicker, but it will give that impression to your readers and that’s very important. Instead of having your page stall while the Adsense is loading, the rest of your website’s content will load first so your users don’t have to wait before reading your content. What more, you can use this method for other advertising programs and even other page content if you wanted to. All you have to do is modify the contents of the topAdvert2 division in the footer and any element IDs you may decide to change.
The downfall to this method comes when you have a lot of content from external sites that loads before your actual page content. By the time the user loads all those external scripts, they’ll have already scrolled past that section of your page and won’t see it. So use it sparingly and on less than important content.
Comments (3)
-
NoBody says: i’ve tried your solution.
Adsense blocks appear after the window.onload event as you suggested in your article. but im afraid the summarized load time wont change. my problem that the page load measurer websites measure my load time about 2-3 sec from north america (server is located in europe), but google webmaster tools measure 5-8 sec. -
Hi. Thanks for leaving a comment. Just to clarify, you call the JavaScript function after topAdvert2 (which is actually in the footer) has loaded the Adsense script.
As mentioned toward the end of the article, this technique doesn’t actually load your website quicker, but it gives the appearance of doing so to humans. A web page loads top to bottom, so if you load the Google Adsense script after your content and then use JavaScript to display the advert above the content (as web banners often are), the user gets the illusion the web page loaded quicker. In actuality, the content they’re looking to read really did load quicker, but the total page load time is theoretically the same.
When timing page loads, you should time with external scripts on your site enabled and disabled, doing both multiple times, taking an average, then comparing the averages of external scripts enabled/disabled.
Sometimes, the external script can take much longer to load than usual. For example, one of my measurements said the web page took 15 minutes, when actually my content took <2.5 seconds and the Google advert took 15 minutes. I measured it a few more times and the advert banner loaded in a more reasonable time.
In addition, a web server or the page load timer tool could be experiencing a momentarily slow period while the scan was in progress. So, it's best to test multiple times and take averages.
Man!
If it is working, you will win a crates of beer.