I use PageTypeBuilder in all my projects so I’m going to use it in the examples here as well, but you could just use the regular PageData objects instead (with a little more code).

<asp:Repeater runat="server" ID="rptNews">
    <HeaderTemplate>
        <div class="entries">
    </HeaderTemplate>
    <ItemTemplate>
	<%# SetItem(Container.DataItem) %>
	    <div class="entry">
	    <a href="<%# NewsPage.LinkURL %>">
		<img src="<%# NewsPage.ListImage %>" runat="server" visible="<%# NewsPage.ListImage.IsNotNullOrEmpty() %>" />
		<h2><%# NewsPage.Heading %></h2>
	    </a>
	    <div class="date">
		<%# NewsItem.StartPublish.ToString("dd.MM.yyyy") %></div>
	    </div>
    </ItemTemplate>
    <FooterTemplate>
	</div>
    </FooterTemplate>
</asp:Repeater>

The thing to note here is that I’m calling the method SetItem(), which sets the current news page for me.

protected string SetItem(object dataItem)
{
    this.NewsPage = dataItem as StandardPage;
 
    return string.Empty;
}

NewsPage is just a auto property of type StandardPage.

Update: 13.05.2012

Thanks to Jon’s comment, we can simplify this code even more. Instead of using the SetItem method we can use the GetDataItem() method from the Page class.

protected StandardPage NewsPage { get { return Page.GetDataItem() as StandardPage; }}

This gives me strongly typed access to my objects. In ASP.NET 4.5 this will be even simpler since strongly typed access (model binding) will be built into controls like the Repeater, take a look at Scott Guthrie’s post if you’re curious about ASP.NET 4.5.Related Posts:

• Add class attribute to body element with ASP.NET web forms and Master Pages
• Creating a contact form with ASP.NET MVC
• EPiServer FindPagesWithCriteria and FindAllPagesWithCriteria
• A developer’s guide to Page Type Builder
• Adding CSS and JavaScript files dynamically to your ASP.NET page

1. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\Setup\cms_db_upgrade.sql
2. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_ApplicationSystem_update.sql
3. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_BusinessFoundation_update.sql
4. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_CatalogSystem_update.sql
5. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_MarketingSystem_update.sql
6. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_MetaDataSystem_update.sql
7. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_OrderSystem_update.sql
8. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_Reporting_update.sql
9. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_SecuritySystem_update.sql
10. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\MediachaseECF\Data\DeploymentPackage\SqlScripts\Update\ecf_db_Users_upgrade.sql
11. C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Install\Modules\EPiServer Commerce 1.1.2.62\Setup\ecf_products_ProductsQuery.sql

Here’s the whole tech-note: Upgrading EPiServer Commerce from version 1 R2 SP1 to 1 R2 SP2.

What I usually do is upgrade locally, check everything into source control, deploy to the different dev/test environments, download and install the new version from EPiServer World, and then manually upgrade the databases. This means I only have to step through the upgrade wizard once. I can even automatically execute the upgrade scripts in my deployment process so I don’t have to do anything manually.Related Posts:

• EPiServer Mail 5 R2 Installation problem
• Installing EPiServer Live Monitor on IIS 7 running .NET 4
• Part 1: Setting up the development environment – Create an EPiServer site from scratch
• Faster EPiServer sites – client side performance
• Visual Studio 2010 EPiServer Snippets

To make it easier for our editors Geta as developed a simple tool that runs as a scheduled job on your EPiServer site, it runs has often has you need it to and goes through all your sites images and compresses them as much as possible without loosing any quality.

The service that we’re using is Smush.it run by Yahoo! and the people behind YSlow. We’ve run this on various live sites and the result is quite good, in a case where the site had professional editors (they had their own production partner), we saved around 30% of each image, and I know for a fact that the editors always used Photoshop and save for web. Imagine how much this will save for editors that don’t think about this?

Installation

Install-Package Geta.ImageOptimization

You can get everything you need from NuGet. Note that you need to use a public URL and that there are some configuration settings, web.config:

