ASP.NET Core: 7 Tips to Reduce Page Load Times Drastically

Reducing the number of HTTP requests and optimizing HTTP responses in ASP.NET Core is one of the most effective ways to improve your application’s performance, responsiveness, and scalability. By minimizing the resources transferred between the client and server, you can drastically reduce page load times and optimize bandwidth usage. Below, we will explore different strategies and techniques for implementing this in your ASP.NET Core applications.

Why Minimize HTTP Requests and Responses?

Each HTTP request from a browser to a server incurs overhead, including network latency and resource loading times. This becomes more pronounced on websites that have many resources like images, scripts, and stylesheets. Furthermore, the size of HTTP responses can affect load times, especially for users with slower internet connections or mobile devices. By reducing the number of HTTP requests and optimizing responses, you can improve the user experience and lower server load.

1. Bundling and Minification of CSS and JavaScript

One of the most common ways to minimize HTTP requests is by bundling multiple CSS and JavaScript files into fewer files. Instead of sending individual requests for each CSS or JS file, you can serve one or two files, significantly reducing the number of HTTP requests.

Implementation in ASP.NET Core

ASP.NET Core no longer has built-in support for bundling and minification (as it did in older versions of ASP.NET MVC), but you can achieve it using external tools like Gulp, Webpack, or Grunt. Alternatively, you can use the BundlerMinifier package.

Example: Using BundlerMinifier

To bundle and minify your assets using the BundlerMinifier package:

1. Install the package via NuGet:

dotnet add package BuildBundlerMinifier

[
  {
     "outputFileName": "wwwroot/css/site.min.css",
     "inputFiles": [
       "wwwroot/css/bootstrap.css",
       "wwwroot/css/custom.css"
     ],
     "minify": { "enabled": true }
  },
  {
     "outputFileName": "wwwroot/js/site.min.js",
     "inputFiles": [
       "wwwroot/js/jquery.js",
       "wwwroot/js/custom.js"
     ],
     "minify": { "enabled": true }
  }
]

.icon {
  background-image: url('/images/spritesheet.png');
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-search {
  background-position: -10px -10px;
}

.icon-settings {
  background-position: -50px -10px;
}

Why it works:
By using a single image file, you reduce the number of HTTP requests, which can significantly improve performance, especially for mobile users and those on slower connections.

3. Use HTTP/2 Features

HTTP/2, a modern version of the HTTP protocol, comes with several features that help reduce the number of HTTP requests and improve performance, such as:

• Multiplexing: Multiple requests and responses can be sent over a single connection, reducing the need to open multiple connections.
• Header compression: HTTP/2 compresses headers, reducing the size of each request and response.
• Server push: The server can send resources (like CSS and JS files) to the client before it requests them.

How to Enable HTTP/2 in ASP.NET Core

1. Ensure your hosting provider or server supports HTTP/2 (e.g., IIS, Nginx, or Kestrel).
2. In ASP.NET Core, HTTP/2 is enabled by default when the server supports it. No special configuration is required in most cases.

Why it works:
HTTP/2 allows your application to use one connection to serve multiple requests simultaneously, significantly reducing the overhead associated with multiple HTTP requests.

4. Leverage Browser Caching

Browser caching allows you to store static resources (like images, CSS, and JavaScript) on the user’s local machine. This means that subsequent requests for the same resources don’t need to be fetched from the server.

How to Configure Caching in ASP.NET Core

In ASP.NET Core, you can configure caching headers to instruct browsers to cache certain resources. Here’s how to add caching for static files:

1. Open the Startup.cs file and modify the Configure method to add caching for static files:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=600");
        }
    });
}

dotnet add package Microsoft.AspNetCore.ResponseCompression

public void ConfigureServices(IServiceCollection services)
{
    services.AddResponseCompression(options =>
    {
        options.Providers.Add<GzipCompressionProvider>();
        options.EnableForHttps = true;
    });
}

public void Configure(IApplicationBuilder app)
{
    app.UseResponseCompression();
    // Other middlewares
}

<script src="script.js" defer></script>

Why it works:
By deferring non-essential JavaScript files, the browser can focus on rendering the HTML and CSS first, improving the user’s perceived performance.

7. Lazy Loading of Images

Loading all images on a page at once can slow down the page load time, especially if there are many large images. Lazy loading ensures that images are loaded only when they are visible to the user.

How to Implement Lazy Loading

In HTML, use the loading="lazy" attribute to defer loading images until they are needed:

<img src="large-image.jpg" loading="lazy" alt="Sample Image">

Why it works:
Lazy loading images reduces the initial load time of a page, improving the experience for users, especially on mobile devices with slower internet connections.

Conclusion

By minimizing HTTP requests and optimizing responses in ASP.NET Core, you can drastically improve the performance and user experience of your application. Techniques like bundling and minification, image sprites, caching, compression, and lazy loading can significantly reduce the overhead of loading a web page. These optimizations not only speed up load times but also reduce bandwidth usage, making your applications more efficient, scalable, and responsive.

By implementing these strategies, your ASP.NET Core application will be well-equipped to handle a larger number of users, and deliver faster and smoother performance, helping you meet today’s high standards for web development.

Yury Sobolev

Yury Sobolev is Full Stack Software Developer by passion and profession working on Microsoft ASP.NET Core. Also he has hands-on experience on working with Angular, Backbone, React, ASP.NET Core Web API, Restful Web Services, WCF, SQL Server.