Notes from the Field: Office 365 and Content Delivery Network (CDN)

As you work with Office 365, and then with SharePoint Online, there comes a time where you need to store some static images, CSS or JavaScript that you need to cache so that it does not make the site slower than it needs to be. That’s where a Content Delivery Network or commonly called CDN can be used.

CDNs are widely used in today’s Internet landscape, improving the delivery of a significant percentage of all Internet traffic worldwide. But what does that mean, and what really is a CDN? 

A content delivery network is a highly-distributed platform of servers that responds directly to end user requests for web content. It acts as an intermediary between a content server, also known as the origin, and its end users or clients. Downloading common things like icons over and over again can take up network bandwidth that can be better used for downloading important personal content, like email or documents. Because Office 365 uses an architecture that includes CDNs, the icons, scripts, and other generic content can be downloaded from servers closer to client computers, making the downloads faster. This means faster access to your personal content, which is securely stored in Office 365 datacenters.

The whole of Office 365 uses CDN’s for its own components. In fact they use CDN’s from Akamai and then from Microsoft Azure. Both of these CDN solutions have a global reach enhancing the reach of the service to more corners of the world. The content that is stored there includes general Office 365 scripts, files, and images. For example, when you, logon to portal.office.com, the images are pulled from the nearest CDN to speed up the page load times. Other examples include Office 365 ProPlus storing the installation bits on a CDN to speed up the amount of time it takes to download the latest version of Office. There is also some proprietary content that is stored on CDNs such as the video files for Office 365 Video. Once you upload the videos, the files are encrypted and then stored in their encrypted format with Azure Media Services. When the Office 365 video player retrieves the video, it is first cached to the nearest CDN before being downloaded to speed up the amount of time it takes to download the video.

So, I hear you saying that’s great but what performance increases can we expect? If we load a SharePoint Online site and use our browser debugging tools, we can see what the performance increase would be if we just cached everything. The following image shows the time it took to load a standard Modern UI SharePoint Library with 10 documents.

If we were to use a cache solution, then it would change to this:

Notice the size decrease and then about a second of time shaved off the load time. 

The problem that exists is that storing everything out in a CDN somewhere can be a problem in itself, due to the roundtrip and external connection to the CDN. However, it can be much faster than loading it every time from the disk and site itself.

The good news we can use a 3^rd Party, Microsoft Azure or even a Preview feature that is available for Office 365. To use the Office 365 CDN it becomes as simple as allocating a place within SharePoint such as document library and then mapping that using PowerShell. To do this you need to make sure you have the SharePoint Online Management Shell installed which can be downloaded from here: https://www.microsoft.com/en-us/download/details.aspx?id=35588

Next you need to connect to the SharePoint Online Administration URL using the steps below:

When prompted completed the credentials.

Check the value of the $creds variable

Connect to the SharePoint Online Service using the added credentials.

Once connected run Get-SPOTenant and check the values of the “PublicCdn…..” properties.

As you can see it is not enabled by default, so it needs to be enabled, and other properties set. To enable the CDN and set properties use the “Set-SPOTenant” command.

Finally, we need to set the “New-SPOPublicCdnOrigin” to the SharePoint Document Library you wish to use within your site. For me I am using a newly created one called “Assets”.

To run the command simply populate the URL with the direct link to the Document Library within SharePoint Online.

This will then create the CDN and return you the identifier that you will need to get to the files that you store within it. To see the ID run “Get-SPOPublicCdnOrigins”.

The ID that is returned must then be used when trying to retrieve any asset that is stored within the library. The following format is to be used:

https://publiccdn.sharepointonline.com/{Tenant Name}/{CDN ID}/{Library Name}

As an example, within my test tenant the URL to a file would be:

https://mysampletenant.sharepoint.com/mysampletenant/1315650bf112f74bc1ddac154d849ea46aae75cb1510803c6e67a75a78960eb07392d45/assets/image.jpg

This URL does not mysteriously become public to anyone, currently you can only access files from the CDM when calling them from within SharePoint Online. To test this without making updates to your SharePoint Online site, you can use Fiddler and add a header to the request using this format:

Referer:https://mysampletenant.sharepoint.com

That’s it, nice and simple and a great option when building solutions within SharePoint Online, that requires various CSS, Images or even JavaScript to be reused and cached.