[jQuery] Re: Loading before dom = ready - Best Practices.
On Apr 23, 3:45 pm, Adam wrote: > > That sounds like a potential accessibility issue. > > I certainly think so, hence the question :] > Why can't you just include the content from the server? If the goal is to have the information when the page loads, send it in the initial request. Bots will see the links, the links will degrade, and you will have less javascript on the page. > > Such script tags should be moved to just before > body>. > > They are, but this still produces the problem since that's still part > of the DOM we're waiting on. > Eliminate possibility that there is initial latency with lori FF plugin. You didn't say if the ads are in iframes. Either way, the ads can be moved down and repositioned with CSS. If the ads are in frames. One possible load order:- [content] [your scripts] [ads] [analytic scripts] Firebug's Net tab has request info, so you can see which request is taking the longest. For other browsers on Windows, Fiddler provides information about requests on a page. It could very well be an image that your page uses. Possibly the CDN is not performing well enough. Garrett
[jQuery] Re: Loading before dom = ready - Best Practices.
> That sounds like a potential accessibility issue. I certainly think so, hence the question :] > Such script tags should be moved to just before body>. They are, but this still produces the problem since that's still part of the DOM we're waiting on. > There are probably more and better options. Possibly by using a > combination of a few things, the performance and user experience (and > possibly SEO) could be improved. Effectively we are using a combination of most of the techniques described here and above, my reasoning for wanting to explore other options is indeed largely an SEO / text-to-speech concern with some of these practices. We're doing a pretty good job of it, considering, but it would be lovely if there were a single reliable solution. I'll certainly have to check out $.getScript. Thanks Brandon!
[jQuery] Re: Loading before dom = ready - Best Practices.
> That sounds like a potential accessibility issue. I certainly think so, hence the question :] > Such script tags should be moved to just before body>. They are, but this still produces the problem since that's still part of the DOM we're waiting on. > There are probably more and better options. Possibly by using a > combination of a few things, the performance and user experience (and > possibly SEO) could be improved. Effectively we are using a combination of most of the techniques described here and above, my reasoning for wanting to explore other options is indeed largely an SEO / text-to-speech concern with some of these practices. We're doing a pretty good job of it, considering, but it would be lovely if there were a single reliable solution. I'll certainly have to check out $.getScript. Thanks Brandon!
[jQuery] Re: Loading before dom = ready - Best Practices.
On Thu, Apr 23, 2009 at 3:42 PM, Adam wrote: > > On Apr 23, 2:57 pm, Brandon Aaron wrote: > > You could use $.getScript to load in the slow loading scripts. Any > scripts > > loaded this way will be non-blocking (asynchronous). > > -- > > Brandon Aaron > > > That could certainly cut down some of the time, but I suspect there's > same-origin policy limitations here? > Nope. http://docs.jquery.com/Ajax/jQuery.getScript#urlcallback -- Brandon Aaron
[jQuery] Re: Loading before dom = ready - Best Practices.
On Apr 23, 12:13 pm, hedgomatic wrote: > While virtually every site in existence trumpets using the jQuery DOM- > ready shortcut as an absolute must, I've come across situations which > I feel frustrate the user, particularly when using jQuery to create a > navigational element. > That sounds like a potential accessibility issue. > I often work on sites which are going to have a lot of external > content (ads, feeds, analytics), and if even one of them is sluggish > to load, none of my interactive elements are responsive for that time. You say you've got ads, feeds, and analytics. Are the ads in iframes? How are the analytics included? Is it something like Omniture or ForeseeResults? Such script tags should be moved to just before . > > There seem to be three options: > > 1] liveQuery (disadvantage: overhead) > 2] popping a loading message over the whole page (disadvantage: > ridiculous) > 3] nesting an image inside the portion of the DOM we need, and using > an onLoad event (disadvantage: poor semantics). > > Anyone else come across any novel ways around this seemingly under- > discussed issue? There are probably more and better options. Possibly by using a combination of a few things, the performance and user experience (and possibly SEO) could be improved. Garrett
[jQuery] Re: Loading before dom = ready - Best Practices.
On Apr 23, 2:57 pm, Brandon Aaron wrote: > You could use $.getScript to load in the slow loading scripts. Any scripts > loaded this way will be non-blocking (asynchronous). > -- > Brandon Aaron That could certainly cut down some of the time, but I suspect there's same-origin policy limitations here?
[jQuery] Re: Loading before dom = ready - Best Practices.
I actually do this for people with JS enabled on one particular site
in question. Since the ads are in separate iframes, I simply don't
specify a source, and use jQuery's DOM ready to query a php file that
generates a random key, whereby I can then set the source for my ad
frames. It's also nice since I can dynamically refresh the ads upon
certain user actions.
#4 is basically what I do coupled with #2, and then do something like
.jscript { display:block; }
for no-js people.
Which works great, but the problem is I really don't want to wait for
dom to load for critical nav elements.
#5 is of course always best practice, but sometimes that comes back to
bite. For instance, with any lightbox content, I nearly always do the
hide/show trick as above, since otherwise users might try and enlarge
some content on the page before GIANT_ADBANNER.SWF has finished
loading, and instead get the image in a blank page.
my only real concern is in regards to elements that I think impact
user experience by not being available ASAP.
On Apr 23, 2:44 pm, Jonathan wrote:
> In a perfect world the things out of your control (ads, feeds, etc)
> would themselves be loaded after domReady into their placeholder
> markup. A slow loading Ad shouldn't be able to cripple the site while
> it loads, but anyway to expand on your topic.
>
> 4) Set a class on the Dom elements called 'jscript' or something that
> either hides or otherwise marks the content as not ready(disabled,
> grayed,etc) and once the Dom is ready use Javascript to remove the
> class
> 5) Redesign your pre javascript markup so it's somewhat usable and
> only use javascript to expand upon the behavior (this is really the
> best approach but not always practical if you use heavy script)
>
> I would recommend not trying to get tricky with snippets of script
> outside the domReady though. Too easy to have race conditions or
> otherwise hard to track down problems.
>
> On Apr 23, 12:13 pm, hedgomatic wrote:
>
> > While virtually every site in existence trumpets using the jQuery DOM-
> > ready shortcut as an absolute must, I've come across situations which
> > I feel frustrate the user, particularly when using jQuery to create a
> > navigational element.
>
> > I often work on sites which are going to have a lot of external
> > content (ads, feeds, analytics), and if even one of them is sluggish
> > to load, none of my interactive elements are responsive for that time.
>
> > There seem to be three options:
>
> > 1] liveQuery (disadvantage: overhead)
> > 2] popping a loading message over the whole page (disadvantage:
> > ridiculous)
> > 3] nesting an image inside the portion of the DOM we need, and using
> > an onLoad event (disadvantage: poor semantics).
>
> > Anyone else come across any novel ways around this seemingly under-
> > discussed issue?
[jQuery] Re: Loading before dom = ready - Best Practices.
You could use $.getScript to load in the slow loading scripts. Any scripts loaded this way will be non-blocking (asynchronous). -- Brandon Aaron On Thu, Apr 23, 2009 at 2:13 PM, hedgomatic wrote: > > While virtually every site in existence trumpets using the jQuery DOM- > ready shortcut as an absolute must, I've come across situations which > I feel frustrate the user, particularly when using jQuery to create a > navigational element. > > I often work on sites which are going to have a lot of external > content (ads, feeds, analytics), and if even one of them is sluggish > to load, none of my interactive elements are responsive for that time. > > There seem to be three options: > > 1] liveQuery (disadvantage: overhead) > 2] popping a loading message over the whole page (disadvantage: > ridiculous) > 3] nesting an image inside the portion of the DOM we need, and using > an onLoad event (disadvantage: poor semantics). > > > Anyone else come across any novel ways around this seemingly under- > discussed issue? > > >
[jQuery] Re: Loading before dom = ready - Best Practices.
In a perfect world the things out of your control (ads, feeds, etc) would themselves be loaded after domReady into their placeholder markup. A slow loading Ad shouldn't be able to cripple the site while it loads, but anyway to expand on your topic. 4) Set a class on the Dom elements called 'jscript' or something that either hides or otherwise marks the content as not ready(disabled, grayed,etc) and once the Dom is ready use Javascript to remove the class 5) Redesign your pre javascript markup so it's somewhat usable and only use javascript to expand upon the behavior (this is really the best approach but not always practical if you use heavy script) I would recommend not trying to get tricky with snippets of script outside the domReady though. Too easy to have race conditions or otherwise hard to track down problems. On Apr 23, 12:13 pm, hedgomatic wrote: > While virtually every site in existence trumpets using the jQuery DOM- > ready shortcut as an absolute must, I've come across situations which > I feel frustrate the user, particularly when using jQuery to create a > navigational element. > > I often work on sites which are going to have a lot of external > content (ads, feeds, analytics), and if even one of them is sluggish > to load, none of my interactive elements are responsive for that time. > > There seem to be three options: > > 1] liveQuery (disadvantage: overhead) > 2] popping a loading message over the whole page (disadvantage: > ridiculous) > 3] nesting an image inside the portion of the DOM we need, and using > an onLoad event (disadvantage: poor semantics). > > Anyone else come across any novel ways around this seemingly under- > discussed issue?
