Depends on your requirements for building an application. Use the tools that provide acceptable solutions to your needs.
If so why does it make such big difference in the size of pages?
Is it the way I have used them or is it a common problem (I've heard so).?
Since you haven't provided us any code or examples, it could be the way you've used them. Or it could be the controls you've attempted to use. I've noticed that Telerik controls seem to be quite bloated, but that is my own opinion.
How do I balance page interactivity and server's load?
These are mostly independent from each other. It is possible to create a very interactive page that can be either more or less load on the server (load I assume is CPU/Disk time). In my opinion, AJAX for the most part simply reduces the number of times complete layouts have to be sent by the server to the client which; is less bandwidth and slightly less load on a server due to the lack "rendering" html.
What are priorities?
Highly depends on your application requirements. It sounds like you've jumped off a diving board into a big pool of web based opportunities, but don't know where to swim to.
(i don't have enough rep to post comments on this stack yet, so I answered you question below.)
I am mostly using
JQuery, which has a lot of very good useful features:
- DOM element selections
- DOM traversal and modification (including support for CSS 1-3)
- Events CSS
- manipulation Effects and animations
- Extensibility through plug-ins
- Utilities - such as browser
- version and the each function.
- Cross-browser support
Granted I have to program features myself.