<section name="ImageOptimizationSettings" type="Geta.ImageOptimization.Configuration.ImageOptimizationSettings, Geta.ImageOptimization"/>
 
<ImageOptimizationSettings siteUrl="http://abk.geta.no" virtualNames="Page Files,Global Files,Documents" />

If nothing is specified it will scan through all VPPs and use the siteUrl from episerver.config.

Source code

All code is available as open source in Geta’s open source repository up on Bitbucket.

Running it

After the installation you’ll have a new scheduled job called “Geta Image Optimization”, you can either run it manually or set it up to run once a week or similar. The first time you run it, depending in the size of the site, it can take quite a lot of time. The Smush.it service can be a little slow, but it shouldn’t matter because it will run in a different windows service than your site and use very little resources.

The next time you run the job it will only compress the new images and leave the images that it already has compressed. It should go quite a lot faster after a couple of runs.

(Note that this is for Alloy Tech demo, most live sites I know have quite a lot more images )

What about local images?

For images in local folders (typical CSS background images), we usually use the Visual Studio Image Optimizer extension, after installing it you can right-click any folder or image in Visual Studio and optimize the images.

Related Posts:

• Installing EPiServer Live Monitor on IIS 7 running .NET 4
• Introducing oEmbed for EPiServer
• Open Source MobilePack version 1.0
• Removing HTTP Headers for ASP.NET sites
• Geta.oEmbed version 1.2 is out

The cool thing about the Web API framework is that you don’t need ASP.NET MVC 4 to run it, we can easily get everything we need with NuGet and then deploy it to our server without having to install anything extra on the server.

Getting started

Our EPiServer site needs to run .NET 4 for this to work, for this tutorial I installed a local copy of the AlloyTech sample site. I then upgraded it to use .NET 4 and installed the ASP.NET Web API through NuGet.

This will download and add everything we need for running ASP.NET Web API on our site.

We now need to setup the routing rules in the Application_Start method in global.asax. After adding the routing rules my global.asax looks like this.

using System;
using System.Linq;
using System.Text;
using System.Web.Http;
using System.Web.Routing;
using System.Web.UI;
using System.Web.UI.WebControls;
using EPiServer.Core;
using EPiServer.Globalization;
using EPiServer.Web;
using EPiServer.XForms.WebControls;
using Label = System.Web.UI.WebControls.Label;
using RouteParameter = System.Web.Http.RouteParameter;
 
namespace EPiServer.Templates
{
	public class Global : EPiServer.Global
	{
		protected void Application_Start(Object sender, EventArgs e)
		{
                    XFormControl.ControlSetup += new EventHandler(XForm_ControlSetup);
                    RegisterRoutes(RouteTable.Routes);
                }
 
                public static void RegisterRoutes(RouteCollection routes)
                {
                    routes.MapHttpRoute(
                       name: "ActionApi",
                       routeTemplate: "api/{controller}/{action}/{id}",
                       defaults: new { id = RouteParameter.Optional }
                    );
                }
 
                #region Global XForm Events
                ...
                #endregion
        }
}

For more information on the routing table take a look at this article: Routing in ASP.NET Web API.

Creating the API

Create a new class and give it the name PagesController, place it in a folder called Api. Our controller is going to inherit from the abstract base class ApiController.

using System.Web.Http;
 
namespace EPiServer.Api
{
    public class PagesController : ApiController
    {
    }
}

We are going to use the Pages API to expose EPiServer PageData to the public. We can then easily use this content in different channels and applications.

The URLs for our API are going to look something like this: /api/pages/get/{id}, /api/pages/getchildren/{id}.

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using EPiServer.Core;
using EPiServer.Mapping;
using EPiServer.Security;
using EPiServer.ViewModels;
 
