<p>At JoomlaShine.com, we put great efforts in optimizing our templates performance by multiple techniques like image sprites application, clean html code output and now one new step – <strong>CSS/JS Compression</strong>.</p>
<p>What it does is to combine all CSS/JS files into a single file and deliver it in GZIP compressed state to browser. This feature significantly reduce http request number to server as well as overall loading size, which results in 35% performance boost.</p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/cssjs-compression/system-compression-filesbefore.png" border="0" alt="Before enabling CSS/JS compression" width="600" height="380" /></p>
<p class="content-center"><em>Before enabling CSS/JS compression</em></p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/cssjs-compression/system-compression-filesafter.png" border="0" alt="After enabling CSS/JS compression" width="600" height="200" /></p>
<p class="content-center"><em>After enabling CSS/JS compression</em></p>
<p>CSS/JS Compression feature is enabled on this demo website. You can check the source code to see how it works.</p>
<hr class="line-dots" />
<h3>Custom CSS File(s)</h3>
<p>This feature allows you to load multiple custom CSS files among with template default files. This feature is very useful, when you have special dedicated CSS file for content styling.</p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/cssjs-compression/system-customcss.png" border="0" alt="Custom CSS files are loaded among with other template CSS files" width="600" height="320" /></p>
<p class="content-center"><em>Custom CSS files are loaded among with other template CSS files</em></p>
<p>Just put custom CSS files to template's CSS folder and define them in template parameter <strong>Custom CSS File(s)</strong> each file name at a line. If you enable <strong>CSS/JS Compression </strong>feature, all custom CSS files will be compressed as well.</p>