Search code examples
javascriptasp.netcssoptimizationprerender

Send head before body to load CSS and JS asap


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.


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.