+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / layout_transformation.css needs to be minified.

layout_transformation.css needs to be minified.

9 posts, 0 answered
  1. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    28 Aug 2014
    Link to this post

    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

    https://www.marktold.com/Sitefinity/Public/ResponsiveDesign/layout_transformations.css?pageDataId=01f642bb-21a3-6400-8b04-ff0000b445af&culture=de

     

  2. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    02 Sep 2014
    Link to this post
    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
     
  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    02 Sep 2014 in reply to Vassil Vassilev
    Link to this post

    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

  4. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    17 Sep 2014 in reply to Markus
    Link to this post

    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

  5. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    17 Sep 2014
    Link to this post
    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
     
  6. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    19 Sep 2014 in reply to Vassil Vassilev
    Link to this post

    Dear Vassil

     Thanks for digging into this. 

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

    Markus

  7. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    19 Sep 2014
    Link to this post
    Hello Markus,

    There is very good blogpost in MSDN about how to use ASP.NET Bundling and Minification:
    http://blogs.msdn.com/b/rickandy/archive/2012/08/14/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
     
  8. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    19 Sep 2014 in reply to Vassil Vassilev
    Link to this post

    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") %>

  9. Jason
    Jason avatar
    1 posts
    Registered:
    23 Jan 2014
    22 Apr 2015 in reply to Markus
    Link to this post

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

    http://www.asp.net/mvc/overview/performance/bundling-and-minification​

9 posts, 0 answered