namespace EPiServer.Api
{
    public class PagesController : ApiController
    {
        public PageDataView Get(int id)
        {
            PageData page = DataFactory.Instance.GetPage(new PageReference(id));
 
            if (page == null)
            {
                throw new HttpResponseException(System.Net.HttpStatusCode.NotFound);
            }
 
            if (!page.CheckPublishedStatus(PagePublishedStatus.Published) || !page.QueryDistinctAccess(AccessLevel.Read))
            {
                throw new HttpResponseException(System.Net.HttpStatusCode.Forbidden);
            }
 
            return page.ConvertToPageDataView();
        }
 
        public IEnumerable<PageDataView> GetChildren(int id)
        {
            var pages = DataFactory.Instance.GetChildren(new PageReference(id));
 
            if (pages == null)
            {
                throw new HttpResponseException(System.Net.HttpStatusCode.NotFound);
            }
 
            Filters.FilterForVisitor.Filter(pages);
 
            if (pages.Count == 0)
            {
                throw new HttpResponseException(System.Net.HttpStatusCode.Forbidden);
            }
 
            return pages.Select(p => p.ConvertToPageDataView());
        }
    }
}

The content can of course also come from dynamic data store or any other place for that matter. Note that I created a view model or data transfer object to send to the client. The main reason is that you’ll get a serialization exception if you try and use a PageData object.

using System;
 
namespace EPiServer.ViewModels
{
    public class PageDataView
    {
        public string Heading { get; set; }
 
        public string LinkUrl { get; set; }
 
        public string MainIntro { get; set; }
 
        public string MainBody { get; set; }
 
        public DateTime StartPublish { get; set; }
 
        public string Author { get; set; }
    }
}

using EPiServer.Core;
using EPiServer.ViewModels;
 
namespace EPiServer.Mapping
{
    public static class PagesMapper
    {
        public static PageDataView ConvertToPageDataView(this PageData pageData)
        {
            return new PageDataView
                       {
                           Author = pageData.CreatedBy,
                           StartPublish = pageData.StartPublish,
                           MainBody = pageData["MainBody"] as string ?? string.Empty,
                           MainIntro = pageData["MainIntro"] as string ?? string.Empty,
                           Heading = pageData["Heading"] as string ?? pageData.PageName,
                           LinkUrl = pageData.LinkURL
                       };
        }
    }
}

Just some very simple mapper code here.

Consuming the API

<div class='loadingIndicator'>Loading...</div>
    <ul data-bind="foreach: listItems">
    <li>
          <a data-bind="attr: { href: LinkUrl }, text: Heading"></a>
          <span data-bind="text: StartPublish"></span>
    </li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
<script>
        $(".loadingIndicator").ajaxStart(function () {
            $(this).fadeIn();
        }).ajaxComplete(function () {
            $(this).fadeOut();
        });
 
        $.getJSON('/api/pages/getchildren/41', function (data) {
            viewModel.listItems(data);
        });
 
        var viewModel = {
            listItems: ko.observableArray(null)
        };
 
        ko.applyBindings(viewModel);
</script>

I’m using the Knockout JavaScript library for populating the list and jQuery for getting the data from the API. This will display a loading message to the user and then populate the list with the data it gets back.

Related Posts:

• Removing duplicates from a PageDataCollection
• EPiServer filter – part 2: create your own filter
• Extending PageData with some cool Html Helpers
• Detecting Ajax requests on the server
• EPiServer FindPagesWithCriteria and FindAllPagesWithCriteria

New features/bug fixes

• Storing resized images for 7 days (default) in VPP for faster access
• Added ability to disable server image resizing
• Offline Manifest for using the site offline
• Ability to have different redirects for different language versions of a page
• Ability to turn off server-side image resizing
• Now running jQuery Mobile 1.0.1
• Switching between normal/mobile and mobile/normal site now works for sub-domains as well
• Better language support for Google Maps location page type
• Not trying to resize images the user does not have access to
• Turned off all HTTP caching of resized images to avoid proxies storing and serving the same resized image to multiple devices running different resolutions
• Refactored and cleaned up code base
• Refactored Google Maps property as NuGet package
• Easier installation and setup on new and existing sites

Installation

