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.

Azure CDN, BlobStorage and ImageResizer

André Santos — Fri, 26 Jun 2015 15:48:38 +0000

In a recent project, we had the need to serve website assets and website content images through a CDN network. Furthermore, each image presented in the website content must be available in multiple resolutions.

We ended up serving both the assets and content images through the same Microsoft Azure CDN. This post describes the way we implemented it.

First the easiest part. We have our site in a Azure Website, in order to serve the site’s assets through an Azure CDN we only needed to point the CDN to the website’s URL. So, if the website’s assets are located in something like http://sitedomain/assets/*, instead of referencing the assets through a relative url such as /assets/*, we just need to use the CDN url to serve them: http://cdnurl/assets/*. Through web.config transforms we are also able to use local assets during development and change to CDN only on the production environment.

Regarding the website image content, the solution has three phases.

1. The content is managed over SharePoint 2013, and the images are no exception. We created a feature receiver that uploads to Azure Blob Storage every time an image is uploaded, or modified, on any Picture Library, and then save its known CDN URL in the library item.

string cdnUrl = Configuration.Settings.ImageUploader.CdnUrl;
string containerStr = Configuration.Settings.ImageUploader.Container;

// Retrieve storage account from connection string.
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
    CloudConfigurationManager.GetSetting(IMAGES_STORAGE_CONNECTION_STRING));

// Create the blob client.
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

// Retrieve reference to a container.
CloudBlobContainer container = blobClient.GetContainerReference(containerStr);

// Creates the container if it doesn't exist
container.CreateIfNotExists();

// Set the blobs access level to public
container.SetPermissions(new BlobContainerPermissions
{
    PublicAccess = BlobContainerPublicAccessType.Blob
});

string fileNameWithoutExtension = Path.GetFileNameWithoutExtension(file.Name);
string extension = Path.GetExtension(file.Name);

fileNameWithoutExtension += "-" + DateTime.Now.Ticks;

// Build file name to upload
string fileName = string.Format("{0}/{1}{2}", file.Item.ParentList.Title.ToLower(), fileNameWithoutExtension.Replace(" ", "-"), extension).ToLower();

// Retrieve reference to a blob named "file.name".
CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);

// Create or overwrite the "file.name" blob with contents from a local file.
using (var fileStream = file.OpenBinaryStream())
{
    blockBlob.UploadFromStream(fileStream);

    // Update SP item CDN URL column
    string finalUrl = HttpUtility.UrlPathEncode(string.Format("{0}/{1}/{2}?{3}", cdnUrl, containerStr, fileName, IMAGE_RESIZER_FIRST_PARAMETER));

    properties.ListItem[Configuration.Settings.SP_COLUMN_CDN_URL] = finalUrl.ToLower();
    properties.ListItem.SystemUpdate(false);
}

2. Having the images in a Azure Blob Storage, we decided to use the Image Resizer ASP.NET Library and its AzureReader2 plugin to resize and serve images directly through our Azure Website. The implementation is as easy as installing a nuget package: Image Resizer. After configuring the Blob Storage endpoint, and setting the prefix (we use ~/azure), we are able to access the images through an URL such as: http://sitedomain/azure/image/path/in/blobstorage. With this working we can resize and modify the images in any way available to us with the Image Resizer library and described in detail here: http://imageresizing.net/docs/v4.

3. Since our CDN is pointing directly to our Azure Website, we can use the CDN URL instead of the azure website one. For instance, the fake image I talked about the previous bullet can be accessed with the following URL: http://cdnurl/azure/image/path/in/blobstorage. This way, the first time someone opens an image through the CDN URL it is handled by the Image Resizer library. The second time, CDN has already cached it and distributed it around the world and it is served much faster!

The post Azure CDN, BlobStorage and ImageResizer appeared first on Blog IT.

cdn Archives - Blog IT

Straight A’s in WebPagetest with Umbraco

Setup

First test

First Byte Time

How to get an A

Keep-alive Enabled

How to get an A

Compress Transfer

How to get an A

Compress Images

How to get an A

Cache Static Content

How to get an A

Effective use of CDN

How to get an A

Conclusion

Azure CDN, BlobStorage and ImageResizer