On a recent project, we were looking at a way to meet a number of criteria to improve page load times.
With regard to CSS and JS requests these criteria were:
- Reduce the number of CSS and JS HTTP requests on page load.
- Reduce the size of CSS and JS files (minification)
At the same time, we were running a Sitecore Helix project and we needed this to seamlessly fit into our project and CI builds.
In the past, I had also done some Umbraco development and was familiar with a nice little package called “ClientDependency Framework (CDF) by Shannon Deminick” that comes out of the box with that particular CMS.
CDF will cut down your server requests in a few ways:
- Combining (It combines multiple JS files into a single server call on the fly)
- minifying output
- Caching (Processing of files into a composite file it cached)
- Persisting the combined composite files for increased performance when applications restart or when the Cache expires
It also has a development mode were asset includes are not touched so that you can debug as usual.
The problem we had to solve was how to make the above package work in a way that it could plug and play with the Helix way of doing things.
The habitat (helix example project) provides a way to include assets file via a global theme and also on an idividual rendering level.
Global themes should be used to load assets that are to be applied across a whole website.
The current habitat solution contains a module called “Assets” that lives in the foundation layer. This module will cleverly round up all the assets that need to be rendered on the page by the Helix Architecture.
In order to use ClientDependency Framework (CDF) and seamlessly plug it into the Assets module, we have provided two new layout tags for use:
Usage in Layouts - @CompositeAssetFileService.Current.RenderStyles() - @CompositeAssetFileService.Current.RenderScript(ScriptLocation.Body)
The above integration is currently on a pull request (waiting approval) on the main Helix Habitat GitHub repository:
It will remain available on Aceik’s fork of the habitat project.
To use this service you will need to rename the following and run the gulp build:
/// – “App_Config/ClientDependency.config.disabled”. to App_Config/ClientDependency.config
/// – “\src\Foundation\Assets\code\Web.config.transform.ClientDependency.minification.example” to Web.config.transform
Once running (not in debug mode) you will see the following asset includes in the html source.
A note about Cloudflare and minification:
If your using cloudflare in front of your website, JS and CSS minification can be turned on as feature in Cloudflare. You can also compact the number of server requests made by using a feature called Rocket Loader.