Skip to content

Theme Optimizations

Jump to bottom
iJungleboy edited this page Mar 8, 2018 · 2 revisions

Understanding JS/CSS Dependency Handling

We include some CSS and JS, and each template tells DNN what it needs. DNN will automatically only include each file once in the rendered HTML.

Assuming that you have DNN bundling/minification turned on (you should) then DNN will automatically take these files together into one, zip them, and then cache the bundle on the server. The browser will get this exact bundle.

There's a downside though: DNN provides the exact combination of CSS and JS for each page, meaning that if every page has a file more or less, the bundle will change on every page. If this happens, the browser still performs a full JS & CSS request against the server for almost every page visited. Not sexy.

So our goal is to ensure that on most pages, the combination of CSS/JS is identical, even if it means loading a bit of CSS which you don't need or some JS which is only used on some pages.

Optimizing the Minified CSS for All Pages

We from 2sic add the same <link> tag to the skin/theme, so that all pages will have this CSS. You don't have to remove them from the content-templates, as DNN will realize that this was already included, and not include it twice. These CSS are linked from the templates:

  1. dist/styles.css - used in all content-templates

Note that you don't need the bootstrap-glyphicons.css in your pages, it's only used by the edit-dialog to provide the icon-picker. Your bootstrap theme will already include glyphicons.

Optimizing of Minified JS

For the same reason there are some script tags in the templates. We from 2sic also add these script tags to the skin/theme. You don't have to remove them from the content-templates, as DNN will realize that this was already included, and not include it twice. These are the JS files we provide:

  1. dist/scripts.js - used in almost all templates for e-mail decryption and to enable the image-lightbox
  2. dist/jquery.syncHeightResponsive.min - used to adjust the heights of boxes which are in the same row, and used in many templates
  3. dist/google-map.js - used only all map templates and this doesn't really need adding to the skin
Clone this wiki locally