Web performance, inline script questions

Question

can anyone explain on web performance, load external css (combined css) load external javascript (combined javascript) inline css / inline javascript <- will block other resource downloading, recommended to put the javascript before external css

how can i put the javascript before external css when i combined the javascript? Is there a way to not block the loading of the images without making the inline javascript to be external scripts?

Update

To clarify, according the the web performance blogs/articles we should load external stuff first, load the external css first before the javascript. Then do the inline style/javascript but there is a catch on the inline javascript because once we do it after loading the external resources the other resources below the stack (images) are then blocked.

Say in firefox where you have 6 connections (assuming), you open 2 connections on the external css/external javascript therefore you still have 4 connections left, now you want to utilized that open connections but the problem is that there is an inline javascript that would block the downloading of other resources and would only continue to download after the inline javascript is executed.

Some say that you need to put the inline javascript before the external so that the open connections are utilized but the problem is that you need some references from the external making it impossible to put it before the external resources. Other blogs/article said that we should put the inline javascript to external and combine them making one external javascript (on the backend, cached), but this seems to be a lot of work on the current site im doing.

Is there any way to utilize the web performance if you have an inline javascript that requires/dependent on your external javascripts? Thanks

Answer 1

well, in general you want:

• your external javascript to be loaded asynchronously (and in one file if possible, minified and compressed by your webserver off course)
• your inline javascript to be non-blocking

if you want to achieve that, you might want to look into labjs which is:

an all-purpose, on-demand JavaScript loader [that] reduces resource blocking during page-load [...] by loading (and executing) all scripts in parallel as fast as the browser will allow. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order.

I'm currently doing some tests to compare a normal page with multiple javascript-resources with the same page but with labjs, if you're interested I can keep you posted on the results.