Slow Page Loading Time

How do I speed up my website and still show ads through Javascript code

[aish1108]

Please keep in mind, I am using Windows shared hosting and do not have access to the IIS Server
Problem:
1) Extremely low Average Page Views per visitor and getting worse
2) Slow Page Loading Time

1) How do I speed up my webpages while using Javascript code snippets from ad serving companies (Google Ad sense, Valueclick, tribalfusion, casalemedia etc..)who are making "split-second" (make that 15 -30 second) decisions about which ad to show from which company, and if they don't have an ad to show then pass the responsibility to another company which then goes through the same process(another 15 -30 second) etc...?

2) If I serve 3 ads per page all from the same company will this make a difference as oppossed to serving 3 ads per page from 3 different companies?

3) Will using absolute positioning instead of table layouts make a difference?

Experiment:Limit each page to 1 ad instead of the usual 3 or 4

1) All the extra code and JavaScript that is used to display ads on our website slows down page load time
2) Ads are annoying.
more ads = Slow page load = go find another website
less ads = pleasant experience = stay longer = view more pages
(and possibly visit again - share our website with friends - even more visitors)

The results:
Mon , March 3, 2008 - 6.39 Pages per visitor
Tues, March 4, 2008 - 6.41 Pages per visitor
Wend, March 5, 2008 - 6.49 Pages per visitor

Thur, March 6, 2008 - 11.08 Pages per visitor
Fri , March 7, 2008 - 12.07 Pages per visitor

That is double the page views per visitors!

Solution- What do you suggest? Thanks in advance!

[MarkFilipak]

First, use new Image in the head-element wherever possible to preload images that may be needed later -- won't speed up loading but may make the page more responsive (experimentation needed, YMMV).
Second, Run a monitor loop using setTimeout as a fork mechanism while using Ajax to "GET' your ads so that you can load the page and display it while waiting for your ad suppliers to respond -- this should solve the load speed problem.
Third, if you know that there is going to be at least one ad, fork off an Ajax "GET" to each of your ad suppliers in parallel and show them on a first-received-first-displayed basis.

Though I'm a big fan of position:absolute, I don't think that absolute positioning vs. tables makes any difference -- except if you will have a variable number of ads or they have a variable size, in which case absolute positioning may actually be a hindrance.

[aish1108]

MarkFilipak,
Thanks for the response.

I should of mentioned that my website is written completely in Classic ASP

Could you expand on your second suggestion or else supply some sources where i could learn more about how to implement your suggestions?

Also, should I make sure that all 3 ads on a page are from the same company? Would that make the any difference?

What about using Response.flush at some point to at least show part of the page before the visitor leaves?

[MarkFilipak]

Sorry. I know nothing about classic asp.

Regarding suggestion #2, this requires serving out javascript that runs in the client. The setTimout function is a global function that can set a javascript timer event but that when set with a timeout of zero, serves as a general purpose fork to spawn a new thread, thus permitting your client side page to finish loading without the ads in place (which are filled in as they are received at the client). The spawned thread would be your ad loader. It would launch N number of Ajax sessions, each of which would asynchronously fetch an advert via HTTP "GET". Each session would require a handler with embedded callback to your ad loader (which will have terminated by that point). You will find help for this approach in the webmasterworld, JavaScript and AJAX forum.

On reconsideration, since you are not running client code at the moment, the ad loader could be your main client-side program rather than a separate thread.

[edited by: MarkFilipak at 10:55 pm (utc) on Mar. 7, 2008]

[chriswo]

If you don't already have YSlow (a FireFox Add-On), please check it out. It's from the Yahoo Performance team and is spectacularly good. The YSLow add-on evaluates the structure of HTML. It has about a dozen rules that it uses to evaluate how well you pages will "pop."

The Yahoo Perf team's goal for a page is "progressive rendering." Progressive rendering is having things show up before the rest of the page is full loaded.

Key tips that they've come up with are: CSS needs to be in the header section (not the body), and JavaScript needs to be in the body (not the header).

