Send head before body to load CSS and JS asap

StackOverflow https://stackoverflow.com/questions/9264279

Question

I wonder if anyone has found a way to send at mid rendering the head tag so CSS and Javascript are loaded before the page render has finished? Our page takes about 523ms to be rendered and resources aren't loaded until the page is received. I've done a lot of PHP and it is possible to flush the buffer before the end of the script. I've tried to add a Response.flush() at the end of the Masterpage page_load, but the page layout is horribly broken afterward. I've seen a lot of people using an update panel to send the content using AJAX afterward but I don't quite know what impact it would have on the SEO.

If I don't find a solution I guess I'd have to go the reverse proxy route and find a way to invalidate the proxy cache when the pages content change.

Was it helpful?

Solution

Do not place the Flush on code behind but on your html page as:

</head>
<%Response.Flush();%>
<body >

This can make something like fleekering effect on the page, so you can try to move the flush even a little lower to the page.

Also on Yahoo tips page at Flush the Buffer Early
http://developer.yahoo.com/performance/rules.html

Cache on Static

Additionally you can add client cache on static content like the css and javascript. In this page have all the ways for all iis versions.

http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache

Follow up

One more think that I suggest you to do after I see your pages is to place all css and javascript in one file each. And also use minified to minimize them.

I use this minified http://www.asp.net/ajaxlibrary/Download.ashx with very good results and real time minified.

OTHER TIPS

Consider using a content-delivery-network (CDN) to host your images, CSS and JS files. Browsers have either an eight or four connection limit per domain - so once you use those up the browser has to wait for the resources to be freed up.

By hosting some files on the CDN you get another set of connections to use concurrently, allowing everything to load faster.

Also consider enabling GZIP on your server if you haven't already. This compresses files on the fly, resulting in smaller transfers.

You could use jQuery to execute your js as soon as it is loaded.

$.fn.ready(function(){
    //Your code here
})

Or you could just take the standalone ready function -> $(document).ready equivalent without jQuery

You could do a fade-in or show once the document has been loaded. Just set body display:none;

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top