Friday, July 20, 2018

How to use Microsoft OneDrive 2018 as Content Delivery Network (CDN)

For web developers who are mindful of Page Speed scores, finding a free Content Delivery Network (CDN) to load your static content from a cookie-free domain is always nice to have!!!

This is an examination of using Micorosoft OneDrive as a possible CDN for 2018. I will test this using https://onedrive.live.com to hosting an image 
MobiusColorGoodFinalRefined.png  (514 kBs), that is used as background image on an external site and can be lazy loaded.

Here's how to get the embed link for a resource on OneDrive. 

OneDrive URL for Image File

ImportantFor images only, this embed link is a direct download link and is not redirected. 









This will open the right-pane, where you can "Copy the URL to embed image" 




The embed URL for images only works as direct download link. This link does not set a cookie or require authentication parameters when requesting this link. Furthermore, it is not redirected, which theoretically should speed up the request.

Here's the link https://nfpjyq.sn.files.1drv.com/y4mdDSDVfWaN9o1W3c2uKqn3_74fyNXNzWRohoRAagyFk8m-WRN-f3oHMS93u5JVVvyyikcB8H7hftg5ZUx35li_fA1R9vIwddOw-zLLu3kD0Y0k8-v9oJD0uULz4KW1Fj8FTKmLampi9up0qeJR98sJjfwBbAlRDQR-3074iMAzREfxwahKpArcL7Yqyf32P9QsavulPuAjo28VzFh1xeHAA?width=1024&height=493&cropmode=none

The link request in Chrome timings window;


The total request time was unimpressive .9 secs. This disqualifies this techniques as a possible CDN, IMHO. 

OneDrive URL for All Other Resources

But for all other files this direct download link is not available. For example,  let's look at a common website Javascript file "scroll.js".

If you request an Embed URL you'll get an URL starting with https://onedrive.live.com/embed? and contains parameters authkey and resid. 

<iframe src="https://onedrive.live.com/embed?cid=5C91C14607824FC4&resid=5C91C14607824FC4%211671&authkey=AINpYbSMwQFVSu8" width="98" height="120" frameborder="0" scrolling="no"></iframe>























This URL does not work directly in the browser, you get an "This item won't load right now." error.

https://onedrive.live.com/embed?cid=5C91C14607824FC4&resid=5C91C14607824FC4%211671&authkey=AINpYbSMwQFVSu8

you can covert this link into to get direct download link, as follows;

https://onedrive.live.com/download?cid=5C91C14607824FC4&resid=5C91C14607824FC4%211671&authkey=AINpYbSMwQFVSu8

This link can embed in a website as a resource. But there's a caveat, this request sets a cookie and the URL is redirected.

How fast is this OneDrive as a CDN service for resources (other than images)?

Now let's examine in detail some network timings from FireFox Inspect window.


Here we see the download?cid link return a 302, and bounce back with the fulfilled  resolved 200 request for MobiusColorGoodFinalRefined.png. 

The total request time was 1.732s! 

Now lets examine some network timings from IE Inspect window.











Here we see the download?cid link return a 302, and bounce back with the fulfilled  resolved 200 request for MobiusColorGoodFinalRefined.png. 

The total request time was 1.148s! 

Now lets examine some network timings from Google Chrome Inspect window.

Interesting Google Chrome resolved this in one step for a super efficient total request time was .6 seconds! 


Conclusion

In the end, OneDrive is not an effective free Content Delivery Network (CDN) to load your static content, because resources take ~1 second of load time for most browsers. 

However, if you filter for Chrome in your JS code, it might suffice. 



No comments:

Post a Comment