[tedster]

We've got a thread discussing YSlow here [webmasterworld.com]. It's a very useful tool, and quite well researched. In fact, the book Steve Souders published with O'Reilly - "High Performance Websites" - is based on that research and is quite possibly the most useful web book I bought last year.

[MarkFilipak]

>> CSS needs to be in the header section (not the body)
ALL CSS is supposed to be in the head-element. See the CSS spec.

>> JavaScript needs to be in the body (not the header)
Not true. Putting the javascript in the body is merely a way to get it to run after document.body!=null but before the body onload event. Real thread synchronization is a lot more reliable.

[MarkFilipak]

Let me flesh out some points a little.

Often, slow loading that can't be explained by HTTP "GET" latency is the result of excessive context changes in which the run-time has to plow through a ton of context to reach the handler. The malady will often also show up as memory leaks. The key to avoiding it is to keep the reference chain as short as possible.

[chriswo]

I agree with Mark's point. In very simiplistic terms, I've found that you can get a "stalled" page to "pop" if you change:

<body onload="<functionName>"...

To:

<body onload="window.setTimeout(<functionName>,10);"...

This allows the browser to "take a breather" between parsing the HTML and starting onload script work. If you have a slow loading GET somewhere in the JavaScript code, this approach can free up the browser enough to get the HTML displayed.

[MarkFilipak]

Good overview, Chris.

Actually, rather than allowing the browser to "take a breather" -- wonder what ESL folks make of an expression like that -- what forking the <functionName> in a separate thread does is allow the end of the onload event to immediately generate a mutation event instead of having to wait for <functionName> to finish. (On that mutation event, the page gets rendered.) You can prove this yourself by changing setTimeout's 10 ms timeout to zero.

[MarkFilipak]

>> <body onload="window.setTimeout(<functionName>,10);"...

Should be

<body onload="void window.setTimeout(<functionName>,10);"...

to prevent a new history entry.

[tedster]

The insight about javascript that YSlow reports on is this: when a browser is downloading a script file, it suspends all other downloads. Opera will still do image files, but that's all. With many script calls on the page, that can be a lot of holding time,over a lot of http requests!

So the recommendation is to place as much javascript as possible into one single file, and then call that file as close to the end of the body tag as possible. This gives the visitor some content to read as soon as possible, even if some of the functionality needs to wait a bit longer to be active.

[aish1108]

Tedster, I understand the YSlow insight, i just don't see how it can really improve my situation.

How can I put the 3 snippets of code into 1 file? The Javascript is being served by an ad server, they give me the code and I place it where I want the ad to show up.

Also, the ads need to be displayed on 3 different parts of the page and close to the top, so putting the javascript on the bottom won't help unless I use absolute positioning to place the ads where I want them. Is this the idea?

Thanks but still confused

[tedster]

Absolute positioning may be a good solution in some situations - itcould allow youto place the code near the bottom of the source code and still display the ads near the top of the rendered page. As long as the page isn't asking for the ads before it renders useful content, and then waiting even longer for a slow 3rd party server to respond, you've imporved things. The key is rendering usable content fast, not completing a full download.

[buckworks]

Would it improve the rendering behaviour to put the javascript ad scripts in DIV's of their own with appropriate height and width attributes?

[londrum]

some people reckon, at least as far as Adsense is concerned, that part of the way google picks the ads is to factor in the words which appear around it in the code.
so if you move the ad right to the end of your code then you might be changing which ads get served.
something to bear in mind

[aish1108]

Yes I actually read a thread about that subject somewhere here. I think one of the suggestions was to use the AdSense section targeting through comments, here is a how they describe it
"Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize or downplay when matching ads to your site's content."

I once tried using them and didn't really notice much difference.

Incidentally, my AdSense payout has dropped by 50% since November of last year, and the quality of the ads they are showing are complete trash. Basically a collection of the worst spam on the Internet served up by Google for 1 penny a click. So I'm not going to worry too much about which ads they show.