Performance Issue - Simple Login Page

  1. #1

    Performance Issue - Simple Login Page

    Hello,

    I have been evaluating your Ext.Net beta release for quite a long time. Now I got approval from my project director to buy this. We are planning to commence the app development from March. But unfortunately I see performance issue when i use this library.

    I designed a simple login page and we have very good server. The initial loading alone takes more than 12-14 secs. I noticed that you add 2 style files and 4 JavaScript files for this simple login page. The total size of all these files is 780KB. I have pasted a sample code for your reference and kindly let us know if I am missing anything.

    If this problem is already taken care, We would like to go ahead with your tool. Kindly assist us.

    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate">
        </ext:ResourceManager>
        <ext:Viewport ID="Viewport1" runat="server">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North>
                        <ext:Panel ID="Panel2" runat="server" Height="80" Border="false">
                            <LoadMask Msg="Loading" ShowMask="true" />
                            <Content>
                                <ext:RowLayout ID="NorthRowLayout" runat="server">
                                    <Rows>
                                        <ext:LayoutRow>
                                            <ext:Panel ID="Panel1a" IDMode="Ignore" runat="server" Header="false" Border="false"
                                                BodyStyle="color:white" StyleSpec="width:100%; color:white" Height="55">
                                                <Content>
                                                    <ext:ColumnLayout ID="ColumnLayout1" runat="server">
                                                        <Columns>
                                                            <ext:LayoutColumn ColumnWidth="0.5">
                                                                <ext:Panel ID="Panel3" BodyStyle="background-position:bottom;background-repeat:repeat-x;background-image:url('Images/tabstrip.jpg');"
                                                                    Html="<div style='background-image:url(images/xxx.png);background-position:bottom;background-position:left;background-repeat:norepeat;background-repeat:no-repeat;height:55px;width:207px'></div>"
                                                                    Width="177" runat="server" Border="false">
                                                                </ext:Panel>
                                                            </ext:LayoutColumn>
                                                            <%--<ext:LayoutColumn ColumnWidth="1">
                                                                <ext:Panel ID="Panel7" BodyStyle="background-position:bottom;background-repeat:repeat-x;background-image:url('../../Images/xxx.jpg'); text-align:center"
                                                                    Html="<div style='background-image:url(../../images/per.jpg);background-position:bottom;background-position:left;background-repeat:norepeat;background-repeat:no-repeat;height:74px;width:556px'></div>"
                                                                    Width="556" runat="server" Border="false">
                                                                </ext:Panel>
                                                            </ext:LayoutColumn>--%>
                                                            <ext:LayoutColumn ColumnWidth="0.5">
                                                                <ext:Panel BodyStyle="background-position:bottom;background-repeat:repeat-x;background-image:url('Images/tabstrip.jpg'); color:#FFFFFF; text-align:right;"
                                                                    ID="Panel6" Width="177" runat="server" Border="false">
                                                                </ext:Panel>
                                                            </ext:LayoutColumn>
                                                        </Columns>
                                                    </ext:ColumnLayout>
                                                </Content>
                                            </ext:Panel>
                                        </ext:LayoutRow>
                                        <ext:LayoutRow>
                                            <ext:Panel ID="Panel4" IDMode="Ignore" runat="server" Header="false" Border="false"
                                                BodyStyle="color:white" StyleSpec="width:100%; color:white" Height="30">
                                                <Content>
                                                    <ext:ColumnLayout ID="ColumnLayout2" runat="server">
                                                        <Columns>
                                                            <ext:LayoutColumn ColumnWidth="1">
                                                                <ext:Panel ID="Panel5" BodyStyle="background-position:bottom;background-repeat:repeat-x;background-color:#3b5a76;"
                                                                    Html="<div style='width:100%; text-align:center; padding-top:6px' class='whiteTxt'></div>"
                                                                    Width="177" runat="server" Border="false">
                                                                </ext:Panel>
                                                            </ext:LayoutColumn>
                                                        </Columns>
                                                    </ext:ColumnLayout>
                                                </Content>
                                            </ext:Panel>
                                        </ext:LayoutRow>
                                    </Rows>
                                </ext:RowLayout>
                            </Content>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:Panel ID="Panel1aa" runat="server" Width="350" Height="245" BodyStyle="padding:9px;text-align:center;padding-top:30px;margin:auto;background:url('Images/xxx.jpg');background-repeat:no-repeat; background-color:white; background-position:right top"
                            BodyBorder="false">
                            <Items>
                                <ext:FormPanel ID="frmLogin" runat="server" Width="340" Height="205" Title="Login"
                                    BodyStyle="text-align:left; padding:9px" StyleSpec="text-align:left; margin:auto"
                                    Icon="LockGo" LabelAlign="Left">
                                    <Items>
                                        <ext:TextField ID="txtUserID" runat="server" FieldLabel="Login ID" Width="200" AllowBlank="false"
                                            StyleSpec="margin-top:2px" LabelStyle="margin-top:2px" LabelWidth="85">
                                        </ext:TextField>
                                        <ext:TextField ID="txtPassword" runat="server" FieldLabel="Password" InputType="Password"
                                            Width="200" AllowBlank="false" StyleSpec="margin-top:10px;margin-bottom:10px"
                                            LabelStyle="margin-top:10px" LabelWidth="85">
                                        </ext:TextField>
                                        <ext:ComboBox runat="server" FieldLabel="Student Group" Width="200" LabelWidth="85"
                                            Editable="false" AllowBlank="false" ID="cboStudentGroup">
                                            <Items>
                                                <ext:ListItem Text="Student" Value="1" />
                                                <ext:ListItem Text="Non Student" Value="2" />
                                            </Items>
                                        </ext:ComboBox>
                                        <ext:Label ID="Label1" FieldLabel="Enter your login credentials to access your dashboard"
                                            LabelStyle="width:300px; padding-top:10px; color:#3f5f7e" LabelSeparator=" "
                                            runat="server">
                                        </ext:Label>
                                    </Items>
                                    <Buttons>
                                        <ext:Button ID="Button2" runat="server" Icon="KeyGo" Text="Login">
                                            <Listeners>
                                                <Click Handler="if(#{frmLogin}.getForm().isValid()){ return fnAuthentication();  }else{return false;}" />
                                            </Listeners>
                                            <DirectEvents>
                                                <Click OnEvent="ValidateUser">
                                                    <EventMask Msg="Please wait" ShowMask="true" MinDelay="2000" />
                                                </Click>
                                            </DirectEvents>
                                        </ext:Button>
                                        <ext:Button ID="Button1" runat="server" Icon="Cancel" Text="Cancel">
                                            <Listeners>
                                                <Click Handler="#{frmLogin}.getForm().reset();" />
                                            </Listeners>
                                        </ext:Button>
                                    </Buttons>
                                </ext:FormPanel>
                                <ext:FormPanel ID="FormPanel2" runat="server" Width="265" Height="175" BodyStyle="text-align:left; padding-top:9px"
                                    StyleSpec="text-align:left; margin:auto; font-family:Arial; font-size:12px;"
                                    LabelAlign="Left" LabelWidth="75" BodyBorder="false">
                                    <Items>
                                        <ext:LinkButton ID="LinkButton1" Icon="LinkEdit" Text="Forgot Password?" runat="server"
                                            Disabled="true">
                                        </ext:LinkButton>
                                    </Items>
                                </ext:FormPanel>
                            </Items>
                        </ext:Panel>
                    </Center>
                    <South>
                        <ext:Panel ID="Panel1" runat="server" Height="20">
                            <TopBar>
                                <ext:Toolbar StyleSpec="color:white">
                                    <Items>
                                        <ext:Label ID="Label2" runat="server" FieldLabel="----------"
                                            StyleSpec="color:white" LabelSeparator=" ">
                                        </ext:Label>
                                        <ext:ToolbarFill>
                                        </ext:ToolbarFill>
                                        <ext:Label ID="Label3" runat="server" FieldLabel="---------------------" StyleSpec="color:white"
                                            LabelSeparator=" " Width="150">
                                        </ext:Label>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:Panel>
                    </South>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
    Last edited by geoffrey.mcgill; Feb 10, 2011 at 3:34 PM. Reason: please use [CODE] tags
  2. #2
    Hi,

    I reviewed your code sample and there's nothing in there that would appear to be causing that kind of delay.

    The server-side code for the "ValidateUser" DirectEvent Handler is missing, so I had to comment that out, but that shouldn't affect the initial Page_Load.

    We recommend setting the .Layout property instead of using inner Layout Controls. Using the .Layout property provides some nice markup optimisations and there is a theoretical speed improvement.

    Using the Firebug (for Firefox) profiler I noticed all your background-images (set in css) were not loading. This was causing a delay in loading those images as the browser waited/timed-out the requests. Maybe thats where you're seeing some extended delay. In the sample below I removed those calls as the image files where not provided.

    If those image files are large (file size), the obviously that will cause a loading delay.

    Here's your same code sample with optimisations.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Theme="Slate" />
            
            <ext:Viewport runat="server" Layout="border">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Region="North" 
                        Layout="row"
                        Height="80" 
                        Border="false">
                        <LoadMask Msg="Loading" ShowMask="true" />
                        <Items>
                            <ext:Panel 
                                runat="server" 
                                Layout="column"
                                IDMode="Ignore" 
                                Header="false" 
                                Border="false"
                                BodyStyle="color:white" 
                                StyleSpec="width:100%; color:white" 
                                Height="55">
                                <Items>
                                    <ext:Panel 
                                        runat="server" 
                                        ColumnWidth="0.5"
                                        Width="177" 
                                        Border="false"
                                        />
                                    <ext:Panel 
                                        runat="server" 
                                        ColumnWidth="0.5"
                                        Width="177" 
                                        Border="false"
                                        />
                                </Items>
                            </ext:Panel>
                            <ext:Panel 
                                runat="server" 
                                Layout="column"
                                IDMode="Ignore" 
                                Header="false" 
                                Border="false"
                                BodyStyle="color:white" 
                                StyleSpec="width:100%; color:white" 
                                Height="30">
                                <Items>
                                    <ext:Panel 
                                        runat="server"
                                        ColumnWidth="1"
                                        BodyStyle="background-position:bottom;background-repeat:repeat-x;background-color:#3b5a76;"
                                        Html="<div style='width:100%; text-align:center; padding-top:6px' class='whiteTxt'></div>"
                                        Width="177" 
                                        Border="false"
                                        />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel 
                        runat="server" 
                        Region="Center"
                        Width="350" 
                        Height="245" 
                        BodyBorder="false">
                        <Items>
                            <ext:FormPanel 
                                ID="frmLogin" 
                                runat="server" 
                                Width="340" 
                                Height="205" 
                                Title="Login"
                                BodyStyle="text-align:left; padding:9px" 
                                StyleSpec="text-align:left; margin:auto"
                                Icon="LockGo" 
                                LabelAlign="Left">
                                <Items>
                                    <ext:TextField 
                                        ID="txtUserID" 
                                        runat="server" 
                                        FieldLabel="Login ID" 
                                        Width="200" 
                                        AllowBlank="false"
                                        StyleSpec="margin-top:2px" 
                                        LabelStyle="margin-top:2px" 
                                        LabelWidth="85"
                                        />
                                    <ext:TextField 
                                        ID="txtPassword" 
                                        runat="server" 
                                        FieldLabel="Password" 
                                        InputType="Password"
                                        Width="200" 
                                        AllowBlank="false" 
                                        StyleSpec="margin-top:10px;margin-bottom:10px"
                                        LabelStyle="margin-top:10px" 
                                        LabelWidth="85"
                                        />
                                    <ext:ComboBox 
                                        ID="cboStudentGroup"
                                        runat="server" 
                                        FieldLabel="Student Group" 
                                        Width="200" 
                                        LabelWidth="85"
                                        Editable="false" 
                                        AllowBlank="false">
                                        <Items>
                                            <ext:ListItem Text="Student" Value="1" />
                                            <ext:ListItem Text="Non Student" Value="2" />
                                        </Items>
                                    </ext:ComboBox>
                                    <ext:Label 
                                        ID="Label1" 
                                        runat="server"
                                        FieldLabel="Enter your login credentials to access your dashboard"
                                        LabelStyle="width:300px; padding-top:10px; color:#3f5f7e" 
                                        LabelSeparator=" "
                                        />
                                </Items>
                                <Buttons>
                                    <ext:Button ID="Button2" runat="server" Icon="KeyGo" Text="Login">
                                        <Listeners>
                                            <Click Handler="if(#{frmLogin}.getForm().isValid()){ return fnAuthentication();  }else{return false;}" />
                                        </Listeners>
                                        <%--<DirectEvents>
                                            <Click OnEvent="ValidateUser">
                                                <EventMask Msg="Please wait" ShowMask="true" MinDelay="2000" />
                                            </Click>
                                        </DirectEvents>--%>
                                    </ext:Button>
                                    <ext:Button ID="Button1" runat="server" Icon="Cancel" Text="Cancel">
                                        <Listeners>
                                            <Click Handler="#{frmLogin}.getForm().reset();" />
                                        </Listeners>
                                    </ext:Button>
                                </Buttons>
                            </ext:FormPanel>
                            <ext:FormPanel 
                                runat="server" 
                                Width="265" 
                                Height="175" 
                                BodyStyle="text-align:left; padding-top:9px"
                                StyleSpec="text-align:left; margin:auto; font-family:Arial; font-size:12px;"
                                LabelAlign="Left" 
                                LabelWidth="75" 
                                BodyBorder="false">
                                <Items>
                                    <ext:LinkButton 
                                        ID="LinkButton1" 
                                        Icon="LinkEdit" 
                                        Text="Forgot Password?" 
                                        runat="server"
                                        Disabled="true"
                                        />
                                </Items>
                            </ext:FormPanel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel 
                        runat="server" 
                        Region="South" 
                        Height="20">
                        <TopBar>
                            <ext:Toolbar runat="server" StyleSpec="color:white">
                                <Items>
                                    <ext:Label 
                                        ID="Label2" 
                                        runat="server" 
                                        FieldLabel="----------"
                                        StyleSpec="color:white" 
                                        LabelSeparator=" "
                                        />
                                    <ext:ToolbarFill runat="server" />
                                    <ext:Label 
                                        ID="Label3" 
                                        runat="server" 
                                        FieldLabel="---------------------" 
                                        StyleSpec="color:white"
                                        LabelSeparator=" " 
                                        Width="150"
                                        />
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Geoffrey McGill
    Founder
  3. #3
    Hi,

    Do you have the same performance issue with online examples?
    https://examples2.ext.net/
  4. #4
    Hi,

    Can you confirm that you are getting these long times on a separate web-server or your local machine? The web-server used by Visual Studio on the local dev machine is terribly slow and I have seen some examples where pages load slowly.

    I ask because there's nothing really different in your sample than what we're building in the Examples Explorer (https://examples2.ext.net/).
    Geoffrey McGill
    Founder
  5. #5
    Hi,

    I get this performance issue when i run this from a separate webserver.

    Here is the URL:

    Our Sample:
    http://204.93.197.208:8080/ExtSample/loginsample.aspx

    Sample Copied from examples.ext.net
    http://204.93.197.208:8080/ExtSample/extlogin.aspx

    Non-Ext application [This page is very fast comparing the Ext pages]
    http://204.93.197.208:8080/SampleLogin/MemberLogin.aspx

    I dont see any performance issue when I use your examples.ext.net.

    Note: I have just deployed this on our dev server. We do have one more server (Amazon Instance) and we get the same performance issue even there.

    J
  6. #6
    Quote Originally Posted by johnrr1985@gmail.com View Post
    Hi,

    I get this performance issue when i run this from a separate webserver.

    Here is the URL:

    Our Sample:
    http://204.93.197.208:8080/ExtSample/loginsample.aspx

    Sample Copied from examples.ext.net
    http://204.93.197.208:8080/ExtSample/extlogin.aspx

    Non-Ext application [This page is very fast comparing the Ext pages]
    http://204.93.197.208:8080/SampleLogin/MemberLogin.aspx

    I dont see any performance issue when I use your examples.ext.net.

    Note: I have just deployed this on our dev server. We do have one more server (Amazon Instance) and we get the same performance issue even there.

    J
    I viewed all three in Firefox with Firebug profiler running and they all load very fast for me. I cleared the cache between each load.

    Just over 1 second.

    Sample Copied from examples.ext.net
    http://204.93.197.208:8080/ExtSample/extlogin.aspx
    Just over 1 second

    Non-Ext application [This page is very fast comparing the Ext pages]
    http://204.93.197.208:8080/SampleLogin/MemberLogin.aspx
    Just under 1 second.

    Here's a couple comments:

    1. Your 3rd example does not include any JavaScript files. The 3rd sample is not really a fair comparison to the other two which are pre-loading all the base .js files for your application. They are then cached.

    2. For some reason you have turned gzip compression off. There is an approx 70% reduction in file size sent over-the-wire with gzip turned on. You are sending approx 300% (3x) more in file size than what is required. Obviously that will slow things down.

    Summary: All three of those pages load very fast for me.

    Hope this helps you narrow down the problem.
    Last edited by geoffrey.mcgill; Mar 08, 2011 at 4:28 PM.
    Geoffrey McGill
    Founder
  7. #7
    Maybe some others can chime in and run your sample pages and report back with their profiler results.
    Geoffrey McGill
    Founder
  8. #8
    http://204.93.197.208:8080/SampleLogin/MemberLogin.aspx
    Fast (~1sec), even uncached (Ctrl+F5)

    http://204.93.197.208:8080/ExtSample/loginsample.aspx
    Cached: fast (~1sec), uncached: slow (about 10-15 sec.)

    http://204.93.197.208:8080/ExtSample/extlogin.aspx - slow
    Cached: fast (~1sec), uncached: slow (about 10-15 sec.)

    Edit: Tested with FF and IE - if that matters
  9. #9

    Here you go

    Here's i'm just try it using Http Watcher Software..
    Here's the result for last 3 webserver.

    I think, it's fair, since your browser should download extjs script.
    and your page doesn't need to download js. I know there is BrowserDetect.js in your page.
    but it's never downloaded by profiler coz it's doesn't exists.. :D

    Here i've the include result too..

    http://ifile.it/pu26k3g/Profiler.zip
    Apakekdah

Similar Threads

  1. Problem to Redirect To Login Page
    By aniketyadav7 in forum 1.x Help
    Replies: 6
    Last Post: Feb 23, 2012, 7:29 AM
  2. Replies: 0
    Last Post: Feb 23, 2012, 6:18 AM
  3. [CLOSED] About login page status and Performance Analyzer
    By nirajrdave in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 27, 2011, 7:35 AM
  4. [CLOSED] Simple use of enter key (login)
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 05, 2010, 8:57 AM
  5. login page style(scroll) problem
    By latif in forum 1.x Help
    Replies: 0
    Last Post: Dec 18, 2009, 11:55 AM

Posting Permissions