Minify and bundle CSS and JavaScript files for Kentico 7

Site performance can be checked through this site.  https://developers.google.com/speed/pagespeed, Some times it suggests us to bundle the CSS/ java scripts files.

But we cannot able to bundle CSS files in Kentico 7. When we tried to use dot net framework(4.5 and upper) features, Kentico gives DLL issues.

There are many solutions for PHP sites. But for asp net sites few solutions in the web. Among them, solution found in below site.

http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

It has these DLLs.

 

1.0 Copy above highlighted DLLs to project bin

2.0 CMS master page –> edit layout page

add below codes to bundle the CSS files .

Make sure to use , <asp:placeholder>. Otherwise rendering issues will occurs in Kentico.

<%@ Import Namespace=”SquishIt.Framework” %>

<asp:PlaceHolder   runat=”server”>

<%= Bundle.Css()

.Add(“~/app_themes/ibuynew/style/viewport_1500.css”)

.Add(“~/app_themes/ibuynew/style/viewport_1280.css”)

.Add(“~/app_themes/ibuynew/style/viewport_1020.css”)

.Add(“~/app_themes/ibuynew/style/viewport_760.css”)

.Add(“~/app_themes/ibuynew/style/viewport_480.css”)

.Add(“~/app_themes/ibuynew/style/viewport_320.css”)

.Add(“~/app_themes/ibuynew/style/jquery.selectbox.css”)

.Add(“~/app_themes/ibuynew/style/colorbox.css”)

.Add(“~/app_themes/ibuynew/style/jquery.mCustomScrollbar.css”)

.Add(“~/app_themes/ibuynew/style/marketo.css”)

.Render(“~/app_themes/ibuynew/style/combined_#.css”)

%>

</asp:PlaceHolder>

Like wise you can add Js files to get bundle.

<asp:PlaceHolder   runat=”server”>

<%= Bundle.JavaScript()

.Add(“~/cmsscripts/ibuynew/socialmedia.js”)

.Add(“~/cmsscripts/ibuynew/ajax.js”)

.Add(“~/cmsscripts/jquery/jquery-core.js”)

.Add(“~/cmsscripts/jquery/jquery-cookie.js”)

.Add(“~/cmsscripts/jquery/jquery-tools.js”)

.Add(“~/cmsscripts/ibuynew/jquery.carouFredSel-6.2.0-packed.js”)

.Add(“~/cmsscripts/ibuynew/jquery.mCustomScrollbar.concat.min.js”)

.Add(“~/cmsscripts/ibuynew/jquery.ba-throttle-debounce.min.js”)

.Add(“~/cmsscripts/ibuynew/jquery.selectbox-0.2.js”)

.Add(“~/cmsscripts/ibuynew/css3-mediaqueries.js”)

.Add(“~/cmsscripts/ibuynew/jquery.colorbox-min.js”)

.Add(“~/cmsscripts/ibuynew/jquery.mCustomScrollbar.concat.min.js”)

.Add(“~/cmsscripts/ibuynew/form.js”)

.Add(“~/cmsscripts/ibuynew/common.js”)

.Render(“~/cmsscripts/ibuynew/combined_#.js”)

%>

</asp:PlaceHolder>

 Finally you can remove relevant CSS from kentico header.