• In visual studio, from the EPiServer NuGet Feed (remember to manually import the pagetypes from ‘/Setup’ afterwards)
• By downloading the EPiServer Module from Codeplex and using EPiServer Deployment Center (‘Install Module’)
• By fetching the source code directly from codeplex and compiling it yourself.

Hope you enjoy it, and as always we welcome public feedback either on EPiServer World or MobilePack on Codeplex.Related Posts:

• Links for EPiServer Developers – #2
• Faster EPiServer sites – image optimization
• Creating a mobile version of a web site
• Backup plan when loading the jQuery library from CDN
• EPiServer code walkthrough #1 – 404 handler

Registration

To get the key register on this page: Embedly Pricing Plan, if you scroll to the bottom you’ll see the free version which should be plenty for most uses (there is among other things a restriction on the number of requests).

After the registration you should receive the key in your email inbox. Add this key to your sites appSettings configuration.

<add key="EmbedKey" value="your-key-goes-here" />

The great thing about Embedly is the support for 220 different providers, here’s the list: Providers.

Upgrade

You can get the latest version (Geta.oEmbed 1.2) from nuget.episerver.com, or download the source code from Geta’s Open Source repository.

Related Posts:

• Introducing oEmbed for EPiServer
• Faster EPiServer sites – image optimization
• Part 1: Setting up the development environment – Create an EPiServer site from scratch
• Creating a mobile version of a web site
• Tags version 0.2 released for EPiServer CMS

I’m going to use the Overlook hotel sample site. The goal is of course to make it ultra-fast!

To follow along you should have the overlook site installed and setup. Let’s get started!

Client side performance

I’m using Firefox as my main developer browser, I’ll also be using three great addons for Firefox: Firebug, YSlow, and Page Speed.

If we run YSlow on the front page of overlook hotel we’ll get a score of 66/100 (grade D) with a few suggestions for improvements.

With Page Speed we get a score of 62/100.

I’m going to focus on IIS 7 and above, most of the stuff is also possible with IIS 6, but I’m not going to go through IIS 6.

Compress components with gzip

Read more about the benefits of gzipping your content here: Gzip Components.

In IIS 7 this is very easy. First make sure you have both static and dynamic compression installed.

Next step is enabling both static and dynamic compression in web.config. Go to the <system.webServer> section and add the following:

<urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true" />

Re-run both YSlow and Page Speed. Your score should now be 72 and 78 with an A in gzip.

You can find more information on urlCompression on IIS.NET. By default IIS 7 will actually enable static and dynamic compression for you.

You might have spotted the httpCompression section under <system.webServer>.

<httpCompression>
  <staticTypes>
	<add mimeType="text/*" enabled="true" />
	<add mimeType="message/*" enabled="true" />
	<add mimeType="application/javascript" enabled="true" />
	<add mimeType="application/x-javascript" enabled="true" />
	<add mimeType="*/*" enabled="false" />
  </staticTypes>
  <dynamicTypes>
	<add mimeType="text/*" enabled="true" />
	<add mimeType="message/*" enabled="true" />
	<add mimeType="application/javascript" enabled="true" />
	<add mimeType="application/x-javascript" enabled="true" />
	<add mimeType="*/*" enabled="false" />
  </dynamicTypes>
  <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
</httpCompression>

You don’t actually need this section to enable gzip (IIS will just use it’s default settings), but it’s nice to know about it when you need to tweak your default gzip settings a bit. Basically urlCompression specifies what to compress and httpCompression specifies how. More information on httpCompression: HTTP Compression <httpCompression>.

If we check the applicationHost.config file for IIS 7 you can see the default settings (location: %windir%\system32\inetsrv\config\applicationHost.config):

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
	<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
	<staticTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/x-javascript" enabled="true" />
		<add mimeType="application/atom+xml" enabled="true" />
		<add mimeType="application/xaml+xml" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	</staticTypes>
	<dynamicTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/x-javascript" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	</dynamicTypes>
</httpCompression>

By default httpCompression is set to only gzip files over 2700 bytes, we can fix this by adding the following code:

