EPiServer performance - tips and tricks

Intro

Building responsive websites (in terms of page loading speed) is very important because nobody wants to use websites that are slow. There are many ways to improve the performance of our site: combine and compress javascript / css files, cache the static content, etc. There are many things to check, but luckily for us, there is a YSlow plugin for Firefox and Google Chrome that can analyze our web pages and tell us how to improve performance.

There are two things that are important: Grade and Statistics. In a perfect world, we want to have grade A, and everything cached :) Here's my YSlow statistics:

Setting up Visual Studio

By default, all web applications will be run under Cassini. Cassini is much slower than IIS, and it doesn't support all features like Gzip compression, etc.

In Visual Studio 2010 (and higher), you can configure your projects to use IIS Express. It is almost as good as real IIS. To do that, right-click on your project in Solution Explorer, select Properties / Web, and check 'Use Local IIS Web server'

The fun part

The first thing we have to do is to combine and compress JS and CSS files. You can use either Bundling and Minification tool from MS, or an open source tool SquishIt .

To solve many of YSlow issues, you need to do some tweaking in web.config.

You've probably heard of HTML5 boilerplate project. There's a similar project just for IIS: link It's a pure gem! Simply merge this config file with your own and you'll get rid of many YSlow warnings.

I usually modify staticContent.clientCache element and register .jpg and .png files as static files, and set the expiration date to one year:

<staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
  <!-- Image types -->
  <remove fileExtension=".jpg"/>
  <mimeMap fileExtension=".jpg" mimeType="image/jpeg"/>
  <remove fileExtension=".png"/>
  <mimeMap fileExtension=".png" mimeType="image/png"/>

Next thing is to set cache for static files that are served by episerver. We need to register and add the staticFile section like this:

<configuration>
  <configSections>
    ...
    <section name="staticFile" type="EPiServer.Framework.Configuration.StaticFileSection" />
  </configSections>
  <staticFile expirationTime="365.0:0:0"/>

And basically, that's it!

Also, don't forget to use CPU / memory profiler to locate the hotspots in your application :)

comments powered by Disqus