Stephan Lonntorp
Oct 26, 2018
(3 votes)

Performance Optimization: Preloading required client resources and pushing them to the browser with HTTP/2 Server Push

Today, a colleague of mine asked me if we could utilize the new HTTP/2 Server Push feature in Cloudflare, for one of our DXC-Service clients. I thought it wouldn't be too hard to accomplish, and I was right.

The HTTP/2 Server Push feature in Cloudflare relies on the Link HTTP Header, that can be used instead of a regular <link rel="preload"> element in the <head> of your page, and works like this: Any resources you specify in the Links header, will be checked if it is local, and if it is, pushed along with the page directly to the client, and removed from the HTTP header. Resources that aren't local are left in the header value, so your clients can still benefit from preloading. Read more about this here. Please, note, that even if you don't use DXC Service, you can still use Cloudflare, and even if you don't use Cloudflare, your visitors can still benefit from asset preloading.

If you aren't using ClientResources for your own styles and scripts, either implement that, or just add them manually in the module.

Step 1: If you are using DXC-Service, email and kindly ask them to enable the HTTP/2 Server Push feature in Cloudflare for your subscription.

Step 2: Implement an IHttpModule like this:

using System.Collections.Generic;
using System.Linq;
using System.Web;
using EPiServer.Framework.Web.Resources;
using EPiServer.ServiceLocation;

namespace My.Fully.Qualified.Namespace
    public class AssetPreloadModule : IHttpModule
        public void Init(HttpApplication context)
            context.PreSendRequestHeaders += SendLinkHeaderForRequiredResources;

        private static void SendLinkHeaderForRequiredResources(object sender, System.EventArgs e)
            if (application.Context.Response.ContentType == "text/html")
                var requiredResources = ServiceLocator.Current.GetInstance<IRequiredClientResourceList>().GetRequiredResourcesSettings().ToArray();
                var requiredResourceService = ServiceLocator.Current.GetInstance<IClientResourceService>();
                var assets = requiredResources.SelectMany(
                    setting => requiredResourceService
                        .GetClientResources(setting.Name, new[] { ClientResourceType.Script, ClientResourceType.Style })
                        .Where(x => x.IsStatic), (setting, clientResource) => GetPreloadLink(clientResource)).ToList();
                if (assets.Any())
                    AddLinkTag(application.Context, assets);

        private static AssetPreloadLink GetPreloadLink(ClientResource clientResource)
            var link = new AssetPreloadLink
                Type = ConvertType(clientResource.ResourceType),
                Url = clientResource.Path
            return link;

        private static AssetType ConvertType(ClientResourceType resourceType)
            switch (resourceType)
                case ClientResourceType.Script:
                    return AssetType.Script;
                case ClientResourceType.Style:
                    return AssetType.Style;
                    return AssetType.Unknown;

        private static void AddLinkTag(HttpContext context, IEnumerable<AssetPreloadLink> links)
            context.Response.AppendHeader("Link", string.Join(",", links));

        public void Dispose()

    internal class AssetPreloadLink
        private const string Format = "<{0}>; rel=preload; as={1}";
        public string Url { get; set; }
        public AssetType Type { get; set; }
        public bool NoPush { get; set; }

        public override string ToString()
            if (Type != AssetType.Unknown)
                var output = string.Format(Format, Url, Type.ToString().ToLowerInvariant());
                if (NoPush)
                    return output + "; nopush";
                return output;
            return string.Empty;

    internal enum AssetType
        Unknown = 0,
        Script = 100,
        Style = 200,
        Image = 300

Step 3: Add the module to your web.config

    <modules runAllManagedModulesForAllRequests="true">
      <add name="AssetPreloadModule" type="My.Fully.Qualified.Namespace.AssetPreloadModule, My.Assemblyname" />

Step 4: Build, run, and watch your conversion rates soar!

Note: Thanks to Johan Petersson for alerting me to the fact that I appended the header to every request. Although my assumption was correct, in that requests for resources other than html requests won't have any required resources in the IRequiredClientResourceList, executing the lookup for those requests was unnecessary. If you manually add resources that are not in the list, the check with assets.Any() can be removed.

Oct 26, 2018


Johan Petersson
Johan Petersson Oct 26, 2018 08:32 PM

Nice solution. Maybe you want to consider just sending these on html requests? Now these headers are apended to ALL requests.

Stephan Lonntorp
Stephan Lonntorp Oct 26, 2018 08:37 PM

Thanks for the feedback, I readily admit that I haven’t tested it that thoroughly.

My assumption was that requests for resources won’t have any required resources in the list, so there shouldn’t be any resources to send, but I’ll have to test that to verify. 

valdis Oct 30, 2018 12:52 PM

hmm.. interesting. this might be a good addition to upcoming package ;)

Please login to comment.
Latest blogs
Zombie Properties want to Eat Your Brains

It’s a story as old as time. You work hard to build a great site. You have all the right properties – with descriptive names – that the content...

Joe Mayberry | Mar 29, 2023 | Syndicated blog

Optimizely finally releases new and improved list properties!

For years, the Generic PropertyList has been widely used, despite it being unsupported. Today a better option is released!

Tomas Hensrud Gulla | Mar 28, 2023 | Syndicated blog

Official List property support

Introduction Until now users were able to store list properties in three ways: Store simple types (int, string, DateTime, double) as native...

Bartosz Sekula | Mar 28, 2023

New dashboard implemented in CMS UI 12.18.0

As part of the CMS UI 12.18.0 release , a new dashboard has been added as a ‘one stop shop’ to enable editors to access all of their content items,...

Matthew Slim | Mar 28, 2023

How to Merge Anonymous Carts When a Customer Logs In with Optimizely Commerce 14

In e-commerce, it is common for users to browse a site anonymously, adding items to their cart without creating an account. Later, when the user...

Francisco Quintanilla | Mar 27, 2023

How to Write an xUnit Test to Verify Unique Content Type Guids in Content Management

When developing an Optimizely CMS solution, it is important to ensure that each content type has a unique GUID. If two or more content types share...

Minesh Shah (Netcel) | Mar 27, 2023