<httpCompression directory="%SystemDrive%\websites\_compressed" minFileSizeForComp="1024">
	<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
	<staticTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/javascript" enabled="true" />
		<add mimeType="application/json" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	</staticTypes>
</httpCompression>

Add Expires headers

Adding Expires headers to static and dynamic files like CSS, JavaScript and images tells the client to cache the files locally, lessening the burden on the server (less requests). Making your sites resources/components cache-able. More information: Add an Expires or a Cache-Control Header.

Back in our sites web.config file under the <system.webServer> section, we have the <staticContent> section:

<staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00"></clientCache>
</staticContent>

The interesting part here is of course the clientCache element.

UseMaxAge will add CacheControlMaxAge to the HTTP Headers sent to the client, we can then tell the client to cache the static files for 1 year:

<staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
</staticContent>

With UseExpires you specify a date instead:

<staticContent>
    <clientCache cacheControlMode="UseExpires" httpExpires="Tue, 19 Jan 2038 03:14:07 GMT" />
</staticContent>

You can only use one of these (if you’re not using the location element) at a time. I usually use MaxAge, it’s simpler and you don’t have to remember to update your settings when the date passes.

The important thing to remember is that if you make any changes to the static files you’ll need to use another name. You can add a querystring, change the name, or in some other way update the path to reflect that the file has changed.

Let’s update it to say that the client should cache the files for 1 year:

<staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
</staticContent>

This helped bring the list of components down from 86 to 15. But we’re not quite finished yet.

EPiServer uses the location element to specify access rights and to use EPiServer’s StaticFileHandler for files located in Global Files, Page Files, Documents and other places that use Virtual Path Providers.

<location path="PageFiles">
	<system.webServer>
		<handlers>
			<add name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			<add name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		</handlers>
	</system.webServer>
	<staticFile expirationTime="365.00:00:00" />
</location>
<location path="Documents">
	<system.webServer>
		<handlers>
			<add name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			<add name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		</handlers>
	</system.webServer>
	<staticFile expirationTime="365.00:00:00" />
</location>
<location path="Global">
	<system.webServer>
		<handlers>
			<add name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			<add name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		</handlers>
	</system.webServer>
	<staticFile expirationTime="365.00:00:00" />
</location>

More information in EPiServer’s SDK: Caching of static files. This technique uses the Expires header instead of MaxAge, but with the same effect.

You might have noticed the <caching> section:

<caching>
	<profiles>
		<add extension=".gif" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".png" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".js" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".css" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".jpg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".jpeg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
	</profiles>
</caching>

The caching setting is used to configure output caching for IIS. You have both output caching for IIS and for ASP.NET. More information: Caching <caching>. By default IIS output caching is turned on.

What EPiServer has done is told IIS to not cache static files like images, CSS and JavaScript and let ASP.NET handle it instead. You can read more about IIS output caching here: Configure IIS 7 Output Caching.

Let’s remove the whole <caching> section and use the default settings instead.

Now we have a score of 78 points in YSlow and 95 in Page Speed. Here you can see how much of the total size is now cached:

On the left we can see the total size and number of requests the first time, on the right is the size and number of requests after that. We’re now down to 3 requests and 16KB. Quite an improvement don’t you think?

Minify JavaScript and CSS

When we’re developing we usually work with multiple JavaScript and CSS files to make it easier to structure and maintain them. However in production we should take care to automatically compress and bundle the files.

It’s important to note the difference between the rule Gzip Components and Minify JavaScript and CSS, which will remove comments, unneeded whitespaces and replace variable/function names with shorter versions.

There are a few tools we can use for this:

• SquishIt – I’ve written about it before: CSS and JavaScript compression and bundling
• Cassette
• ASP.NET 4.5 Optimization

We’re going to use ASP.NET 4.5 Optimization preview. You can easily install it through NuGet.

Note: you’ll need to run .NET 4, so we’ll need to upgrade our solution to use .NET 4 instead of .NET 3.5. This is quite easy thanks to David Knipe. Change the projects target framework in Visual Studio and install the EPiServerCMS6ToNetFour package from nuget.episerver.com.

