performance Archives - Blog IT

Straight A’s in WebPagetest with Umbraco

André Santos — Tue, 27 Nov 2018 21:40:06 +0000

Before launching a new website, there’s a checklist I go through, to make sure that everything is ready. One of the items in my checklist is to test the website against WebPagetest.

WebPagetest is a tool that was originally developed by AOL for use internally and was open-sourced in 2008 under a BSD license. The online version at www.webpagetest.org is run for the benefit of the performance community with several companies and individuals providing the testing infrastructure around the globe.

This tool tests any website against 6 major performance affecting factors, and provides a myriad of graphs and logs that make abundantly clear what might be slowing down your site.

In this post I’ll provide ways to make your site get straight A’s in WebPagetest.

Setup

To start this off, let’s setup our environment. We’ll just need the following:

Visual Studio 2017
Microsoft Azure account

In Visual Studio, let’s create a new empty ASP.NET Web Application project. Then, we’ll need the latest and greatest Umbraco NuGet package (I used version 7.12.4). Once it finishes installing, just launch the website and install Umbraco with all defaults. This will bootstrap Umbraco with the Starter Website, which we’ll use as our “guinea pig” for WebPagetest.

Next: publish it! We can use the publish wizard to automatically create our new WebApp and SQL Database in Azure. Before installing Umbraco in Azure, we’ll need to change the Web.config so that the install wizard is run again (I use Filezilla to change it in Azure):

Clear the Umbraco version number:

Clear the Umbraco connection string:

With these changes in place, we’re good to go. This time, we’ll not use the defaults in the Umbraco install wizard, since we’ll want to use the SQL Database we’ve just created in Azure.

First test

For our tests, we’ll use the people page of the Starter Website. This is the score I got with a standard (S0) database and a basic WebApp:

Since this is a very small site, only used for demonstration purposes, half of the metrics are already cleared! However, this is not usually the case for bigger websites. For this reason, I’ll still present some solutions to improve the grade for these metrics.

First Byte Time

These test measures the time it takes for the first byte to reach the client’s browser after the initial http request.

There are two main factors that influence this result:

Server power
The webpage complexity (integrations with external services, complex logic involved, etc)

How to get an A

The easiest way to mitigate this problem is by caching. You can see how to do output caching in Umbraco by reading this old post of mine: https://blogit.create.pt////andresantos/2016/06/30/umbraco-and-donut-output-cache/.

Keep-alive Enabled

Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request.

How to get an A

This setting is active by default in IIS, so, it’s also active by default in Azure WebApps, so it’s easy to get an A!

Compress Transfer

Gzip compresses your webpages, style sheets and javascripts, before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

How to get an A

Just add this setting to your Web.config file:

Compress Images

Image compression is minimizing the size in bytes of a graphics file without degrading the quality of the image to an unacceptable level.

How to get an A

In Umbraco, to get an A in this grade, you need to do two things:

Crop every image and use srcsets where you can
Use the PostProcessor plugin for Image Processor

Cropping an image is easy in Umbraco:

In order to use the PostProcessor plugin, you just need to install it via nuget: https://www.nuget.org/packages/ImageProcessor.Web.PostProcessor/1.3.1.25.

Cache Static Content

Static content is content that changes rarely. For this reason it can be cached in the user’s browser to avoid downloading the same file over and over again.

How to get an A

Just set the time it takes for the content to expire in the user’s browser and add extra mime types if you want:

Effective use of CDN

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

How to get an A

In Umbraco, you can achieve this last grade by doing two things:

Use an Azure Blob Storage for media storage by installing this nuget package: https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure.
Create an Azure CDN for serving these blobs through a content delivery network.

After creating an Azure CDN service and waiting about an hour for it to be available, the following presents my configuration for the media assets to be provided by it:

Conclusion

So, if you followed these tips correctly, you’ll be able to run WebPagetest and get the same result as I did:

