UmbraCare LOGO

Optimizing Scripts in Umbraco 8 - Bundling and Minification

Learn how to optimize scripts in Umbraco 8 using bundling and minification. Follow this step-by-step guide to speed up your website, improve SEO, and simplify asset management.

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

Jump to Section

Introduction#

Website speed is a key factor for both user satisfaction and search engine rankings.

In Umbraco, optimizing JavaScript and CSS resources through bundling and minification can significantly enhance your site's performance.

In this guide, we’ll show you how to implement this technique using Microsoft.AspNet.Web.Optimization library.

💡Pro tip: Before proceeding, ensure you've grasped the basics of bundling and minification in ASP .NET from our previous article, Optimizing ASP.NET with Bundling and Minification

We also covered how to fix browser caching issues by appending unique version tokens to bundles. This technique ensures that browsers always load the latest versions of your scripts and styles after updates.

Setting Up Bundling and Minification in Umbraco#

To streamline script and style optimization in Umbraco, follow these steps:

  1. Install the Optimization Package: Add the Microsoft.AspNet.Web.Optimization library to your project using NuGet.
  2. Define Your Bundles: Create a BundleConfig.cs file and specify your JavaScript and CSS bundles.
  3. Force Optimization: Enable optimization even in development mode.
  4. Integrate with Umbraco: Register the bundling engine at application startup using Umbraco components and composers.

Once configured, you can include optimized bundles directly in your Razor Views for efficient rendering.

Registering Bundles in Umbraco#

In Umbraco, the best practice is to use the Composing and Components pattern for initialization.

Step-by-Step Guide

  1. Create a Compose Folder: Add a new Compose folder to your project.
  2. Create a Component: Inside the folder, create a class named BundleComponent. This class will handle the bundling process.
  3. Initialize Bundling: Add the bundling logic to your component's Initialize method.

Here’s an example:

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

    public void Terminate()
    {

    }
}

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

Next, wire up the component using a composer:

public class BundleComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.Components().Append<BundleComponent>();
    }
}

Crafting the BundleConfig#

The BundleConfig class manages your JavaScript and CSS bundles.

Place it in the App_Start folder (create one if it doesn’t exist):

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

      // JavaScript Bundle
      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");

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

      bundles.Add(styleBundle);

      // Enable optimizations
      BundleTable.EnableOptimizations = true;
   }
}

This setup groups and minimizes your scripts and styles, reducing the number of HTTP requests and improving load times.

Enhancing with Dependency Injection Logging#

Umbraco’s Dependency Injection makes it easy to log events for better monitoring.

Here’s how to add logging to your BundleComponent:

public class BundleComponent : IComponent
{
    private readonly ILogger _logger;

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

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

    public void Terminate()
    {
        // Optional cleanup logic
    }
}

This ensures you can track when bundling is initialized, making debugging easier.

Using Bundles in Razor Views

Include your bundled files in Razor Views using the @Scripts.Render and @Styles.Render helpers.

Update your ~/Views/Web.config to include the System.Web.Optimization namespace:

<add namespace="System.Web.Optimization" />

Then, render your bundles in Razor:

<head>
    @Styles.Render("~/bundles/master/css")
</head>
<body>
    @Scripts.Render("~/bundles/master/js")
</body>

Key Benefits of Umbraco Bundling and Minification#

  • Faster Page Loads: Fewer HTTP requests and smaller file sizes.
  • Improved SEO: Speed is a ranking factor for search engines.
  • Simplified Maintenance: Centralized script and style management.

Conclusion#

Efficient script optimization is a cornerstone of high-performing websites.

By leveraging the Microsoft.AspNet.Web.Optimization library in Umbraco, you can:

  • Boost page load speed.
  • Enhance user experience.
  • Simplify asset management.

What's Next?

Do you have questions or need help with your Umbraco site?

Contact us or explore more tutorials on our blog.

EDITOR'S PICK

↑ Top ↑