ASP.NET: how to load page faster

Question

We wrote Portal with ASP.NET. But it has many Javascripts and our pages loading slow. In some page , page size is amount 1.5 mb! What is the best way to reduce or compress p

Answer 1

There are so many different things you could do. Any easy one is to implement compression.

On my site, I have this in my web.config file:

<system.web>
    <httpModules>
        <add name="CompressionModule" type="Utility.HttpCompressionModule"/>
    </httpModules>
</system.web>

and this is the HttpCompressionModule:

public class HttpCompressionModule : IHttpModule
{
    /// <summary>
    /// Initializes a new instance of the <see cref="AjaxHttpCompressionModule"/> class.
    /// </summary>
    public HttpCompressionModule()
    {
    }

    #region IHttpModule Members

    /// <summary>
    /// Disposes of the resources (other than memory) used by the module that implements <see cref="T:System.Web.IHttpModule"/>.
    /// </summary>
    void IHttpModule.Dispose()
    {

    }

    /// <summary>
    /// Initializes a module and prepares it to handle requests.
    /// </summary>
    /// <param name="context">An <see cref="T:System.Web.HttpApplication"/> that provides access to the methods, properties, and events common to all application objects within an ASP.NET application</param>
    void IHttpModule.Init(HttpApplication context)
    {
        context.BeginRequest += (new EventHandler(this.context_BeginRequest));
    }

    #endregion

    /// <summary>
    /// Handles the BeginRequest event of the context control.
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    void context_BeginRequest(object sender, EventArgs e)
    {
        HttpApplication app = (HttpApplication)sender;
        string encodings = app.Request.Headers.Get("Accept-Encoding");
        Stream baseStream = app.Response.Filter;


        if (string.IsNullOrEmpty(encodings))
            return;

        string url = app.Request.RawUrl.ToLower();

        if (url.Contains(".js") || url.Contains(".css") || url.Contains("ajax.ashx"))
        {

            encodings = encodings.ToLower();

            if (encodings.Contains("gzip") || encodings == "*")
            {
                app.Response.Filter = new GZipStream(baseStream, CompressionMode.Compress);
                app.Response.AppendHeader("Content-Encoding", "gzip");

            }
            else if (encodings.Contains("deflate"))
            {
                app.Response.Filter = new DeflateStream(baseStream, CompressionMode.Compress);
                app.Response.AppendHeader("Content-Encoding", "deflate");
            }
        }
    }
}

Maybe you could try something similar.

Another thing you could do is minify your javascript and css. This means to do things like replace long variable names with short ones, and to remove comments and whitespace. You could include something that does this in your build scripts. My site uses python for its buildscripts, and they are very long and convoluted so I won't post them here. There is an older question on SO about writing a python script to minify css, which may give you a good place to start: Link.

Answer 2

• Combine, minify and gzip your CSS into one file.
• Combine and minify your JavaScripts files into one file.
• Put your images, CSS and JS file on a CDN.
• Depending on your IIS version, there are page compression options.

Also, don't forget about ViewState. Turn it off when not needed, it can dramatically increase your page size.

Answer 3

Several things:

1. Minimize your javascript and CSS files. Google has a nice minimizer for JS.
2. Cache images, js files and css files. Info on how to do this from IIS, here.
3. Disable ViewState if you can or at least enable it only on the controls that need it.
4. Use compression on IIS
5. Use a content delivery network (CDN) to deliver javascript libraries such as jQuery, etc.
6. Optimize your images using Smush.it
7. Put javascript code at the bottom of the page so that the page starts rendering faster
8. If you use JSON for data interchange between the UI and the backend, make sure you compress it, too.
9. Use sprite me to create sprites for your image icons, backgrounds, etc.