After that you’ll be able to install ASP.NET 4.5 Optimization successfully.

To enable it we just call the EnableDefaultBundles() method inside Application_Start in Global.asax:

public class Global : EPiServer.Global
{
	protected void Application_Start(object sender, EventArgs e)
	{
		BundleTable.Bundles.EnableDefaultBundles();
	}
}

Next step is updating the way external JavaScript and CSS files are included. By default, everything you refer to in a folder gets bundled together (only for the same type, so JavaScript and CSS files don’t get bundled together even if they’re in the same folder).

<link href="/Templates/DemoSite/Styles/Main/css" rel="stylesheet" type="text/css" />
<script src="/Templates/DemoSite/Scripts/Main/js"></script>

We add the path to the folder followed by either /css or /js.

I had to manually update the code-behind files of site.master and the composer functions and change:

Page.RegisterCSSFile("ComposerFunctions.Teaser.Styles.Teaser.css", UriSupport.ResolveUrlBySettings("/Templates/DemoSite/ComposerFunctions/Teaser/Styles/Teaser.css"));

To:

Page.RegisterCSSFile("ComposerFunctions.Teaser.Styles.Teaser.css", UriSupport.ResolveUrlBySettings("/Templates/DemoSite/ComposerFunctions/Teaser/Styles/css"));

What I did was bundle the different JavaScript and CSS files into folders like components/modules and updated their references to use these folders instead.

There were a few inline scripts that I didn’t compress, but overall this helped a lot. I have now 97/100 points in Page Speed and 79/100 in YSlow.

Make fewer HTTP requests

Modern browsers can send up-to 6 requests at a time to the same domain. Older browsers up-to 2. Combining resource files like JavaScript, CSS and images into as few files as possible not only decreases the sites total size, but also make it load much faster for the client.

For JavaScript and CSS files we can use the technique we learned in the previous step (Minify JavaScript and CSS). For images we can use CSS sprites or embed the images.

What we’re going to do is embed the CSS background images into the stylsheets. I’ve borrowed the code from Mads Kristensen’s presentation on Build – Optimize your website using ASP.NET and IIS8.

using System;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Hosting;
using Microsoft.Web.Optimization;
 
namespace EPiServer
{
    public class CssWithImagesMinify : CssMinify
    {
        private static readonly Regex url = new Regex(@"url\((([^\)]*)\?embed)\)", RegexOptions.Singleline);
        private const string format = "url(data:image/{0};base64,{1})";
 
        public override void Process(BundleResponse bundle)
        {
            HttpContext.Current.Response.Cache.SetLastModifiedFromFileDependencies();
            base.Process(bundle);
            string reference = HttpContext.Current.Request.Path.Replace("/css", "/");
 
            // When publishing the bundler can be called from "/" causing image reference to be invalid.
            if (reference == "/")
                reference = "/Content/";
 
            foreach (Match match in url.Matches(bundle.Content))
            {
                var file = new FileInfo(HostingEnvironment.MapPath(reference + match.Groups[2].Value));
                if (file.Exists)
                {
                    string dataUri = GetDataUri(file);
                    bundle.Content = bundle.Content.Replace(match.Value, dataUri);
                    HttpContext.Current.Response.AddFileDependency(file.FullName);
                }
            }
        }
 
        private string GetDataUri(FileInfo file)
        {
            byte[] buffer = File.ReadAllBytes(file.FullName);
            string ext = file.Extension.Substring(1);
            return string.Format(format, ext, Convert.ToBase64String(buffer));
        }
    }
}

For all the images we want to embed we just add ?embed behind their name:

background: url('../Images/abuse.png?embed') no-repeat scroll 0 0 transparent;

We also need to update Global.asax and tell BundleTable to use our CSS Minifier instead.

protected void Application_Start(object sender, EventArgs e)
{
	var css = new DynamicFolderBundle("css", typeof(CssWithImagesMinify), "*.css");
	var js = new DynamicFolderBundle("js", typeof(JsMinify), "*.js");
 
	BundleTable.Bundles.Add(css);
	BundleTable.Bundles.Add(js);
}

