Wolf X Machina

You're reading the professional blog of Aaron Lopez. For DNN Services, check out Wolf X Machina

DNN

Enable Composite Files and Minify CSS and JS in DNN

Feb 01, 2019

Back to blog

Fewer HTTP requests and compressed and de-space-fied files make front-end loading of websites faster. It's just one part of the equation for serving faster webpages. I want to show you how to use and enable composite files and minifed CSS and JS in DNN.

Here's how you can enable composite files and minify CSS and JS in DNN.

Pre-requisites

For your CSS and JS, you need to use the Client Dependancy Framework to load CSS and JS through your skin and modules. You can learn more about that here: https://www.dnnsoftware.com/wiki/client-resource-management-api

The basic gist of it is this:

  1. Include this in the head of your skin: 
    <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
  2. Load your CSS like this: 
    <dnn:DnnCssInclude runat="server" FilePath="DNNMega/dnnmega.css" PathNameAlias="SkinPath" />
  3. Load your JS like this: 
    <dnn:DnnJsInclude runat="server" FilePath="~/Resources/Shared/Scripts/jquery/jquery.hoverIntent.min.js" />

Once you have your resources loading properly in your DNN Theme / Skin, DNN knows how to properly compress and minify them. Now you simply follow these instructions to turn on composite files and minification:

  1. Log in with your SuperUser account
  2. In the control panel, hover over the Settings (gear) icon
  3. Click "Servers"
  4. Click the "Server Settings" tab
  5. Click the "Performance" sub-tab
  6. At the bottom there is "Client Resource Management"
  7. Choose either the "Global" radio button (if it's for all sites on the instance) or the radio button for your one specific site
  8. Toggle "Enable Composite Files" on
  9. Toggle "Minify CSS" on
  10. Toggle "Minify JS" on
  11. Click Save
  12. Once the page refreshes, click "Increment Version"
  13. Test, test, and test again*

* Sometimes things can go wrong with composite and minified files. Dependencies get out of order, maybe a third party module breaks. It's super important to review all the pages and the functionality of your website.

That's pretty much it! I hope this helps you fine-tune the performance of your DNN website. If you're looking for extra help with making fast-loading, hyper-usable DNN websites, please check out Expert DNN Development. I can help you make your DNN website load faster and a dream to use for you and your customers.

Aaron Lopez

Aaron Lopez

Founder & Developer of Wolf X Machina

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More