IntroductionThe performance is important for all website. So if a web page size is increased then loading time also increase. In this tip I will show how is label control increase page size and what is best control instead label control have to use in page in order to reduce size and increase loading speed. Demo with Label ControlHtml Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="0" border="0" width="100%">
<tr>
<td>
Name :<asp:Label ID="lblName" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>
Address :<asp:Label ID="lblAdd" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>
Salary :<asp:Label ID="lblSal" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
</form>
</body>
</html>
In have include three label controls on this page, let’s run and see output Demo with Literal ControlHtml Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page2.aspx.cs" Inherits="Page2" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="0" border="0" width="100%">
<tr>
<td>
Name :<asp:Literal ID="lblName" runat="server" Text=""></asp:Literal>
</td>
</tr>
<tr>
<td>
Address :<asp:Literal ID="lblAdd" runat="server" Text=""></asp:Literal>
</td>
</tr>
<tr>
<td>
Salary :<asp:Literal ID="lblSal" runat="server" Text=""></asp:Literal>
</td>
</tr>
</table>
</form>
</body>
</html>I have added three literal control, lets run and see output Why size is increased in first than second Page?When we use the label control in rendering with span html tags in browser, but literal control does not add any extra html tags. Let’s see generated html for both demonstration. First take look label control demo. Page size: 977 bytes Now take look generated html for literal demo. Page size: 894 bytes So as per demonstration example just with three fields we have save 81bytes.if we used 20 labels in page, the size increased 0.5KB and its increase page load time unreasonably.
Note: But if you want to access values after page render, then you must use the label control, because you cannot find the literal with id in server side. ConclusionIn this article you have learned how to reduce page size and increase page load speed with literal control. So when you are design page, you have to choice correct control at same time keep mind your page size does not increase by unnecessary.Hopes help and thank for reading. |