Website Optimization: Try to Escape from 404 – Page Not Found
Article ID : Tip-003
Article Topic : Website Optimization
Article Title : Try to Escape from 404 - Page Not Found
Preface
Wen client always creates a request for the resources referenced in the page it is rendering and if server can’t find it sends 404 – Page Not Found.
Explanation
When we create a website with a number of webpages and embedded resources like images (in HTML and CSS), JavaScript Files or Cascading Style Sheets, it is well obvious that we may skip something to include or we have referenced which is not present in the application. If this missing is visible, it can be caught and taken care. But, what if it is not visible?
Let’s talk about the favicon.ico. Microsoft started the concept of the favorite’s icon with IE 4. Since then the trend is started ad is adopted by major browsers to fetch and display the favorite’s icon in the address bar o on the tabs icon (for the bowsers supporting tabs). Earlier the concept was to fetch this icon only when the page is added to the favorite’s menu. But today if the browser has no previous visit recorded for the site the page belongs to will create a domain/favicon.ico request. Once the data is fetched it will cached by the browsers. But if the server returns 404 Error it will try to get that every time the page is requested from the domain.
Most of the cases even after the deployment is over for the site we skip this small thing favicon.ico to be included in the application root and the server is bothered again and again by the requests to provide the information which actually it doesn’t have. Every time without getting frustrated it calmly says 404 – Page Not Found.
How to Resolve
You can avoid this very common situation specifically for the icon case by
- Using a favicon.ico file in the root of the application.
- Specifying the page icon in the header of the page.
There a number of tools available out there in the market (freeware or paid), which can help you find out the web requests and response for your browser. Using them you can identify what is requested and what you have received in response. Fiddler is a free tool used for the same purpose.
Conclusion
Any request which cannot be fulfilled by the server is a burden to the server and to the network and to the client who is making that request. We can actually avoid them by using little cautiousness.
Website Optimization: Serve Resources from Different Hosts
Article ID : Tip-002
Article Topic : Website Optimization
Article Title : Serve Resources from Different Hosts
Preface
Today all modern browsers are multi-threaded. Means they can server the contents while downloading more than one resource simultaneously. But there are still a few restrictions. There can’t be more than 2 parallel requests threads from the same host.
Explanation
When your browser finds an embedded resource in your web page it creates a request from the host to deliver that resource. The browser adds these requests in the host wise resource download queue where they are served on the FIFO basis. If two resources are on the same host and the third one is on the other host it may be possible that you are receiving the third one before the first or second are downloaded. Here are few facts:
| 1. | Resource Download Queue |
| Each browser adds the resource request in a download queue. While parsing the HTML contents if the browser comes across any embedded resource like an image file or a style sheet file. It will add it to the download queue. | |
| 2. | Priority on the Bases of Resource Type |
| Every embedded resource download request will go into the queue as and when the parser comes across it and continue to parse the rest. In case of a JavaScript file however the case is bit different. If the browser finds a script file embedded in the Webpage it will stop parsing the rest of the page and will wait for that file to be downloaded first. So if that file is late in the queue, the wait and parsing time is high. | |
| 3. | Number of Requests per Host |
| Today the browsers are multithreaded to serve the content by parallel download and reduce the wait time. But according to the ISDN rule this limited to 2 parallel connections to the same host. So if there are more files embedded in a Webpage. It is going to take a considerably high time to fetch those resources. |
How to Resolve
If the contents are served from different hosts the browser can create separate threads for them and have them downloaded parallel. However actually it impossible to have the separate host for each resource, we can have the separate hosts for different type of resources. In real scenarios having separate resource type hosts are also difficult, so we can fool the browser by serving the resources from different Subdomains, like Images from image.domain.com and scripts from script.domain.com. Here are a few points in short
- Create the separate Subdomains for different type of objects.
- Separate user images from the interface images and serve them from different Subdomains.
- You can use the alias in place of actually creating subdomain in the DNS server like image.domain.com -> domain.com. However efficiency is at its max when you have not more than 4 alias per domain.
Conclusion
In case of rich user interface sites where there are high number of images and media files are embedded this technique is quite useful. Simply split the resources across multiple hosts and serve your users a much faster.
Website Optimization: Reduce Total Number of Objects per Web Page
Article ID : Tip-001
Article Topic : Website Optimization
Article Title : Reduce Total Number of Objects per Web Page
Preface
Whenever a web page is requested from the server, the browser also seeks the embedded objects like style sheets, script files, images, media files etc. and tries to download them along with them. Each download creates a web request.
Explanation
A web page design always consists of various numbers of embedded objects. But sometimes the good UI comes out to be expensive for the user’s time prospective. A user can wait for a page to be loaded with in an average of 10 sec without feedback (refreshing / retrying). Reducing the number of objects in page can reduce the wait time effectively. Here are a few facts.
| 1. | Average Header Size |
| Each response consists of a header along with the contents, which is of approximately 512 bytes. Consider there are a number of images which are well optimized to reduce their size, but this header information will also be added to the each image download. For a page containing 100 such images will have to download 25 additional KBs, which is huge even the image size is very less. | |
| 2. | Round-Trip Latency |
| Each request has its legacy time of average 0.2 seconds for the completion of a round trip. So with a page having the 100 objects will delay in loading for 20 seconds irrespective of the speed of the internet connection. | |
| 3. | Packet Loss |
| There is approximate 0.7 percent of the loss of the data in a packet transferred, which will be requested again from the server. Each request creates its own packet of bytes and will lead in to more loss and recovery cycles. |
How to Resolve
Even if the page is optimized for the size of objects, there are a few other things which play a considerable role in the website optimization. Reducing number of embedded objects is one of them. Here are a few tips how we can achieve that.
- Stitch Images together (create a sprite).
- Combine the different style sheets into one on the bases of their media type like screen, print etc.
- Combine the script files according to their features and functionality.
Conclusion
There are situations where there it is required to have many number of embedded objects in a page, but still we should try to reduce the number to 20/page and should use the cache-able objects so that they are not requested again and again on every time a page is requested.
How To: Provide Save File Dialog for an Image Request in ASP.Net
It is the default behavior of the web browsers, when you click on the image link, to open the image and display it over there. There are instances when you might want your users to remain on the page and simply download and save the image after clicking on the image link.
This functionality can be achieved in ASP.Net. Here I am going to show how to:
Create a blank ASP.Net Web Application. Now you have to create a folder to store the image to be downloaded and add and image to it.
Your solution should look similar to this:
Open the Default.aspx and create a HyperLink to the image like this:
<asp:HyperLink ID="hlDownloadImage" runat="server" NavigateUrl="~/Images/image001.jpg?Action=Download">Download Image</asp:HyperLink>
Note that the image URL is having additional parameter "Action" with value "Download". We will see the utilization of the same in a moment.
now go and add a new file of Type ASP.Net Module ImageDownload.cs to the solution and modify the code as below:
public class ImageDownload : IHttpModule
{
#region IHttpModule Members
public void Dispose() { }
public void Init(HttpApplication context)
{
context.BeginRequest += new EventHandler(context_BeginRequest);
}
#endregion
public void context_BeginRequest(object sender, EventArgs e)
{
HttpApplication app = (HttpApplication)sender;
HttpRequest req = app.Request;
HttpResponse res = app.Response;
if (req.Params["Action"] != null && req.Params["Action"].ToString() == "Download")
{
string path = req.AppRelativeCurrentExecutionFilePath;
res.ContentType = "image/jpeg";
res.AppendHeader("Content-Disposition", "attachment; filename=" + Path.GetFileName(path));
res.TransmitFile(app.Server.MapPath(path));
res.End();
}
}
}
Modify the web.config file to include following in <httpModules> section:
<add name="ImageDownload" type="WebUploadManager.ImageDownload"/>
You are done. Run the application and click on the Link for the image and you will see the Run/Save dialog. Try removing the Action parameter from the NavigationURL of the hyperlink; image will be displayed on screen as the default behavior of the browser.
Server.MapPath
In general whenever we need to get physical location of the file in ASP.Net Application, we use Server.MapPath. This is the most commonly adopted method. If you want the file to be located with reference to the path of the current WebPage, then the implementation holds good, but, in case you have to always refer the file from the application root, this method gives you different results. Take the following scenario, where the application directory structure is as follows:
- Root
- Data
- Data.XML
- ClassA.cs (uses Server.MapPath("\Data\Data.XML"))
- ClassB.cs (uses ClassA to get the XML file contents)
- SubDir
- ClassC.cs (uses ClassA to get the XML file contents)
- Data
In the above scenario the ClassC will fail to retrive the contents in case of the WebApplication is hosted in a virtual directory. The application will work fine if it is a website. So the implementation will not show any errors when we run the application from the Visual Studio. to make it more generic we can replace the Server.MapPath with
System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath + @"Data\Data.XML".