The CSS files now have their background images embedded automatically!

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5IAAAAFCAYAAAA3+tN0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGFJREFUeNrs1zEKg1AQRdE/VgYN4uZcZDYXxEDSfd8W0gmeA5fpp3vVWpvSmB5pTs+0pLX3/moAAADcTlVtOe+0pyN90jf9Bu8BAADgH4YkAAAAhiQAAACGJAAAABdxCjAAa0EKFYXT/VsAAAAASUVORK5CYII=") repeat-y scroll 0 0 transparent;

There’s also a nice extension for Visual Studio that let’s right-click a folder inside Visual Studio and optimize all the images inside that folder: Image Optimizer.

I now have 99/100 in Page Speed and 95/100 in YSlow.

Further improvements

• Use a CDN – See Use a Content Delivery Network and Virtual Path Provider for Amazon S3
• Remove whitespaces and comments from HTML markup
• Optimize CSS selectors and placement of stylesheets
• Optimize JavaScript code, especially jQuery, remove inline code and update the placement of the JavaScript code
• Reduce DNS Lookups and consider using a service like Amazon’s Route 53 for faster DNS lookups

Resources

• Best Practices for Speeding Up Your Web Site
• jsPerf — JavaScript performance playground
• WebPageTest – Test a website’s performance
• Spritemapper – CSS Spritemap Generator
• Page Speed Online
• ASP.NET CSS Sprites

Related Posts:

• CSS and JavaScript compression and bundling
• Adding CSS and JavaScript files dynamically to your ASP.NET page
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• Transparent PNGs
• Installing EPiServer Live Monitor on IIS 7 running .NET 4

First problem

Where is the installation file!? After a little digging around I found out that it was in the zip file for EPiServer CMS (Live Monitor.msi). After the installation Live Monitor was now available under the Modules node in EPiServer Deployment Center.

Second problem