You can find the complete report here: https://www.webpagetest.org/result/181127_2A_bea6941dcd20d38ab54c29409fca9363/.

The post Straight A’s in WebPagetest with Umbraco appeared first on Blog IT.

Umbraco and Donut Output Cache

André Santos — Thu, 30 Jun 2016 14:22:01 +0000

Donut Output Caching is a type of output caching where certain parts of a web page are not cached. It’s a simple way of boosting your site performance!

ASP.NET doesn’t provide a native way of donut output caching, so we must resort to a great NuGet package called MVCDonutCaching. You can read all about it here: http://www.devtrends.co.uk/blog/donut-output-caching-in-asp.net-mvc-3.

Since Umbraco is built on top of ASP.NET MVC, we can easily use this package on our websites. There are, however, some caveats, because Umbraco doesn’t use the native MVC routing.

For Umbraco, every page that uses the same document type is processed through the same route, therefore, if we have 100 news articles that use the NewsItem document type, from the moment we open one news article page, every other news item page will display the same information, despite having a different URL!

The way to bypass this issue is the following:

Create a Global.cs file that includes the logic to cache a page based on their url and not the document type

namespace CreateIT.Web
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Umbraco.Web;

    public class Global : UmbracoApplication
    {
        public override string GetVaryByCustomString(HttpContext context, string custom)
        {
            if (custom.ToLower() == "url")
            {
                return "url=" + context.Request.Url.AbsoluteUri;
            }

            return base.GetVaryByCustomString(context, custom);
        }
    }
}

Then, instruct Umbraco to use this class when launching the UmbracoApplication by changing the Global.asax file:

<%@ Application Codebehind="Global.cs" Inherits="CreateIT.Web.Global" Language="C#" %>

Finally, setup an Output Cache profile in your Web.config:

<system.web>
    (...)
    <caching>
      <outputCacheSettings>
        <outputCacheProfiles>
          <add enabled="true" name="CreateIT.Actions" duration="900" location="Server" varyByCustom="url" varyByParam="*" />
        </outputCacheProfiles>
      </outputCacheSettings>
    </caching>
</system.web>

And decorate the chosen controllers (that you used to hijack the Umbraco routes) with the Donut Output Cache attribute:

[DonutOutputCache(CacheProfile = "CreateIT.Actions")]
public class HomepageController : Umbraco.Web.Mvc.RenderMvcController
{

If you wish to exclude a certain part of your page from the cache, just create a Surface Controller action that returns a partial view and use the extension method provided by MVCDonutCaching for @Html.Action().

The post Umbraco and Donut Output Cache appeared first on Blog IT.

Umbraco profiler

André Santos — Wed, 08 Jun 2016 11:16:45 +0000

Quick tip:

If you need to find which part of your Umbraco application is slowing the site down, follow these steps:

Set the debug property of the compilation section of your Web.config to true: debug=”true” batch=”false” targetFramework=”4.5″>
- If you’re using an older version of Umbraco, you also probably need to set the umbracoDebugMode app setting to true in the same config file:
Add the query string ?umbdebug=true to your Umbraco page URL
Thats it!

umbraco profiler

It uses Mini Profiler, so you can add your own profile stops, but out-of-the-box it already analyses the time it takes to render each view.

Happy profiling!

The post Umbraco profiler appeared first on Blog IT.

SharePoint Tunning Session

Miguel Isidoro — Tue, 14 Oct 2014 21:54:32 +0000

Last week I delivered a session at SharePoint Portuguese Community 36th event.

My session was entitled SharePoint Tunning, focused on techniques used to improve the performance of a SharePoint farm. The main topics of the session were:

SQL Server performance tips (most of the presentation, since performance in SharePoint is guaranteed mainly at SQL Server level)
SharePoint farm performance tips
SharePoint development tips

You can find the slide deck here. I hope you understand Portuguese since the slide deck is in my mother language :).