Ads are slowing my site

[Jon12345]

I have ads from a number of third parties: Adsense, ContextWeb and LakeQuincy. They all operate using javascript. It seems to me that this is the bottleneck on my forum, which is http://access-programmers.co.uk/forums/

Is there anything I can do that could make the ads load faster? I know CloudFlare has some script called Rocket loader. Wondered if there is a similar product or service as I am already using MaxCDN so CloudFlare is partially redundant.

Thanks,

Jon

[pmeenan]

There aren't any really good solutions for generically loading ads asynchronously. You pretty much have to ask you ad providers if they have an async or iFrame embedding solution.

The only ones I'm aware of are:

Doubleclick - Has a fully async embed solution, even the targeting code is loadable asynchronously

Adsense - the main JS is blocking (though cacheable) but they load the ad itself in an iframe so the ad performance itself should not impact the page

[lsub]

Where Are the ads/scripts in the html code, put a blank image and a

Code:

<div id="load_top"> </ div>

and remove the source script of ads.

At the end of loading the page, put

Code:

<div id="load_top_footer" style="display: none;">
This line, replace with the source script lines for ads.
</ div>
<script type="text/javascript">
window.onload = function () {
document.getElementById ('load_top'). appendChild (document.getElementById ('load_top_footer'));
document.getElementById ('load_top_footer'). style.display ='';
}
</ script>

Then the banner will be rendered after the rest of elements of the forum.
The ADS will not load faster, but the feeling for anyone visiting the forum will be something lighter.

Best Regards.

[damoncloudflare]

(04-27-2012 02:22 AM)Jon12345 Wrote:  I have ads from a number of third parties: Adsense, ContextWeb and LakeQuincy. They all operate using javascript. It seems to me that this is the bottleneck on my forum, which is http://access-programmers.co.uk/forums/

Is there anything I can do that could make the ads load faster? I know CloudFlare has some script called Rocket loader. Wondered if there is a similar product or service as I am already using MaxCDN so CloudFlare is partially redundant.

Thanks,

Jon

"Wondered if there is a similar product or service as I am already using MaxCDN so CloudFlare is partially redundant."
Just a quick note that there is no conflict using CloudFlare and MaxCDN and you should still see a performance boost.

Rocket Loader does, however, have the potential to break some JavaScript and jQuery & CloudFlare users should turn this off if they see something breaking.

[Jon12345]

Isub, I was very interested in what you posted and hope it will be the solution to my woes! Are you saying that the ads will no longer delay the loading of my forum content? I believe the ads currently add about 6 seconds to the typical loading time.

Couple of questions:

1. Do I use <div id="load_top"> for all adverts, or would I have to have <div id="load_top1">, <div id="load_top2">, <div id="load_top3"> etc for ads 1,2 and 3?

2. What html would I have for a blank image? Bit confused on that one!

3. Do I put the second section of code just before the </body> tag?

4. My banners are javascript based. Would that still work with this?

Looking forward to hearing what you say! Big thank you!

[lsub]

(04-28-2012 10:24 PM)Jon12345 Wrote:  Are you saying that the ads will no longer delay the loading of my forum content?

Yes, first is render the forum, then after is render the ads.
The total time to render fullpage is the same (or similar).

(04-28-2012 10:24 PM)Jon12345 Wrote:  1. Do I use <div id="load_top"> for all adverts, or would I have to have <div id="load_top1">, <div id="load_top2">, <div id="load_top3"> etc for ads 1,2 and 3?

You can/may one div for each ads.

(04-28-2012 10:24 PM)Jon12345 Wrote:  2. What html would I have for a blank image? Bit confused on that one!

You must replace the ads with something to occupy the same size, so that everything is displayed in the same place.
Otherwise the page flick (move during loading, sorry i don't know the correct term)
For example: Replace

Code:

<script  src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=521268&cwwidth=300&cwheight=250&cwpnet=1&cwtagid=99980"></script>

whith (or other background-color)

Code:

<div style="width:300px; height:250px; background-color: #F2F2F2;">
        <div id="load_top_1"></div>
    </div>

(04-28-2012 10:24 PM)Jon12345 Wrote:  3. Do I put the second section of code just before the </body> tag?

Best just before the ads that you have in the bottom of the forum

Quote:4. My banners are javascript based. Would that still work with this?

I have tested it with google-ads, it's javascript too.

[Jon12345]

Thank you so much for that. If it works, it could make a huge difference to my forum!

[pmeenan]

Just make sure it doesn't violate the TOS from your ad provider to move it around like that (assuming it works ok).

[Jon12345]

I am struggling with this. Here is what I have done.

Firstly, I am using this code in place of where my advert was:

Code:

<!--CW replacement-->
<div style="width:300px; height:250px; background-color: #F2F2F2;">
<div id="load_top1"></div>
</div>

Then, right at the end of the footer after my Google Analytics tag, I am using this code:

Code:

<!--Load CW ad-->

<div id="load_top_footer" style="display: none;">
<script  src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=521268&cwwidth=300&cwheight=250&cwpnet=1&cwtagid=100009"></script>
</ div>
<script type="text/javascript">
window.onload = function () {
document.getElementById ('load_top1'). appendChild (document.getElementById ('load_top_footer'));
document.getElementById ('load_top_footer'). style.display ='';
}
</ script>

When I load my webpage, I can see the 300x250 placeholder there, but the advert never shows. Have I put my code in the wrong area or something?

[lsub]

Opsss, I don’t know.

I made a test with your pages, and for IE this works. ( http://www.galaxiagolf.com/recent3.html )
http://www.webpagetest.org/result/120504...reen_shot/
But don’t for Google Chorme nor for Firefox.
For your example I put the background in red, is more striking.

This technique works in all browsers (or that is I think), for me work for all browsers ( http://www.galaxiagolf.com/forum.php )

I think it's possible that your pages there is some js error or other conflict, then don’t load the last (I don’t know sure)
Another issue, you must put one, and only one, window.onload

Pmeenan, I think don’t violate the TOS, nor iframe, nor ajax, nor modify code … but is a very good question.