Since we’re using Web.config transformation for updating our configurations files (web.config, episerver.config etc) when we deploy to different environments (test, staging, production), we’ve removed the namespace for episerver.config (xmlns=”http://EPiServer.Configuration.EPiServerSection”). If you try to run the installation without this namespace, you’ll get the following error:

<episerver xmlns="http://EPiServer.Configuration.EPiServerSection">

Adding the namespace and rerunning the installation made the error disappear.

Third problem

Everything seemed to be running smoothly until I logged in and visited the Live Monitor overview. I get an error message:

I suspected something was wrong with my web.config file after the installation. Since the site is running .NET 4, everytime I update or install EPiServer products/modules I need to update the new stuff that gets added. I’m using a source control system (of course you’re too), so it was quite easy for me to spot the new stuff that the Live Monitor installation added.

<add name="svc-Integrated" path="*.svc" verb="*" type="System.ServiceModel.Activation.HttpHandler, System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" resourceType="Unspecified" preCondition="integratedMode" />

Should be:

<add name="svc-Integrated" path="*.svc" verb="*" type="System.ServiceModel.Activation.HttpHandler, System.ServiceModel.Activation, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" resourceType="Unspecified" preCondition="integratedMode" />

Cool, now I get a nice overview over the site. But there are no visitors!

Fourth and last problem

First I suspected that the tracking code wasn’t added, but a quick view source showed that everything was fine there. I then opened up Firebug and saw that I got a 404 error for TrackerHandler.ashx. Having a peek at web.config again I spotted that TrackerHandler.ascx was registered in the handlers section followed by <clear />.

<handlers>
<add name="EPiTraceTracker" path="TrackerHandler.ashx" verb="*" type="EPiServer.Trace.CMS.Handlers.TrackerHandler" />
<clear />

Moving TrackerHandler.ashx after the <clear /> removed the 404 error and we have visitors showing up on Live Monitors overview!

Related Posts:

• Manually upgrading the database from EPiServer Commerce R2 SP1 to EPiServer Commerce R2 SP2
• Faster EPiServer sites – image optimization
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• EPiServer code walkthrough #1 – 404 handler
• Part 1: Setting up the development environment – Create an EPiServer site from scratch

The other updates I’ve done is added a scheduled job that cleans up and check’s that the tagged pages still exist and that they still have their tag. You’ll need to manually set this up in admin mode. Depending on the size of the site I’ll usually set this to 30 minutes. The job goes through all pages that have a tag and validates them.

I’ve also implemented the TagEngine. This is a very first version so expect a few updates here soon. Here’s ITagEngine.cs

using System.Collections.Generic;
using EPiServer.Core;
using Geta.Tags.Models;
 
namespace Geta.Tags.Interfaces
{
    public interface ITagEngine
    {
        PageDataCollection GetPagesByTag(string tagName);
        PageDataCollection GetPagesByTag(Tag tag);
        PageDataCollection GetPagesByTag(string tagName, PageReference rootPageReference);
        PageDataCollection GetPagesByTag(Tag tag, PageReference rootPageReference);
        IEnumerable<PageReference> GetPageReferencesByTags(string tagNames);
        IEnumerable<PageReference> GetPageReferencesByTags(IEnumerable<Tag> tags);
        IEnumerable<PageReference> GetPageReferencesByTags(string tagNames, PageReference rootPageReference);
        IEnumerable<PageReference> GetPageReferencesByTags(IEnumerable<Tag> tags, PageReference rootPageReference);
    }
}

You’ll of course find Tags for EPiServer CMS on nuget.episerver.com. Go and give it a try – please let me know how things go and if you have any feedback, leave a comment, tweet me or send me an email.Related Posts:

• Tags for EPiServer CMS
• Removing duplicates from a PageDataCollection
• Creating custom templates in Visual Studio
• EPiServer Extension Methods part 2
• Using the ASP.NET Web API Framework with EPiServer

To get started we need to sign up at disqus.com. The next step is adding the necessary JavaScript code to our site template – I created a new user control that I then can add to the templates that should have comment functionality enabled.

<%@ Control Language="C#" AutoEventWireup="false" EnableViewState="false" CodeBehind="Disqus.ascx.cs" Inherits="EPiServer.Templates.Units.Disqus" %>
 
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname
 
    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    var disqus_identifier = '<%= CurrentPage.PageGuid %>';
    var disqus_url = '<%= CurrentPage.GetExternalUrl() %>';
 
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

The disqus_shortname is the shortname you used when you signed up. disqus_identifier is a unique identifier for that page (I used the CurrentPage’s PageGuid property), and disqus_url is the permalink for the page, I just used the GetExternalUrl() method of the Extensions library for EPiServer CMS for this. That’s it, now you only need to include the user control in the templates where you want to allow comments.

Since I tested this locally (not on a public domain) I had to add the following variable to get it to work: var disqus_developer = 1; – which turns on developer mode for DISQUS.

Comment count in lists

If you have a list of pages that have comments you might want to display the number of comments that they have. DISQUS provides us with additional code we can use for just this purpose.

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname
 
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

We can add this code to the bottom of our templates (right before the closing body tag). I then created an extension method for building the link to the comments.

public static string GetDisqusCommentLink(this PageData page)
{
	var link = new TagBuilder("a");
 
	string url = page.LinkURL + "#disqus_thread";
 
	link.MergeAttribute("href", url);
	link.MergeAttribute("data-disqus-identifier", page.PageGuid.ToString());
 
	return link.ToString(TagRenderMode.Normal);
}

To use the TagBuilder class you’ll need to add a reference to System.Web.Mvc.dll (version 2 ships with EPiServer CMS 6 R2).

There’s a lot more you can do with DISQUS, I encourage you to take a look at their developer docs and to try it out.Related Posts:

• Adding CSS and JavaScript files dynamically to your ASP.NET page
• Avoiding conflicts when using jQuery and EPiServer Composer
• Creating a contact form with ASP.NET MVC
• Font resizing and printing with jQuery
• Part 4: Creating the standard page – Create an EPiServer site from scratch