4

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.

Aristos
  • 63,580
  • 14
  • 112
  • 146
werfu
  • 382
  • 1
  • 11

4 Answers4

2

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.

Aristos
  • 63,580
  • 14
  • 112
  • 146
  • This is definitely what I'm trying to do, flushing the buffer early. However, even if I do, the CSS stylesheets aren't loaded until the page is loaded completely, at least this is what Firebug timeline is showing me. – werfu Feb 14 '12 at 22:22
  • @werfu do you have the page online to see it ? Can you test it also with chrome ? – Aristos Feb 14 '12 at 22:42
  • I tried to disable buffering if it helped a bit, but I had to back down on flushing the page because some pages require to change the session. The website address is [http://www.sherweb.com]. I'm currently in process to improve SEO and loading performance. I should be able to push this iteration live this afternoon or tomorrow morning. It's quite crazy that I've been able to cut down the page size while cached to 10% of what it used to be. – werfu Feb 15 '12 at 13:57
  • @werfu I am look at your page and I am not see any problem, what I am missing ? – Aristos Feb 15 '12 at 17:14
  • I'm trying to shave as much loading time possible. The browser doesn't start to load the CSS until 600ms after the request start, while it could do before if the head tag would be receive sooner. I know this is becoming extreme, but its the final optimization I'll be doing if it's possible. Next step is reducing Javascript overhead. BTW the optimized version should be online tomorrow morning. – werfu Feb 15 '12 at 20:32
  • @werfu Now I understand. All the behavior is normal, Its not actually load it 600ms after, just start to use it at that time, this is normal. Use static cache and you are good to go, I do not think that you need any extra optimize from your side. The same is done with my pages also. Read also this http://stackoverflow.com/questions/9271276/is-the-recommendation-to-include-css-before-javascript-invalid – Aristos Feb 15 '12 at 20:42
  • @werfu What you really must do to optmize it more is to add all css in one file, and all js also in one file, and place some javascript on the end of the page. Check this athineon.com and see the js and css source code to see what I mean. – Aristos Feb 15 '12 at 20:44
  • I've compacted the CSS and JS in the new version. Helped quite a bit. – werfu Feb 15 '12 at 20:53
1

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.

Diodeus - James MacFarlane
  • 107,156
  • 31
  • 147
  • 171
0

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

Community
  • 1
  • 1
danwit
  • 718
  • 3
  • 11
0

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

Vigrond
  • 7,820
  • 4
  • 24
  • 43