Fast page loading by moving ASP.NET AJAX scripts after visible content

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Frano Hartman — Sat, 07 Mar 2009 12:25:52 GMT

Hello, I really like this approach, you can look at my site www.adriaticglobal.net how it works.

Also I have adapted it to work with ASP NET MVC control, look at this code...

protected override void OnActionExecuting(ActionExecutingContext filterContext)

{

Response.Filter = new AdriaticGlobal.MVC.Utilty.ScriptDeferFilter(Response);

base.OnActionExecuting(filterContext);

}

just change in code HttpResponse to HttpResponseBase.

You can see live example at:

www.dubrovnik-accommodation.biz (beta site).

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Faiyaz — Thu, 19 Feb 2009 16:01:26 GMT

Asak,

I have incorporated ur sample but the last part which is combining script files into one url I didnt understand. You have mentioned some configuration file changes required for combining scripts into one URL.

can you please give me the working sample so I can incorporate the same.

faiyazmumtaz@yahoo.com

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

darshan shah — Mon, 09 Feb 2009 17:18:24 GMT

i could'nt understand the example at all.

can you please give me the working example of aspx page so i can understand and incorporate in my site.

my id is darshan43shah@gmail.com

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Pandiya — Tue, 03 Feb 2009 06:03:20 GMT

Hey it doesn't work for me.... I ve added ScriptDeferFilter to my app code folder... And in global ascx file it doesnt seems to work

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

roncansan — Fri, 26 Sep 2008 18:05:30 GMT

Where can I find the article, i did to see it?

Thanks

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

omar — Fri, 26 Sep 2008 17:34:00 GMT

Please use the "pin" on the google analytics script tag to let ScriptDeferFilter ignore the script tags. See my article how to use the "pin" feature.

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

roncansan — Fri, 26 Sep 2008 17:13:19 GMT

Hi Omar "again"

If I put the Google Analytics JS before the "head tag" ends it works grate, but if I put it after the "body tag" ends the ScriptDeferFilter eliminates it.

In summary,

if you use ScriptDeferFilter you must place at least one script before the "head tag" ends. If you manually place them after the "body tag" ends the ScriptDeferFilter eliminates it.

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

roncansan — Fri, 26 Sep 2008 16:59:12 GMT

Hi Omar,

Thanks for the article. I'm using it in one of my projects, but I have found something strange

"I have a couple of pages that only have the google analytics JS, at the end of the page, when I applied the ScriptDeferFilter the google analytics JS disappear"

Any insights?

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Mohammed El Baz — Mon, 18 Aug 2008 23:32:19 GMT

Thanks very much buddy, I was looking for this many days ago

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Yousaf — Thu, 12 Jun 2008 17:38:37 GMT

There is a problem with scriptdeferfilter.cs my ajax rating is not working with it.

can u post the fix.

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Sayeed Ahmed — Sun, 08 Jun 2008 23:15:13 GMT

Omar,

It is really very good article. Just need to know how can I implement “ScriptDeferFilter.cs” on VS 2005 project .

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Muhammad Yousaf Sulahria — Fri, 23 May 2008 21:18:20 GMT

Adsense for ScriptDeferFilter v2:

// See if script tag is ending

if (isScriptTag(content, pos))

{

/// Script tag just ended. Get the whole script

/// and store in buffer

pos = pos + "script>".Length;

string temp=new string(content, scriptTagStart, pos - scriptTagStart);

if ((temp.IndexOf("google_ad_client")==-1) && (temp.IndexOf("googlesyndication") == -1))

{

scriptBlocks.Append(content, scriptTagStart, pos - scriptTagStart);

scriptBlocks.Append(Environment.NewLine);

}

else

{

this.WriteOutput(content, scriptTagStart, pos - scriptTagStart);

}

lastScriptTagEnd = pos;

scriptTagStarted = false;

pos--; // continue will increase pos by one again

continue;

}

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

sanjay kr gupta — Thu, 01 May 2008 08:13:19 GMT

I was trying to implement this conecept on my application thank u

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

satish — Tue, 15 Apr 2008 19:30:13 GMT

Omar,

I was trying to implement this conecept on my application i have a auto complete text search box and the user types in by the time the page renders how to handle this scenarious and sometimes the output also behaves weirdly. Please update

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Adeel — Wed, 09 Apr 2008 08:50:32 GMT

if you use HttpWatch Professional, it shows all active connections used by the browser client. It wont show you exactly when the form tag will begin rendering, but you will be able to see the page download first and begin loading page elements such as images or javascripts. In the realtime transcript, it becomes quite clear that loading all js at the end makes for very fast page loading.

At coroflot.com, we had to do something about multiple css files called at the start of the page. The same techniques / filter can be used to consolidate all css into one single file, compress and then serve. We do it via an offline process, but it can be done automatically with this technique.

Lots of high profile system (such as communityserver.com) can get a nice boost with this.

Thanks for sharing all your web dev. IQ

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

omar — Wed, 09 Apr 2008 04:03:52 GMT

On my laptop, it takes about an avg 40ms more to filter out 20KB of html output. It's negiligble compared to the client side benefit we get. There can be 20% reduction on total RPS on the server, but we can always throw in more server power or optimize server side code to compensate for that small loss in RPS.

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Anil — Tue, 08 Apr 2008 21:10:45 GMT

Ican see the difference on your site. thanks for sharing

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

Sameeh — Tue, 08 Apr 2008 17:05:06 GMT

Good Idea Omar, but I think that you are serving the client at the expense of the server.

You added so much processing for filtering each page request that may lead to performance issue on server during heavy load.

Did you captured the time consumed by your new filter approach and compared it with the 1.5 sec?

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

omar — Mon, 07 Apr 2008 19:36:45 GMT

I haven't found any tool that can hook on browser and see when it starts rendering. So, I rely on my eye for now. As my goal is to improve perceived speed, not the actual speed, I have to look at the site and see how fast it 'feels'.

re: Fast page loading by moving ASP.NET AJAX scripts after visible content

borko — Mon, 07 Apr 2008 19:27:09 GMT

How can you measure the difference between this two solutions? Is there any way to measure the time which is passed between the request for the page and the moment when the page starts to render?