Are there any good usability studies on when it's best to load heavy files/scripts?
<body> of course but still, the page will keep loading) or when the user clicks the chat button?
Note that not all users will use the chat functionality, but will they be ready to wait the 1-10s it might take to load, even if I give visual "loading..." feedback?
Good question. If the resources needed to bring up the chat weighs a ton, then you propably wouldn't want to serve that up to every user, simple because it will slow the page loading overall. It's worse to have a slow-responsive first page load then when opening advanced features like a chat.
Be sure to use a very clear and simple visual loading process (and maybe even progress). You probably wouldn't want this loader to cover the entire screen if it takes 10s to load, be discrete (maybe put in your sidebar where the chat is loaded and/or fixed to the top of the browser window).
It's also important to note that there are alot of low-bandwith people out there, and if a page doesn't respond they will go elsewere (rather quickly). So, give them the page, the content and barebones, then add the JS-spice. And in this case, with a heavy chat function, load that when the user requests it.
Loading before the end of the
<body> element as you suggested isn't a bad solution, as the user have access to all of the pages content excluding the chat function. And that's ok. Serve max of the page content as fast as possible.