Hi, you can find how to enable gzip in this blog post For JS/CSS minification take a look at the Optimus package.

HTML minification is a bit more tricky, it can be done using the WebMarkupMin NuGet package but this requires you implement route hijacking on your views.

Hope that's helpful.

Jeavon

Hi wschwarte

You can also consider using grunt or gulp to minify your css/javascript as a part of your development process. You can also add a task that will optimize any of your system images (not to be confused with those being uploaded into Umbraco).

Another option could also be to use the ClientDependency framework, which is baked in Umbraco and created by Shannon who work in Umbraco HQ - You can read more about how to use it here https://github.com/Shazwazza/ClientDependency/wiki

Hope this helps.

/Jan

Hi,

Can somebody share what packages are the best for Umbraco performance best practices ?

Thanks Alexander

Hi Alex

As far as I know the "Optimus" package that Jeavon mentions above is the only performance package that exists for Umbraco as such.

I'm not sure there is a best practice as such since it's very individual how developers and companies want to deal with optimizing performance so I think it's a matter of figuring out your own approach and what feels right in your development setup.

Just my 2 cents.

/Jan

Has anyone got the WebMarkupMin to work? I haven't... So far this is what i have been doing, but not sure of it's good or bad coding, but it does the job.

I have made some changes:

WhitespaceFilter.cs

// Before
private static readonly Regex Pattern = new Regex(@"^\s+", RegexOptions.Multiline | RegexOptions.Compiled);

// After
private static readonly Regex Pattern = new Regex(@"/\*(.*?)\*/|<!--(?!\[).*?(?!<\])-->|^\s+|\s+$|\s\s+|[\r\n\t\f]+", RegexOptions.Multiline | RegexOptions.Compiled);

HttpModule.cs

// Changed

// Before
private void ContextBeginRequest (object sender, EventArgs e) {
    HttpApplication app = sender as HttpApplication;

    if(IsSupportedContentType(app)) {
        app.Response.Filter = new WhitespaceFilter(app.Response.Filter);
    }
}

// After
private void ContextBeginRequest (object sender, EventArgs e) {
    HttpApplication app = sender as HttpApplication;

    if(IsSupportedContentType(app)) {
        app.Response.Filter = new WhitespaceFilter(app.Response.Filter);
    }
}

// Added

/// <summary>
/// Returns true if filter is not null and content type is html.
/// </summary>
private Boolean IsSupportedContentType (HttpApplication filterContext) {
return filterContext != null
    && !filterContext.Request.RawUrl.Contains(".axd")
    && !filterContext.Request.RawUrl.Contains(".ashx")
    && !filterContext.Request.RawUrl.Contains(".png")
    && !filterContext.Request.RawUrl.Contains(".jpeg")
    && !filterContext.Request.RawUrl.Contains(".jpg")
    && !filterContext.Request.RawUrl.Contains(".gif")
    && !filterContext.Request.RawUrl.Contains(".mp4")
    && !filterContext.Request.RawUrl.Contains(".webm")
    && !filterContext.Request.RawUrl.Contains(".css")
    && !filterContext.Request.RawUrl.Contains(".js")
    && filterContext.Context.Response.Filter != null
    && !filterContext.Request.RawUrl.Contains("umbraco")
    && filterContext.Context.Response.ContentType.Equals("text/html", StringComparison.OrdinalIgnoreCase);
}

Check out this article too, especially part 4 and 5 regarding caching and compression.

http://24days.in/umbraco/2013/6-easy-configuration-tweaks/

We just do this package for Html minification - https://our.umbraco.org/projects/developer-tools/html-minifier/ May be will be useful.

We tend to use Microsoft's ASP.NET MVC optimisation package that can be installed via NuGet - https://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization/

It can both minify and bundle (combine) JS and CSS files. You can even configure it so it only does this in release mode, which is handy. It's pretty simple to use.

https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

https://www.codeproject.com/Articles/748849/ASP-NET-Web-Optimization-Framework

Rather than modify Global.asax you can register your bundles using the Application_Started event in Umbraco - see https://our.umbraco.org/documentation/reference/events/Application-Startup

I use bundling for minifying css and js

http://www.codeshare.co.uk/blog/how-to-use-bundling-to-minify-css-and-javascript-in-mvc-and-umbraco/

I never minify html. I went down that route once, but the work involved in getting it working and sorting out the cases where you do need whitespace in your html etc far outweighs the benefits of having it in place.

Hi

for gzip compression you can set through IIS

https://stackoverflow.com/questions/25580078/how-to-enable-gzip-compression-in-iis-7-5

Thanks

I have webmarkupmin working. It wasn't too bad to do compression/minification for the whole site. This is the secret sauce..

public class lMinifierStartup : IApplicationEventHandler, IApplicationStartupHandler, IDiscoverable
{
    public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
    {
        GlobalFilterCollection filters = GlobalFilters.Filters;
        filters.Add(new CompressContentAttribute());
        filters.Add(new MinifyHtmlAttribute());
        filters.Add(new MinifyXmlAttribute());

        //-- Configure Web Markup Minimizer
        //Configure(WebMarkupMinConfiguration.Instance);
    }

}

In my case, I added Configuration based on this to eliminate Yellow Screens of death should there be a malformed page (mismatched tags, etc)

https://github.com/Taritsyn/WebMarkupMin/issues/16

Here are the packages I am using currently (plus their dependencies)

WebMarkupMin.AspNet.Common

WebMarkupMin.AspNet4.Common

WebMarkupMin.AspNet4.Mvc

WebMarkupMin.Core

WebMarkupMin.MsAjax

WebMarkupMin.Yui

Cheers, took me a while to work out the packages I needed from that - in my case WebMarkupMin.AspNet4.Mvc and WebMarkupMin.Yui (which both install others as dependencies) - and then working out the configuration process in the ApplicationStarting event. I found that only the default css minifier is able to deal with css variables, and that the Yui NG-Package is pedantic about the platform version, forcing me to upgrade from 4.5.1 to 4.5.2, but eventually I got it minifying/compressing html, in-line jscript and in-line css-styles, as expected.

is working on a reply...