Tip: Optimize DotNetNuke page loading with enableCompositeFiles setting in web.config

On a clean install of DotNetNuke 6.x you will notice that YSlow doesn’t quite give you an optimal rating for “Minify JavaScript and CSS” and “Make fewer HTTP requests”. By simply setting the enableCompositeFiles options to true, you’ll increase load speed and decrease bandwidth usage of your server.

Changing the relevant settings in web.config

To enable minified and composite files, all you need to do is toggle a few settings. It’s a simple three-step process:

• Just locate the lines that have an option enableCompositeFiles and set those options to true.
• Then locate the CompositeFileProcessor and set enableCssMinify to true (and check enableJsMinify, it’s default should be true already)
• Save the web.config file; your application pool will automatically restart*

* There are some configurations where automatic restarts are disabled, i.e. when the application directory is on a network fileshare, in these cases you should manually restart the application pool.

This is how it looks before the change:

Scroll a bit to the right to see the values for the enableCompositeFiles attributes incorrectly defaulting to false.

  <clientDependency version="28" fileDependencyExtensions=".js,.css">
    <fileRegistration defaultProvider="LoaderControlProvider">
      <providers>
        <add name="DnnBodyProvider" type="DotNetNuke.Web.Client.Providers.DnnBodyProvider, DotNetNuke.Web.Client" enableCompositeFiles="false" />
        <add name="DnnFormBottomProvider" type="DotNetNuke.Web.Client.Providers.DnnFormBottomProvider, DotNetNuke.Web.Client" enableCompositeFiles="false" />
        <add name="PageHeaderProvider" type="ClientDependency.Core.FileRegistration.Providers.PageHeaderProvider, ClientDependency.Core" enableCompositeFiles="false" />
        <add name="LazyLoadProvider" type="ClientDependency.Core.FileRegistration.Providers.LazyLoadProvider, ClientDependency.Core" enableCompositeFiles="false" />
        <add name="LoaderControlProvider" type="ClientDependency.Core.FileRegistration.Providers.LoaderControlProvider, ClientDependency.Core" enableCompositeFiles="false" />
        <add name="DnnPageHeaderProvider" type="DotNetNuke.Web.Client.Providers.DnnPageHeaderProvider, DotNetNuke.Web.Client" enableCompositeFiles="false" />
      </providers>
    </fileRegistration>
    <compositeFiles defaultFileProcessingProvider="CompositeFileProcessor" compositeFileHandlerPath="~/DependencyHandler.axd">
      <fileProcessingProviders>
        <add name="CompositeFileProcessor" type="ClientDependency.Core.CompositeFiles.Providers.CompositeFileProcessingProvider, ClientDependency.Core" enableCssMinify="false" enableJsMinify="true" persistFiles="true" compositeFilePath="~/App_Data/ClientDependency" bundleDomains="" urlType="MappedId" />
      </fileProcessingProviders>
    </compositeFiles>
  </clientDependency>

And this is how it looks after the change:

Scroll again to the right to see the enableCompositeFiles attributes set to the more handsome value of true. Make sure to also set enableCssMinify="true" enableJsMinify="true".

  <clientDependency version="28" fileDependencyExtensions=".js,.css">
    <fileRegistration defaultProvider="LoaderControlProvider">
      <providers>
        <add name="DnnBodyProvider" type="DotNetNuke.Web.Client.Providers.DnnBodyProvider, DotNetNuke.Web.Client" enableCompositeFiles="true" />
        <add name="DnnFormBottomProvider" type="DotNetNuke.Web.Client.Providers.DnnFormBottomProvider, DotNetNuke.Web.Client" enableCompositeFiles="true" />
        <add name="PageHeaderProvider" type="ClientDependency.Core.FileRegistration.Providers.PageHeaderProvider, ClientDependency.Core" enableCompositeFiles="true" />
        <add name="LazyLoadProvider" type="ClientDependency.Core.FileRegistration.Providers.LazyLoadProvider, ClientDependency.Core" enableCompositeFiles="true" />
        <add name="LoaderControlProvider" type="ClientDependency.Core.FileRegistration.Providers.LoaderControlProvider, ClientDependency.Core" enableCompositeFiles="true" />
        <add name="DnnPageHeaderProvider" type="DotNetNuke.Web.Client.Providers.DnnPageHeaderProvider, DotNetNuke.Web.Client" enableCompositeFiles="true" />
      </providers>
    </fileRegistration>
    <compositeFiles defaultFileProcessingProvider="CompositeFileProcessor" compositeFileHandlerPath="~/DependencyHandler.axd">
      <fileProcessingProviders>
        <add name="CompositeFileProcessor" type="ClientDependency.Core.CompositeFiles.Providers.CompositeFileProcessingProvider, ClientDependency.Core" enableCssMinify="true" enableJsMinify="true" persistFiles="true" compositeFilePath="~/App_Data/ClientDependency" bundleDomains="" urlType="MappedId" />
      </fileProcessingProviders>
    </compositeFiles>
  </clientDependency>

Performance before enableCompositeFiles

Before you apply the change, YSlow will show you something like the following (the exact number of JavaScript and CSS files will differ for your situation):

High number of HTTP requests

Bad minify JavaScript/CSS score:

Statistics pie chart

As you can see from the below pie chart taken from abrasoft.net, it has a total 1086kB on a first visit or with an empty cache:

Performance after applying enableCompositeFiles

After applying your settings, you can immediately see the difference.

Lower number of HTTP requests

Much better minify JavaScript and CSS score

Overall performance reduced by 30% (!) on first load

As you can read from the chart below, in my scenario, this brought about a reduction of more than 30% on first load. A five minute change of a configuration file and my bandwidth bills drop drastically, that’s a real quick win! Plus my users have a more response website.

I wonder why these settings aren’t enabled by default in DotNetNuke.

Conclusion

By simply enabling enableCompositeFiles, a greatly under-documented feature of DotNetNuke, you reduce a first load time by more than 30% of a typical page. Depending on the size of the page, the reduction can be even more dramatic.

Bottom line: if you haven’t done so already, change this setting!