An important factor that influences the performance of a website is the size of code resources, which are requested by the client browser when it renders a page. The most significant among these are CSS stylesheets and JavaScript source files, which may in some cases reach sizes that considerably impact page load time.

 

Kentico CMS has two types of built‑in functionality that can be used to optimize the performance of requests for the above mentioned resources:

 

•Code minification - removes all unnecessary characters from the code that are not required by the browser to correctly process the resource. This includes white spaces, line break characters, comments, bookmarks etc. The behavior of a minified resource remains exactly the same as the original and it can immediately be handled by the browser, without any additional steps. Minified code is generally difficult to read (for humans) and is therefore unsuitable for debugging.

•Resource compression - encodes the data of the resource so that its size is reduced. In order for compression to be applied, minification must also be enabled for resources of the given type. When the client browser receives a compressed resource, it must first decompress the data. All browsers officially supported by Kentico CMS should be able to correctly decompress files. In cases where the client cannot process compressed data, the unmodified resource is sent instead.

 

Reducing the size of requested resources saves bandwidth and improves the response time of your website. Minification can decrease the size of a resource by approximately 20–40%, depending on the code of the given object. If compression is also used, resources can be reduced to roughly 30% of their original size.

 

Please note that these reductions are only applied to external resources stored individually in the file system or database. Inline code inserted into the HTML markup of pages is not affected.

 

Code minification and compression can be enabled or disabled globally for all sites in Site Manager -> Settings -> System -> Performance.

 

 

The minification or compression process slightly increases the server CPU load and may also cause a short time delay. To counter this issue, the server only performs minification/compression once per resource (when it is requested for the first time) and stores the results in the application's cache. When a given resource is requested, the appropriate transformed version is taken from the cache. Both compressed and uncompressed versions of resources are cached, so they are readily available even for clients without compression support.

 

Additionally, client‑side browser caching can be used (enabled by default), which means that resources have to be reloaded from the server only if the cache expires or the content of the resource is outdated. Client caching of minifiable resources specifically can be enabled or disabled by setting the CMSAlwaysCacheResources key, which can be added into the appSettings section of your web.config file, for example:

 

 

All of the mentioned functionality is automatically ensured by the ~/CMSPages/GetResource.ashx handler, which manages resource requests according to the specified settings. If minification is enabled, CSS and JavaScript requests generated by the system use this handler. If you need to manually write resource requests in your code, the following URL parameters can be used with the handler to specify which resource should be loaded:

 

•stylesheetname - used to request a CSS stylesheet from the database. The code name of the requested stylesheet must be entered as the value of the parameter.
Link example:
<link href="/KenticoCMS/CMSPages/GetResource.ashx?stylesheetname=CorporateSite" type="text/css" rel="stylesheet">

 

•_transformations, _layouts, _templates, _devicelayouts, _webparts, _webpartlayouts, _containers - used to request the internal stylesheets of the corresponding type of page component. The object ID values of the given components must be entered as the value of the parameter, separated by semicolons (if multiple component stylesheets are requested). See CSS stylesheets and design -> CSS for page components for additional information.
Link examples:
<link href="/KenticoCMS/CMSPages/GetResource.ashx?_containers=1;14" type="text/css" rel="stylesheet"/>
<link href="/KenticoCMS/CMSPages/GetResource.ashx?_transformations=3511" type="text/css" rel="stylesheet">

 

•stylesheetfile - used to request static CSS resources from the file system. The relative path of the requested .css file must be entered into the parameter.
Lnk example:
<link href="/KenticoCMS/CMSPages/GetResource.ashx?stylesheetfile=/KenticoCMS/App_Themes/Design/OnSiteEdit.css" type="text/css" rel="stylesheet">

 

•scriptfile - used to request static JavaScript resources from the file system. The relative path of the requested .js file must be entered into the parameter.
Link example:
<script src="/KenticoCMS/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fmootools.js" type="text/javascript"></script>

 

 

GZip compression of page output

 

It is also possible to enable GZip compression of the output code of all pages rendered by Kentico CMS. This can be done either by adding the following key into the appSettings section of your web.config file:

 

 

or by enabling the Enable GZip compression option in Site Manager -> Settings -> System -> Performance.