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.

Comments 4

  • 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.

  • 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;

发表评论

电子邮件地址不会被公开。 必填项已用*标注