Question

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

Answer 1

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:

• Google: Let’s make the web faster
• Yahoo: Best Practices for Speeding Up Your Web Site