I run a PHP based landing page with a big header graphic and a div with the common JavaScript sharing buttons like Twitter, Stumpleupon and Facebook below. These buttons are slowing down the loading process for everthing that's below.
So I'ld like that the important parts of the website show up first and the less important parts should get loaded at the end.
How to archive that? Thanks Michael
The simplest way is to move all the JavaScript code to the bottom of the document. It may require some modification (i.e. use DOM functions instead of document.write) or restyling, but will make the site usable before these gadgets are fully loaded. Setting the async and defer is an elegant, but also complicated, alternative.
Concatenating multiple JavaScript documents helps, too, especially with older browsers with a low number of concurrent connections. You can also combine graphics(mostly icons/logos etc) with CSS sprites. On the cutting edge, data: URLs allow embedding images into the source of the HTML document. Read more about these techniques in the Yahoo Best Practices.
Additional speedup can be gained by gzipping HTML and CSS documents. JavaScript files can be compressed too, but minification (for example with the YUI compressor) tends to achieve even greater gains. You should also specify caching directives for static resources.
On the server side, you should really be using a php bytecode cacher like APC. Google has some additional tips on php best practices.
General resources:
Great question, and one which better authors than I have written mountains about. In fact, give this article by Yahoo! staff a shot - it's the definitive document on the subject, and pretty easy to follow:
http://developer.yahoo.com/performance/rules.html
Another answer suggests moving your Javascript to the bottom of the page. This is likely to help, but won't solve all your problems and won't do much to help your images load. From Yahoo!'s guide, you would do well trading numerous smaller images for single images contained in a CSS spritesheet to cut down on HTTP request overhead, and make sure to enable caching for all your content.
You can also (advanced!) do clever, tricky stuff like only putting the important stuff in the document at all, and having javascript (located at the bottom of the page) dynamically load in the "extras" using AJAX after the initial load is complete. Spiffy!
Like others are saying you need to put javascript at the bottom. Maybe headjs library makes this task a little bit easier for you?
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1&r=www.example.com"></script> I'm not that into JavaScript, but I guess you can't load it at the bottom if you want to use it on the top, right?