Improve site performance by loading js/css before end of html is send

Question

I'm using a template system for my website (XML/XSLT). This system will output the generated HTML in one piece after it has done all its work. This leads to a behaviour that a browser will only start downloading all the content after all the HTML is generated. On some pages this is after 1s or more.

Now, I would like to try to speed this up and let the browser download the css/js files (and maybe an image sprite) before all the work is done.

I obviously can't send the whole head section directly since the title, keywords and description are different for each page and only sending part of the head section does not seem to work.

Does anyone have a suggestion how to do this?

I'm using apache and php.

I would think the resources are loaded as they are passed in the HTML - it's going to load the head before the content, so the JS/CSS linked to there should get loaded at that point. — zenkaty
– zenkaty, Commented Sep 12, 2012 at 7:54

JvdBerg · Accepted Answer · 2012-09-12 07:58:10Z

1

You have virtually no control how a browser download things needed to render a page. It depends on browser implementation.

There is a nice option in chrome that displays the timeline of stuff downloaded. Here is a example of how stackoverflow is build:

enter image description here

answered Sep 12, 2012 at 7:58

JvdBerg

21.8k8 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nin Over a year ago

I know I can't control the browser but I think the major browsers have implemented this in the same way? So the basic question is when will the (major) browsers start downloading the other content. Is that after receiving the whole HTML or after receiving only a specific section? It's clear from your timeline that jquery is downloaded after the html. But is there any way to move that foreward?

N.B. Over a year ago

There isn't a way to do what you want without using AJAX. You'd load a landing page, something with an image that spins around and immediately execute piece of JS that fetches the data from your templating engine. Until the data arrives, the spinner will be shown. No major browser can implement that in some magical way, the way they all work is quite simple - fetch index, read html, load the data from links sequentially.

Collectives™ on Stack Overflow

Improve site performance by loading js/css before end of html is send

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related