AJAX - Initial Page Load is Slow

Discussion in 'ASP.NET 2.0' started by psantiago, Feb 16, 2007.

  1. My Page takes in an Email address and then querys the database to return a listing of records.
    If the user wants to be emailed the listing there is a checkbox.


    Pageuses a server side button,a text box,a checkboxand a grid.


    I use some validation that the field contains a value and validation that it is proper format. (EMAIL).


    The bulk of the content is loaded via User Controls. The user Controls use Caching.


    <%@ OutputCache Duration="3600" VaryByParam="none"%>


    By quick glance can anyone see why it might take5 seconds to first load?
    The Page can be viewed at: http://bankstaffers.net/ActiveJobListings.aspx



    The code behind page has a page load event...



    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load


    If ((IsPostBack = True) And (CheckBox1.Checked = True)) Then


    Dim EmailAddr As String


    EmailAddr = Request.Form("email")


    SendActivePosts(EmailAddr)


    End If


    End Sub











    <%@ Page Language="VB" AutoEventWireup="false" EnableSessionState="false" CodeFile="ActiveJobListings.aspx.vb" Inherits="ActiveJobListings" %>


    <%@ Register TagPrefix="leftInc" TagName="left" Src="Left.ascx" %>


    <%@ Register TagPrefix="centerInc" TagName="center" Src="Center.ascx" %>


    <%@ Register TagPrefix="footerInc" TagName="footer" Src="Footer.ascx" %>


    <%@ Register TagPrefix="MetaTagsInc" TagName="MetaTagsx" Src="MetaTagControl.ascx" %>


    <MetaTagsInc:MetaTagsx id="MetaTags1" runat="server"></MetaTagsInc:MetaTagsx>


    </HEAD>





    <!-- Begin the HEADER ADS-->


    <!-- Begin the HEADER ADS-->


    <!--Tab1 -->


    <TABLE cellSpacing="0" cellPadding="0" width="760" border="0">


    <TBODY>


    <TR vAlign="top">


    <TD bgcolor="#BDD2E6" width="140">


    <!--BEGIN LEFT PANE-->


    <DIV>


    <leftInc:left id="LeftSide" runat="server"></leftInc:left>


    </DIV>


    </TD> <!-- END Left Side-->


    <TD>


    <TABLE cellSpacing="0" cellPadding="3" width="602" border="0">


    <TBODY>


    <TR vAlign="top">


    <!-- BEGIN Center Page-->


    <centerInc:center id="Center1" runat="server"></centerInc:center>


    <!-- END Center Page-->


    <!-- BEGIN Right Side of Page -->


    <TD width="630">


    <DIV>


    <TABLE id="Table3" cellSpacing="0" cellPadding="1" width="600" border="0">


    <TR vAlign="top">


    <TD>


    <IMG height="1" alt="" src="images/clearpixel.gif" width="4" border="0">


    <a href="http://www.bankstaffers.net">


    <IMG id="Banner1" title="Banking jobs for banking staff in the banking industry. Banking jobs listed by bank and salary New York City for Banking and Finance jobs in New York City banks" height="60" alt="Banking jobs for banking staff in the banking industry. Banking jobs listed by bank and salary New York City for Banking and Finance jobs in New York City banks"


    src="images/BankStaffers.net_-_CustomerNBanner.gif" width="580" border="0"></a>


    </TD>


    </TR>


    <tr>


    <td>


    <IMG height="10" alt="" src="images/clearpixel.gif" width="1" border="0">


    </td>


    </tr>





    <tr>


    <td><center>


    <form id="GetActive" runat="server">


    <asp:ScriptManager ID="ScriptManager1" runat="server">


    </asp:ScriptManager>


    <TABLE id="Table5" bgcolor="#BDD2E6" cellSpacing="0" cellPadding="1" width="580" border="0">


    <tr>


    <td>


    <SPAN style="FONT-SIZE: 8pt; FONT-FAMILY: Arial,Helvetica,Geneva,Sans-serif">


    View / Receive your Active Job Postings


    </SPAN></B>


    </td>


    </tr>


    </table>


    <TABLE id="Table6" bordercolor=lightblue cellSpacing="0" cellPadding="4" width="580" border="1">


    <tr>


    <td valign="middle" width="580">


    <SPAN style="FONT-SIZE: 8pt; FONT-FAMILY: Arial,Helvetica,Geneva,Sans-serif">


    &amp;nbsp;&amp;nbsp;Enter Email Address:</b>





    &amp;nbsp;&amp;nbsp;<input type="text" id="email"


    value="" size="30" maxlength="50"


    runat="server" tabindex="1" style="BACKGROUND-COLOR: #ffffa0" NAME="email"/>


    <asp:RequiredFieldValidator id="valRequiredEmail"


    runat="server"


    ControlToValidate="email"


    ErrorMessage="* You must enter your Email address."


    Display="dynamic"/>


    <asp:RegularExpressionValidator id="valValidEmail"


    runat="server"


    ControlToValidate="email"


    ValidationExpression=".*@.*\..*"


    ErrorMessage="* You must enter a valid Email address"


    Display="dynamic"/>


    </SPAN>


    </td>


    </tr>


    <tr>


    <td valign="middle" width="580">


    <SPAN style="FONT-SIZE: 8pt; FONT-FAMILY: Arial,Helvetica,Geneva,Sans-serif">


    &amp;nbsp;&amp;nbsp;Receive Listing Via Email:</b>





    &amp;nbsp;&amp;nbsp;<asp:CheckBox checked=false ID="CheckBox1" runat="server" />


    </td>


    </tr>


    </table>





    <asp:UpdateProgress ID="UpdateProgress1" runat="server">


    <ProgressTemplate>


    <div class="progress">


    <img src="images/indicator.gif" alt="processing" />


    Processing......


    </div>


    </ProgressTemplate>





    </asp:UpdateProgress>


    </center>


    &amp;nbsp;&amp;nbsp;<asp:Button ID="Button1" runat="server" Text="View Postings" />








    <asp:UpdatePanel ID="UpdatePanel1" runat="server">


    <ContentTemplate>








    <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Pkkey" DataSourceID="ObjectDataSource1" ForeColor="#333333" GridLines="None">


    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />


    <Columns>


    <asp:BoundField DataField="Pkkey" HeaderText="Pkkey" InsertVisible="False" ReadOnly="True"


    SortExpression="Pkkey" Visible="False" />


    <asp:BoundField DataField="JobTitle" HeaderText="JobTitle" SortExpression="JobTitle" />


    <asp:BoundField DataField="Identifier" HeaderText="Identifier" SortExpression="Identifier" />


    <asp:BoundField DataField="DatePosted" HeaderText="DatePosted" SortExpression="DatePosted" />


    <asp:BoundField DataField="DateExpires" HeaderText="DateExpires" SortExpression="DateExpires" />


    <asp:BoundField DataField="FromEmail" HeaderText="FromEmail" SortExpression="FromEmail"


    Visible="False" />


    <asp:HyperLinkField DataNavigateUrlFields="Identifier" DataNavigateUrlFormatString="jobsok.aspx?jobid={0}"


    DataTextField="Identifier" HeaderText="Review Job" />


    </Columns>


    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />


    <RowStyle BackColor="#EFF3FB" />


    <EditRowStyle BackColor="#2461BF" />


    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />


    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />


    <HeaderStyle BackColor="#BDD2E6" Font-Bold="True" Font-Size="Small" Font-Names="Helvetica,Geneva,Sans-serif" ForeColor="Black" />


    <AlternatingRowStyle BackColor="White" />


    </asp:GridView>








    </ContentTemplate>


    <Triggers>


    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />


    </Triggers>


    </asp:UpdatePanel>


    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"


    SelectMethod="GetData" TypeName="GetActiveJobsTableAdapters.GetUserActivePostingsTableAdapter">


    <SelectParameters>


    <asp:FormParameter FormField="email" Name="Email" Type="String" />


    </SelectParameters>


    </asp:ObjectDataSource>











    </form>


    </td>


    </tr>


    <tr>


    <td>


    <IMG height="10" alt="" src="images/clearpixel.gif" width="1" border="0">


    </td>


    </tr>





    </table>


    <!-- END Right Side of Page -->


    </DIV>


    </TD>


    </TR>


    </TBODY>


    </TABLE>


    <!-- Footer Begin -->


    <footerInc:footer id="Footer1" runat="server"></footerInc:footer>


    <!-- Footer END -->


    </TD>


    </TR>


    <!-- tab1-->


    </TBODY>


    <!-- tab1-->


    </TABLE>


    </BODY>


    </HTML>
     
  2. FYI

    DEBUG = False in web.config.

    I do not have any HTML in the Update Panel
     
  3. Scott Guthrie posted about this earlier today.
    You can ZIP up your content and send it to him for evaluation...




    Just to summarize the performance tips:


    1) Make sure that <compilation debug="false"/> is set in your web.config file. When debug="true" ASP.NET AJAX will send down much larger JavaScript files with additional debug checks within them.


    2) Make sure you are using the latest ASP.NET AJAX Control Toolkit (and not an older one). This will ensure it is compatible with ASP.NET AJAX 1.0, and has the latest bug fixes and perf tunings


    2) Make sure that the ASP.NET AJAX Control Toolkit .dll assembly is built in release mode (and not debug mode). This ensures that its script files are also small and optimized.


    I believe all of the issues I've seen with regard to performance are addressed by one of the above 3 items. If you are still seeing issues, please send me mail ([email protected]) that contains the following information:


    1) The .aspx and code-behind source for the page that is slow


    2) The HTML output of the page that is generated (do a view-source in the browser and save the output to a .txt file)


    3) Details on which browser you are using to hit the site, and what browser version you are using


    4) Your web.config file and a copy of the ASP.NET AJAX Control Toolkit assembly if you are using it


    Thanks,


    Scott
     

Share This Page