.SHARP{C#DERS}

.net development, server management, and related topics

Improving the yslow score with bundling, minification, gzip, and far future expiration of static content

This is an old post from my now defunct personal blog


Over time I have learned some techniques to optimize my web app. Here are a few steps to enable this for an MVC site.

First, enable dynamic compression in IIS - http://technet.microsoft.com/en-us/library/cc753681(WS.10).aspx

Install this nuget package in your project: http://nuget.org/packages/microsoft.aspnet.web.optimization 

To enable gzip compression add this to web.config in the system.webserver section

<staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
      <remove fileExtension=".js"/>
      <mimeMap fileExtension=".js" mimeType="text/javascript"/>
    </staticContent>
    <urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true"/>
    <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
      <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"/>
      <dynamicTypes>
        <add mimeType="text/*" enabled="true"/>
        <add mimeType="text/javascript" enabled="true"/>
      </dynamicTypes>
      <staticTypes>
        <add mimeType="text/*" enabled="true"/>
        <add mimeType="text/javascript" enabled="true"/>
      </staticTypes>
    </httpCompression>

 

Add a new class to your project called bundleconfig.vb - preferrably in the App_Start folder as that is where MVC4 will put it in a new project. 

Make bundles of CSS and JS files. Make the paths actually match where the real files are. This part "~/bundles/BaseJS' is up to you. You can call it whatever you want like this "~/bundles/MyAmazingBundle"

Don’t try to bundle .min.js files. Delete all of those and bundle the full versions. (except jquery and jqueryui). Below I made some example bundles for reference. 

Imports System.Web
Imports System.Web.Optimization

Public Class BundleConfig
    Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
        bundles.Add(New ScriptBundle("~/bundles/BaseJS").Include(
                    "~/scripts/jquery.validate.js",
                    "~/scripts/jquery.validate.unobtrusive.js",
                    "~/scripts/jquery.unobtrusive-ajax.js",
                    "~/scripts/Javascripts/bootstrap.js"))

        bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
            "~/scripts/jquery-1.7.1.js",
            "~/scripts/jquery-ui-1.8.16.js"))


        bundles.Add(New StyleBundle("~/bundles/sitecss").Include(
                   "~/content/styles.css"))

    End Sub
End Class

 

Next open global.asax and add this reference

Imports System.Web.Optimization

Then add this to "Application_Start"

BundleConfig.RegisterBundles(BundleTable.Bundles)

I wouldn't minify jquery or jqueryui. Use the Google CDN with a fallback like this. It will be faster:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      if (typeof jQuery == 'undefined') {
          document.write(unescape("%3Cscript src='/YOURPATH/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
      }
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      if (!window.jQuery.ui) {
          document.write(unescape("%3Cscript src='/YOURPATH/jquery-ui-1.8.16.min.js' type='text/javascript'%3E%3C/script%3E"));
      }
    </script>

 

In your layout add these lines for the bundles you want to use. Add the CSS bundle first. 

@System.Web.Optimization.Styles.Render("~/bundles/sitecss")
@System.Web.Optimization.Scripts.Render("~/bundles/BaseJS")

Finally, web.config has to be set to compilation debug false for the minification to happen. If its set to true it will just spit out a bunch of individual script tags to the raw files (which is perfect for development). 

 

Comments are closed