layout_transformation.css needs to be minified.

Posted by Community Admin on 28-Aug-2014 00:00

Well page load speed is one of the criterias google takes for SEO.

Now if you use the responsive layout a bit for different target (tablets, smartphone, iPhone you might end up like me with an 275 KB .css

It might be 100% my fault that it is blown up like this but if it ware minifed it would only amount up to 118 KB.

Anyhow I think the creation of the rules should be optimized by Telerik. Kind of let us choose default settings for major tables maybe.

What do you think?

Markus

www.marktold.com/.../layout_transformations.css

Posted by Community Admin on 02-Sep-2014 00:00

Hello Markus,

I have researched for a possible option to minify the layout transformation, but none appears to be possible.

After further investigation I found also this feature request: The layout_transformations css should be cached and minified.I have raised the priority of this feature and I hope this is implemented in some of our upcoming releases. Please do not forget to vote as this also has impact when selecting new features for each release.

Kind regards,
Vassil Vassilev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 02-Sep-2014 00:00

Dear Vassil

Thanks. If I remember correct I have requested this before but did not find the thread.

Let's hope 2000 people vote on it :-)

Markus

Posted by Community Admin on 17-Sep-2014 00:00

Dear Vassil

I am in the process of trying to speed up my site and must say that layout_tranformation is one of the big problems.

Look at the attached image and you see how much of the load this css is generating. I guess I could try to rewirte it (I might have overdone it with the rules) but still.

Speed is one of the many factors that are important for SEO.

-------------

I dont see the css at the URL given /Sitefinity/Public/ResponsiveDesign

Is it generated each time on the fly or am I looking at the wrong place.

Could one minifiy it by hand or would this cause trouble?

Markus

Posted by Community Admin on 17-Sep-2014 00:00

Hello Markus,

I spent several hours to search for a loophole to make this possible:

1. Create a ResponsiveDesignTransformationRouteHandlerExtended class and ResponsiveDesignTransformationHttpHandlerExtended:

ResponsiveDesignTransformationRouteHandlerExtended:

using System;

using System.Linq;

using System.Web;

using System.Web.Routing;

namespace SitefinityWebApp.ExtendResponsiveDesign

/// <summary>

/// Route handler which returns the css styles for the responsive design transformations.

/// </summary>

public class ResponsiveDesignTransformationRouteHandlerExtended : IRouteHandler

/// <summary>Provides the object that processes the request.</summary>

/// <returns>An object that processes the request.</returns>

/// <param name="requestContext">

/// An object that encapsulates information about the request.

/// </param>

public IHttpHandler GetHttpHandler(RequestContext requestContext)

return new ResponsiveDesignTransformationHttpHandlerExtended();

ResponsiveDesignTransformationHttpHandlerExtended:

using System;

using System.Globalization;

using System.IO;

using System.Linq;

using System.Web;

using Telerik.Sitefinity.Modules.Pages;

using Telerik.Sitefinity.Modules.ResponsiveDesign.Web;

namespace SitefinityWebApp.ExtendResponsiveDesign

public class ResponsiveDesignTransformationHttpHandlerExtended : IHttpHandler

public void ProcessRequest(HttpContext context)

var oldHandler = new ResponsiveDesignTransformationHttpHandler();

var stringWriter = new StringWriter();

var mockContext = new HttpContext(

context.Request,

new HttpResponse(stringWriter));

oldHandler.ProcessRequest(mockContext);

context.Response.Clear();

context.Response.Cache.SetCacheability(HttpCacheability.Public);

context.Response.Cache.SetExpires(DateTime.Now.AddHours(1));

context.Response.ContentType = "text/css";

Guid pageDataId = Guid.Empty;

CultureInfo culture = null;

if (context.Request.QueryString["culture"] != null)

culture = CultureInfo.GetCultureInfo(context.Request.QueryString["culture"]);

if (context.Request.QueryString["pageDataId"] != null)

pageDataId = Guid.Parse(context.Request.QueryString["pageDataId"]);

else if (context.Request.QueryString["pageId"] != null)

Guid pageNodeId = Guid.Parse(context.Request.QueryString["pageId"]);

var pageNode = PageManager.GetManager().GetPageNodes().SingleOrDefault(pn => pn.Id == pageNodeId);

if (pageNode != null)

pageDataId = pageNode.GetPageData(culture).Id;

var css = stringWriter.ToString();

context.Response.Write(css);

public bool IsReusable

get

return true;

2. Perform the switch in Global.asax as follows:

protected void Application_Start(object sender, EventArgs e)

Bootstrapper.Initialized += Bootstrapper_Initialized;

void Bootstrapper_Initialized(object sender, Telerik.Sitefinity.Data.ExecutedEventArgs e)

var routesCollection = System.Web.Routing.RouteTable.Routes;

var path = "Sitefinity/Public/ResponsiveDesign/layout_transformations.css";

var route = routesCollection

.Where(r => r.GetType() == typeof(System.Web.Routing.Route) &&

(r as System.Web.Routing.Route).Url == path)

.FirstOrDefault();

if (route != null)

var index = routesCollection.IndexOf(route);

if (index > -1)

var currentRoute = routesCollection[index] as System.Web.Routing.Route;

var routeNew = new ResponsiveDesignTransformationRouteHandlerExtended();

currentRoute.RouteHandler = routeNew;

As shown in yellow above:

var css = stringWriter.ToString();

context.Response.Write(css);

in css variable are kept the css rules. You can minfy the string on the fly and pass it as a parameter to context.Response.Write method.

I have tested it and it works on my end (by passing a dummy test string which got present in layout_transformation.css on the pages). There are various third party libraries for minifying css and javascript that could be used.

Hope this helps.

Regards,
Vassil Vassilev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 19-Sep-2014 00:00

Dear Vassil

Thanks for digging into this.

Can you tell me what this is about: www.sitefinity.com/.../enable-asp.net-bundling-and-minification

Markus

Posted by Community Admin on 19-Sep-2014 00:00

Hello Markus,

There is very good blogpost in MSDN about how to use ASP.NET Bundling and Minification:
blogs.msdn.com/.../adding-bundling-and-minification-to-web-forms.aspx

Hope this helps.

Regards,
Vassil Vassilev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 19-Sep-2014 00:00

Dear Vassil

I have been trough that link and many others.

Thought I could at least use it to combine my minmized.css with the layout_transormation.

Also in all the links I keep reading about bundling but never minification :-)

Markus

In global.asax

public class Global : System.Web.HttpApplication

protected void Application_Start(object sender, EventArgs e)

BundleTable.VirtualPathProvider = HostingEnvironment.VirtualPathProvider;

BundleTable.EnableOptimizations = true;

BundleTable.Bundles.Add(new StyleBundle("~/bundle/css")

.Include("~/Sitefinity/WebsiteTemplates/mt/App_Themes/mt/global/minimized.cs", "/Sitefinity/Public/ResponsiveDesign/layout_transformations.css", "~/MyResources/styles/test1.css", "~/MyResources/styles/test1.css"));

In my head of .master

<%# System.Web.Optimization.Styles.Render("~/bundle/css") %>

Posted by Community Admin on 22-Apr-2015 00:00

The ASP.NET 4.5 bundler also minifies when debug=false or explicitly enableoptimizations.

www.asp.net/.../bundling-and-minification

This thread is closed

All Replies