It all works fine. Except the urls in the code are all showing as relative urls e.g. '/media/1004/bla.jpg?anchor=center&mode=crop&width=400&heightratio=1&format=jpg&quality=90&slimmage=true'
that gives me a 302 to the CDN url. So it works.
Except it almost defeats the purpose of the CDN, since every image request has to first go through the webserver anyway. And I looked at it. Each request takes ~240ms even, when the image is already cached. Which is huge considering that the CDN only takes 12ms to deliver the image.
To me that's 240ms wasted and lots of server resources wasted.
So my question is: How can I get the CDN url directly rendered into the HTML?
But the HTML still shows "'/media/1004/bla.jpg?[...]"
Any other ideas?
Just to confirm, that that's correct: My template generates the URLs like this:
@Umbraco.TypedMedia(Model.Content.Thumbnail).Url
or
@Umbraco.TypedMedia(Model.Content.Thumbnail).GetResponsiveImageUrl(261, 0)
Did you check with browser developer tools, where the browser actually downloads the image from. AFAIK you should see the URL you're mentioning in your HTML, but when requesting from the server, the server will respond with a 302 to the CDN url.
As mentioned above the url in the html is relative, but I can see in the dev tools, that it redirects to the CDN. But that's exactly what I'm trying to avoid.
I want the CDN url directly in the HTML, to avoid the extra load, as outlined in my initial questions.
How would that work? Wouldn't you need to serve the image through the imageprocessor or present the image first as a request? How would the cache even exist it not requested at least once?
You can test this out by going directly to your blob and uploading an image to it. You will see there will be no cache behind it until you request it. If you set up your blob and cdn together you get this out of the box.
I think if you were to just try and hit your /media/image.jpg from a browser on its own and allow the 302 to the cdn you will see it doesn't cost you anything extra vs just going directly to the cache.
We are using the cdn and haven't had any issues.. first load from media is always going to be slow but thats because of the write to cache.
Don't get me wrong, it all works fine.
Except it's not optimal :)
Two ways it could work:
We could have an extension function like ResolveMediaUrl() that would create the required images in the cache and then return the cdn url. (would really slowdown the request though)
We have the same extension function as above, that checks whether the required image exists in the cache and returns the cdn url, if not it would just return the relative url.
Option two seems pretty intuitive to me, I guess it only relies on the cache check to be fast & efficient.
I know what you mean, I was a bit surprised by the redirects as well.
The Azure blob cache setup has a setting called StreamCachedImage, which will alter the ways this works as far as I remember. As I understand it, the image is streamed through the site server when this is enabled, and should only be used when serving images through the CDN.
I haven't tried running a site with this switched on for anything else but short test periods, so I can't tell you what this setting will do to your bandwidth consumption and such, but it might be something to try out.
I haven't used it as is, but stumbled across it on GitHub before it was complete and used the idea of having a ResolveCdn() method make an HTTP HEAD request to get the redirect URL and then cache that URL. The downside that I have encountered is that it sometimes slows the initial page request down as it is serially making these calls to get the URLs when they are not in runtime cache. I'm not sure there is a good solution other than warm the site up somehow. (Although I did customize my code - which is not the exact code in the package I listed above, so that it goes ahead and returns the HTML with the /media/... URL the first time the image is referenced and then gets and caches the redirect URL via an async call.)
Umbraco media through CDN
I've setup my media through blob storage and cdn based on the official documentation here: https://our.umbraco.org/documentation/Umbraco-as-a-Service/Set-Up/Media/
It all works fine. Except the urls in the code are all showing as relative urls e.g. '/media/1004/bla.jpg?anchor=center&mode=crop&width=400&heightratio=1&format=jpg&quality=90&slimmage=true' that gives me a 302 to the CDN url. So it works.
Except it almost defeats the purpose of the CDN, since every image request has to first go through the webserver anyway. And I looked at it. Each request takes ~240ms even, when the image is already cached. Which is huge considering that the CDN only takes 12ms to deliver the image.
To me that's 240ms wasted and lots of server resources wasted.
So my question is: How can I get the CDN url directly rendered into the HTML?
Thanks!
Hi Sam and welcome to our,
Great that you have followed the guide on our documentation for Umbraco as Servive. https://our.umbraco.org/documentation/Umbraco-as-a-Service/Set-Up/Media/
Have you add your your Azure CDN, your blob account and the url to the site on UaaS in the whitelist section, like below?
Hope this helps,
/Dennis
Hi Dennis, thanks for your reply.
Yes, all the urls are in the whitelist.
Except that my cdn url looks like this: http://rms-cdn-web-media.azureedge.net/
But the HTML still shows "'/media/1004/bla.jpg?[...]"
Any other ideas?
Just to confirm, that that's correct: My template generates the URLs like this: @Umbraco.TypedMedia(Model.Content.Thumbnail).Url or @Umbraco.TypedMedia(Model.Content.Thumbnail).GetResponsiveImageUrl(261, 0)
Hi Sam,
Did you check with browser developer tools, where the browser actually downloads the image from. AFAIK you should see the URL you're mentioning in your HTML, but when requesting from the server, the server will respond with a 302 to the CDN url.
Regards Jesper Hauge
As mentioned above the url in the html is relative, but I can see in the dev tools, that it redirects to the CDN. But that's exactly what I'm trying to avoid. I want the CDN url directly in the HTML, to avoid the extra load, as outlined in my initial questions.
To spell it out, that's what I want to see:
How do I make that work?
How would that work? Wouldn't you need to serve the image through the imageprocessor or present the image first as a request? How would the cache even exist it not requested at least once? You can test this out by going directly to your blob and uploading an image to it. You will see there will be no cache behind it until you request it. If you set up your blob and cdn together you get this out of the box. I think if you were to just try and hit your /media/image.jpg from a browser on its own and allow the 302 to the cdn you will see it doesn't cost you anything extra vs just going directly to the cache. We are using the cdn and haven't had any issues.. first load from media is always going to be slow but thats because of the write to cache.
Don't get me wrong, it all works fine. Except it's not optimal :)
Two ways it could work:
We could have an extension function like ResolveMediaUrl() that would create the required images in the cache and then return the cdn url. (would really slowdown the request though)
We have the same extension function as above, that checks whether the required image exists in the cache and returns the cdn url, if not it would just return the relative url.
Option two seems pretty intuitive to me, I guess it only relies on the cache check to be fast & efficient.
I know what you mean, I was a bit surprised by the redirects as well.
The Azure blob cache setup has a setting called StreamCachedImage, which will alter the ways this works as far as I remember. As I understand it, the image is streamed through the site server when this is enabled, and should only be used when serving images through the CDN.
I haven't tried running a site with this switched on for anything else but short test periods, so I can't tell you what this setting will do to your bandwidth consumption and such, but it might be something to try out.
Check here for how to set it up
You might want to check out this project:
https://our.umbraco.org/projects/developer-tools/azure-cdn-toolkit-for-umbraco/
I haven't used it as is, but stumbled across it on GitHub before it was complete and used the idea of having a
ResolveCdn()method make an HTTP HEAD request to get the redirect URL and then cache that URL. The downside that I have encountered is that it sometimes slows the initial page request down as it is serially making these calls to get the URLs when they are not in runtime cache. I'm not sure there is a good solution other than warm the site up somehow. (Although I did customize my code - which is not the exact code in the package I listed above, so that it goes ahead and returns the HTML with the/media/...URL the first time the image is referenced and then gets and caches the redirect URL via an async call.)Thanks Alex, that's looking pretty good, I'll investigate that one. :)
is working on a reply...