Remove Sitefinity WebResources to Reduce the Page Size… Wait… What?

Sitefinity is one of the most powerful and feature rich CMS systems out there, and there is no doubt that we here at Falafel love working on it.

One of the things that people were complaining about is the fact that Sitefinity loads tons of resources unto the page that sometimes might not be needed. For instance, when I don’t have a control that requires any JavaScript, why should I have all those resources loaded unto the page that will only magnify the size and make it slower?

Last week I decided to go on a quest and attempt to remove those Web Resources from one of the sites that I was working on. The reason why I decided to do so, is because I am using my own Frontend framework which is Bootstrap and I am loading all the necessary JavaScript code myself.

The real challenge was to be able to parse the HTML and remove all the resources. There is a great concern about performance and what impact will it going to have on the website. I needed a library that could do it efficiently and has a light footprint on the rendering of the page. If you’re not familiar with HAP, let me introduce it to you.

What is exactly the Html Agility Pack (HAP)

This is an agile HTML parser that builds a read/write DOM and supports plain XPATH or XSLT (you actually don’t HAVE to understand XPATH nor XSLT to use it, don’t worry…). It is a .NET code library that allows you to parse “out of the web” HTML files. The parser is very tolerant with “real world” malformed HTML. The object model is very similar to what proposes System.Xml, but for HTML documents (or streams)

With that said, here is what I came up with:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web.UI;
using HtmlAgilityPack;
using Telerik.Sitefinity.Configuration;
 
namespace Sitefinity.Framework.Web.Controls
{
    /// <summary>
    /// A base class that will be used for the master pages to remove the Telerik Web resource
    /// </summary>
    public class MasterBase : MasterPage
    {
        protected override void Render(HtmlTextWriter writer)
        {
            //Render normally in the backend or if the setting is false
            if (this.IsBackend() || this.IsDesignMode())
            {
                base.Render(writer);
                return;
            }
 
            var tw = new StringWriter();
            var htw = new HtmlTextWriter(tw);
 
            base.Render(htw);
 
            //Get page source
            var pageSource = tw.ToString();
 
            //Load the html document to use HtmlAgilityPack
            var htmlDoc = new HtmlDocument();
            htmlDoc.LoadHtml(pageSource);
 
            if (htmlDoc.DocumentNode == null) return;
 
            //Get the telerik UI web resource scripts
            var bodyNode = htmlDoc.DocumentNode.SelectNodes("//script").Where(s => s.GetAttributeValue("src", string.Empty).Contains(Constants.TELERIK_WEBUI_WEBRESOURCE) || string.IsNullOrEmpty(s.GetAttributeValue("src", string.Empty)));
 
            foreach (var node in bodyNode)
            {
                //Delete the scripts if there is a match
                node.ParentNode.RemoveChild(node);
            }
 
            pageSource = htmlDoc.DocumentNode.OuterHtml;
 
            //render the outer html
            writer.Write(pageSource);
        }
    }
}

HAP is not the only library out there that could parse and fix your DOM but there is also CsQuery which is as good.

I only advise you to use it when you’re absolutely sure you don’t want those resources and you’re not using any control that requires any of those scripts.

Did you learn something? I really recommend you attend FalafelCON 2014, where there will be many deep dives into Sitefinity. Let me know you’re coming on Twitter!

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.