Views: 165
Last Modified: 05.09.2022

Merge and compress

One of ways to increase performance is to use standard merging and compressing feature for css and js files, enabled in the kernel (main) module settings (Settings > System settings > Module settings > Kernel, CSS Optimization section):

The following are the CSS optimization options available Kernel module settings:

Enabling the option Include compressed CSS and JS files allows connecting minified file version instead of original ones, if such are available at the site. File versions are prepared beforehand and must have a suffix .min in the name. For example: style.min.css and script.min.js. The reason for file minification is to delete all code comments, line breaks, excessive tabs and space characters. This allows saving from 10 to 20% of original file size.

The option Compress merged CSS and JS files: allows saving server resources. This option creates a compressed file for NGNIX to source an already completed file.

This option, when enabled, connects 3 CSS and 3 JS files in an ideal case:

  1. /bitrix/cache/css/SITE_ID/TEMPLATE_NAME/kernel/styles.css - contains kernel CSS files (files connected from /bitrix/js). This set of CSS is unique for site template and accumulates all the necessary files progressively as the various pages are opened. Accordingly, after "engaging" a server cache, the CSS set is uploaded only once for all client site pages.

    This set of styles, when connected at the page, generates at JS variable that lists already uploaded styles to avoid a duplicate upload via JS. You can also forcibly add styles for upload.

  2. /bitrix/cache/css/SITE_ID/TEMPLATE_NAME/template_MD5(list of files)/styles_MD5(from file time tags).css. This set contains css files belonging to a template, including style files, connected in the header.php and footer.php. Array with styles is generated via analysis of the files, connected in front and behind the work space. This set of styles is not unique within a site template and can have several variants. Ideally, one or two.
  3. /bitrix/cache/css/SITE_ID/TEMPLATE_NAME/page_MD5(list of files)/styles_MD5(from file time tags).css . This set contains css files, belonging to the work space and isn't unique for site template. It means that sets for pages are generated exclusively based on included sets of styles, which lowers their variability. Additionally, these are the smallest sets in size.

Fully similar algorithm is active for JS files.

Note: Merging and compressing files tangentially affects the results returned by search engines. CSS and JS files affect the page load time by a search engine, which in turn affects this page indexing and rating. This affects Google search engine: it's search bot fully downloads a page with all scripts and styles, measures loading time and compares with page loading median time within a corresponding subject.


Courses developed by Bitrix24