Detect
Is Mobile

And age ago I wrote a post about serving two different versions of a web page and in this post, I am applying the same technique. The first post was about serving a 'personalised' view of a page, (before Personalisation was a thing in Sitefinity). In that article, it was about showing a special price for returning customers. This time I want to serve a slimmed-down version of my pages to mobile devices so as to increase the page display and functionality speed.

What to Target

For my site, Northcote Rugby, my mobile performance rating wasn't high yet I knew 75% of the club would be checking it via there mobile devices so I decided that there were a few things that I could get rid of. They were nice for the desktop, but not a requirement. One of these was the Facebook feed. I'm not a big fan of Facebook so that was a really quick decision. :-)

The biggest killer on mobile devices is JavaScript. The more you load and run the more impact they will have. The next biggest thing would be images. Actual HTML and CSS not so much. An example you could decide to drop the special animation tricks and not loading that big animation script.

And a quick 'Activist' plug - I really enjoyed the insight in Netflix - The Social Dilemma.

Solution

First I created an output-cache profile and added a custom attribute called varyByCustom. I used the value 'Device' but you can choose what you like.

Next, I added a new method in my Global.asax file, 'GetVaryByCustomString'. When a page is requested this method will be checked. If the page has my profile assigned that custom string variable will be populated with my value, in this case 'Device'. If so, I do a check to see if the request is coming from a mobile device browser and if so return a different string value.

public override String GetVaryByCustomString(HttpContext context, String custom)
{
    if (custom == "Device")
    {
        if (Helpers.Utilities.BrowserIsMobile(context))
        {
            return "Mobile";
        }
    }
 
    return base.GetVaryByCustomString(context, "Desktop");
}

What happens here is that two different versions of the page will be put into the output cache. One for mobile device requests and one for desktop requests. I don't think it is likely to be a big deal but do consider that this will increase the size of the storage you are using for your output cache.

In my widgets I add a property, 'IsMobileDevice'.

public Boolean IsMobileDevice
{
    get
    {
        return Helpers.Utilities.BrowserIsMobile(System.Web.HttpContext.Current);
    }
}

Of which I can use in my views.

@if (!Model.IsMobileDevice)
{
    <iframe id="JuniorFacebookFeed"></iframe>
    <script defer src="/resourcepackages/northcote/assets/js/facebook.min.js"></script>
}

Now if I browse the pages with this widget I will see it displayed on desktop devices but not on mobile ones and most importantly the Facebook script is not loaded, parsed or run meaning my performance improves.

Detecting Mobile Devices

To detect a mobile device I use a Regex from Detect Mobile Browsers dot com and a method I found on Stack overflow.

A Warning

Have a think about all the caching aspects of your site and content. What do you do and will this affect them?

As an example, if you have a service proxying all your site requests, (Impervia, Cloud Front) and you are applying caching to popular pages on your site. If the first person to request your page is a mobile device, that request will be sent to your server and Sitefinity will return the mobile version of that page. Then, the second request is from a desktop but your service provider replies, 'no worries I already have that page cached' and returns the mobile version. Or, vice-versa.

Leave a comment

Load more comments

Make a Comment

Name:

Email:

Message:

Enter the code

New code

Submit

Please check this input