Sunday, July 12, 2015

Ektron bundling of JavaScript and CSS

An important aspect of web development is optimizing the final product to ensure it loads in a reasonable amount of time. Slower loading web sites are frustrating to users and can lead to higher bounce rates and less time spent on the site.

One of the simplest ways to optimize a web site for faster loading is to look at the number of HTTP requests. That is the number of files needed to be downloaded to render the web page - this includes images, CSS, JavaScript and any custom fonts.

Built into Ektron is the ability to register CSS or JavaScript in the code behind where it gets combined into a single JavaScript file and CSS file (less HTTP requests) and even is able to minimise it (less file size to download).

To bundle JavaScript in Ektron you can use the following code:
JavaScript.Register(this, "/path/file.js");
To bindle CSS in Ektron you can use the following code:
Css.Register(this, "path/style.css"); 
However there is also an Ektron configuration file called "ektron.cms.framework.ui.config" which is located in the web root which needs to be configured to allow bundling and minification.

  • AllowJavaScriptRegistration - Allows JavaScript to be registered in code behind.
  • AllowJavaScriptAggregation - Will the JavaScript be output (bundled) in a single files.
  • AllowJavaScriptMinification - Will the JavaScript be minified - smaller file size but not as readable.
  • AllowCssRegistration - Allows CSS to be registered in code behind.
  • AllowCssAggregation - Will the CSS be output (bundled) in a single files.
  • AllowCssMinification - Will the CSS be minified - smaller file size but not as readable.
It is also possible to have files not aggregate on a single basis. The Register function takes in a third parameter (bool) which controls if it will aggregate or not.
JavaScript.Register(this, "/path/file.js", false);

No comments:

Post a Comment