Did you realize that the HTML generated to render an ASP.NET page can also hamper the performance of the application? This ASP.NET tutorial shows you a few common pitfalls that are seen in development cycles and often times are missed.
Clean the ASP.NET Web Project Supporting Files
The supporting files include the images, script and style sheets. Ensure that you keep this clean and only use what you require.
Clean your CSS files of the unnecessary styles. Similarly, the script files should not contain any unnecessary test scripts that were added during the development cycles. The same rule applies to the images that are being referenced either through the page HTML or CSS scripts and are not being used. These would get invoked during each page load and hinder the performance of the ASP.NET page.
If you ensure that this issue is addressed, then it reduces the size of the page and thus the time taken for the ASP.NET web page to load.
Place the ASP.NET Web Project Supporting Files in the Right Place
Place the supporting files in the proper places. For example, style sheets should be added to the header of the pages. Style sheets referenced at the header avoid the browser behavior that stops redrawing the page elements. These CSS files should be referred externally in the page.
You can even combine/compress the JS and CSS files.
The primary reason for pushing the JS and CSS elements to a separate file is to leverage the caching of the browser and decrease the HTML size of the ASP.NET page.
Is There Any Part of My HTML That is Useless to the Browser?
Take a look at the rendered HTML and ask this question to yourself and you may find many answers.
A few answers that I found looking at the rendered HTML over a period of time are mentioned below. These small steps help us reduce the size of the rendered ASP.NET page:
- White spaces in HTML for markup brevity: Remove the additional white spaces that form the markup. These are not a requisite and take up space on the HTML. These also add to page load time.
- Markup Comments: The browser does not need comments to understand the markup that it is going to render. So please feel free to remove unwanted comments on the page. They add up to the overall page size.
- Control Naming Conventions: Provide a shorter name but a meaningful name, to your controls. The longer the name, the larger the overall page size.
- Remove unnecessary links from the page: Verify every link that goes from your page, and remove unwanted ones.
- Remove unnecessary meta tags: Add only the meta tags that you require.
Avoid Opening New Windows
Avoid opening up windows from a web page. The customer would never be happy to have more than one window per website. There are various other techniques to show the popup data on the parent page itself. This includes stylish callout’s through css, and many other fancy techniques.
Although this technique does not improve the performance of the page, or does not qualify to be termed as a web developer’s mistake; this should be addressed by every web developer.
Don’t Forget to Complete the HTML Markup
Incomplete HTML tags form an invalid HTML. This happens during nesting of HTML controls inside one another. Use a good HTML editor and check for valid XML structure.
Look at the below section titled, “Profile using browser developer tools – and the W3C Markup Validator”. The W3C Markup Validator helps you achieve this. Microsoft Visual Studio IDE is also a good editor for HTML with some intellisense and automatic features.
Verify the ASP.NET Page Rendering Against All the Common Browsers
Your web page can be viewed in almost every browser of the world. And note that this can be of any version. You would need to ensure that your app renders well in at least two browsers and two latest versions of them.
How to prioritize the browser if you do not have time? Look at building generic CSS for the elements with the help of the web designers. And also do not forget to spend some time on Google Analytics. This would show you the breakdown of the browsers used by your visitors.
Microsoft Internet Explorer’s developer tools also have various browser modes to check the rendering of your web pages.
Browser incompatibility could drive your visitors away.
Use the Required Attributes in the Right Places
We need to use the mandatory attributes for HTML elements to increase the performance of a page. For example, we need to always specify the height and width of the HTML Image tag.
Profile Using Browser Developer Tools – and the W3C Markup Validator
In this technological era, your browser is your first test tool for profiling the performance of your rendered ASP.NET pages. You will find many mistakes before you go live.
Microsoft’s Internet Explorer provides “Developer Tools”. These can be invoked by pressing the “F12” Key. This loads a bunch of sections with detailed information. Select the Profiler tab, and start profiling. You will find a set of detailed stats.
Figure 1 – IE Developer tools
Google’s Chrome provides us with a richer profiling tool. It can be invoked by pressing “CTRL+ SHIFT + I”. Select the “Audit” tab, and the audits. Then click on the run button. You will be presented with results. The results are impressive as they tell you what you need to do to improve performance of your page with precise details.
Figure 2 – Google Chrome Developer Tools
And finally do not forget to validate your HTML markup with the W3C Markup validator.
Brush Up your HTML Knowledge
Stay up to date with HTML. There are many web development sites and RSS feeds that help you in this regard. One such website is the HTMLGoodies
Use the Right Set of Controls in the Right Places
The type of controls you choose impacts the page as it is rendered through different mechanisms. The usage of web-server ASP.NET controls increases the response time of the page. This is primarily due to the fact that they are processed on the web-server before they are ready to be rendered on the client side.
Use HTML controls instead of the ASP.NET web server controls wherever you don’t require them.
Display of static text content on a page is a primary candidate for this. Do not use images to display text. Instead use CSS attributes and apply style to them.
Figure 3 – Validate your HTML Markup with the W3C Markup Validator