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.

Download Word Document

Creating System StoredProcedures in SQL Server

What is System StoredProcedures

A system StoredProcedure is a general stored procedure which started with ‘sp_’. System StoredProcedures are stored into the master database in SQL Server.

Requirement of System StoredProcedure

There are instances when you are required to perform some operations on the different databases, like finding the dependency of the table (sp_depends), you use the system StoredProcedure. There are many System StoredProcedure already provided by the SQL Server. some of the most commonly used are:

  • sp_who
  • sp_depends
  • sp_help
  • sp_helptext

Each of the above provide some pre-defined functionality, but there are chances where you want your own functionality. In that case you can create your own System StoredProcedures. Just create a StoredProcedure with prefix ‘sp_’ in the master database and you are ready to go. Here I am showing one I have created for my ease.

Example

[code language=”SQL” light=”true”]
— ======================================
— Author:      Anant Anand Gupta
— Date:        2010-05-10
— Description: Return the number of
—              records in the Table
— ======================================</p>
<p>USE master
GO</p>
<p>IF  EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[sp_GetCount]’) AND type IN (N’P’, N’PC’))
DROP PROCEDURE [dbo].[sp_GetCount]
GO</p>
<p>CREATE PROCEDURE [dbo].[sp_GetCount] @TableName NVARCHAR(776)
AS
BEGIN
SET NOCOUNT ON
DECLARE @str NVARCHAR(1000)
SET @str = ‘Select Count(*) [Record Count] From ‘ + @TableName
EXEC (@str)
END
[/code]

Now you can execute the stored procedure in any database you want like this:

[code language=”SQL” light=”true” toolbar=”false”]
EXEC sp_GetCount ‘<TableName>’
[/code]

 

Extras

You can also create a keyboard shortcut for the above StoredProcedure to use quickly in between your SQL Code to find out the number of records in the selected table. Go to Tools -> Options -> Keyboard in SQL Server Management Studio. Select the text box in front of the predefined shortcuts which are not used. Enter the name of your StoredProcedure in the TextBox.

Click OK.

Open New Query Window (modifications are not registered with the windows already opened) for the required database. Enter the desired TableName and select the text and press your shortcut (Ctrl + 5 in my case). Here is your result

Enjoy and be more productive at your workplace !!!

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.

Windows 7 (Seven) Shortcuts

Here are few very nice and useful shortcuts available in Microsoft’s latest operating system Windows 7 (Seven):

Win + Home Minimize all the windows except the current window.
Win + SpaceBar Key Visible windows becomes transparent so you can see the desktop.
Win + Up Arrow Maximize the current window.
Win + Shift + Up Arrow Vertically Maximize the current window.
Win + Down Arrow Restore / Minimize the current window.
Win + Left Arrow Fit window in the left half of the screen.
Win + Right Arrow Fit window in the right half of the screen.
Win + Number (1-9) Open the in the order arranged in the taskbar.
Win + Ctrl + Number (1-9) Toggle the opened windows in same order as they are on taskbar
Win + Alt + Number (1-9) Open Jump List of the apps in the same order as they are on taskbar.
Win + T Focus the taskbar buttons to navigate in.
Win + B Focus the System Tray butoms to navigate in.
Ctrl + Shift + N Create New Folder in explorer or desktop.
Alt + Up Arrow Move up a directory level.
Alt + P Open/Close preview pan in explorer.
Win + P Select the display mode if multiple displays are attached.
Win + Num Pad (+/-) Magnifier Zoom In/Out.
Win + G Navigate in Desktop Gedgets
Win + L Lock Computer (old shortcut)
Win + Tab Windows 3D.

Design Patterns

What is a Design Pattern?

If you are here reading this post you might be looking a knowledge on Design Patterns and the first question which comes on anyone’s mind is “What is a Design Pattern?”. Lets answer this question in your own way.

You are person who know the syntax of a programming language and you are able to successfully convert any requirement into the code. One fine morning you reach office and your senior tells you about a new project requirement. You understood the requirement and have decided whats need to be done and what are the object of classes required to achieve this. But internally, whole the time from beginning to the end of the development you always know that there can be a better way to achieve this, and of course you search for other solutions to. Whatever you decide to implement you will finish off the task, but was that the best solution for the requirement? When this question comes in to you mind, the answer can be only given in terms of Design Patterns.

A design Pattern is nothing but a conceptual way to represent a reusable solution for a typical problem.

Here is a list of all known Design Patterns:

  1. Strategy Design Pattern
  2. Decorator Design Pattern
  3. Factory Design Pattern
  4. Observer Design Pattern
  5. Chain of Responsibility Design Pattern
  6. Singleton Design Pattern
  7. Flyweight Design Pattern
  8. Adapter Design Pattern
  9. Facade Design Pattern
  10. Template Design Pattern
  11. Builder Design Pattern
  12. Iterator Design Pattern
  13. Composite Design Pattern
  14. State Design Pattern
  15. Proxy Design Pattern
  16. Command Design Pattern
  17. Mediator Design Pattern
  18. Abstract Factory Design Pattern
  19. Prototype Design Pattern
  20. Bridge Design Pattern
  21. Interpreter Design Pattern
  22. Memento Design Pattern
  23. Visitor Design Pattern
  24. Circular Design Pattern
  25. Double Buffer Design Pattern
  26. Recycle Bin Design Pattern
  27. Model-View-Controller Design Pattern
  28. Model-View-View-Model Design Pattern

I will updating the details of each kind of design patterns as soon as they are ready to be posted.