UmbraCare LOGO

Optimizing Scripts in Umbraco - Bundling and Minification

Boost your Umbraco v8 site's speed and SEO. Learn the importance and how-to of script bundling and minification using Microsoft.AspNet.Web.Optimization library.

Published on: , by:
Wojciech Tengler
Wojciech Tengler
Piotr Bach
Piotr Bach
Umbraco .NET Core SEO

Table of contents

Introduction

Speed is an essential factor in a website’s user experience and search engine rankings.

One of the critical methods to enhance the performance of your Umbraco website is by implementing bundling and minification.

Let's delve into this technique using Microsoft.AspNet.Web.Optimization library.

Note: Before proceeding, ensure you've grasped the basics of bundling and minification in ASP .NET from our previous article.

Setting Up Bundling & Minification in Umbraco

To streamline the bundling and minification process in Umbraco:

  1. Install Web.Optimization Package: Begin by installing the Microsoft.AspNet.Web.Optimization library.
  2. Define Your Bundles: Create the BundleConfig.cs class and define your JavaScript/CSS bundles within.
  3. Force Optimization: This ensures that your resources are always optimized, even during development.
  4. Integrate with Umbraco: Properly register the bundling engine during your application's startup.

By following these steps, you can seamlessly integrate bundling and minification helpers into your Views, rendering optimized scripts efficiently.

Registering Bundles in Umbraco

For best practices, use the Umbraco Composing technique.

If you’re new to components and composers, refer to this in-depth tutorial.

Step-by-Step Guide:

  1. Folder Creation: First, establish a new folder named Compose.
  2. Class Initiation: Within the folder, instantiate a class, preferably named BundleComponent. Ensure this class has an Initialize() method.
  3. Wire Up the BundleConfig: Use the application startup to integrate the BundleConfig.

Here's a snippet to showcase the process:

public class BundleComponent : IComponent
{
    public void Initialize()
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }

    public void Terminate()
    {

    }
}

Crafting the BundleConfig

Navigate to the App_Start folder (create one if missing) and set up a BundleConfig.cs file.

This file acts as the control center for your scripts and their bundles.

public class BundleConfig
{
   public static void RegisterBundles(BundleCollection bundles)
   {
      ScriptBundle scriptBundle = new ScriptBundle("~/bundles/master/js");

      scriptBundle
         .Include("~/assets/js/jquery.js")
         .Include("~/assets/js/plugins.js")
         .Include("~/assets/js/functions.js");

      bundles.Add(scriptBundle);

      StyleBundle styleBundle = new StyleBundle("~/bundles/master/css");

      styleBundle
         .Include("~/assets/css/plugins.css")
         .Include("~/assets/css/style.css")
         .Include("~/assets/css/custom.css");

      bundles.Add(styleBundle);

      BundleTable.EnableOptimizations = true;
   }
}

Enhancing with Dependency Injection Logging

Take advantage of Umbraco’s Dependency Injection to include logging capabilities.

This helps monitor when the bundling event gets triggered.

Here's how you can enhance the above code with logging:

public class BundleComponent : IComponent
{
    private readonly ILogger _logger;

    public BundleComponent(ILogger logger)
    {
        _logger = logger;
    }

    public void Initialize()
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        _logger.Info<BundleComponent>("Registering bundles");
    }

    public void Terminate()
    {

    }
}

Conclusion

Efficient bundling and minification are integral for optimal website performance, and they directly impact SEO rankings.

By leveraging the native Microsoft.AspNet.Web.Optimization library, you can ensure your Umbraco site performs at its best.

If you have questions or need assistance with your Umbraco project, contact us.

For more tips and tutorials, browse our blog.

Happy coding! 🚀

Related articles

↑ Top ↑