Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jeffrey Weinstein 67 posts 313 karma points
    Jul 25, 2019 @ 06:53
    Jeffrey Weinstein
    0

    Umbraco V8 slow images with CDN and azure cache

    Hello,

    I deployed azure filesystem as well as imageprocesing pipeline with azure cache and now Im finetuning the perf and the images are super slow.

    I also implemented lazy loading so content above the fold would load faster.

    Now I'm dumbfounded with super slow performance of images.

    If you take this page for instance - https://www.duckferries.com/bali/fast-boat-companies/eka-jaya

    and when you scroll down, its super slow the loading of the images.

    Any idea how to make it blazin fast? I'm looking for something 50-200 ms.

    Cheers

  • Marc Goodson 2097 posts 13921 karma points MVP 8x c-trib
    Jul 27, 2019 @ 08:38
    Marc Goodson
    100

    Hi Voitech

    Normally with a CDN + Azure implementation, the first request for the image is via the CDN url

    eg if you have an image in Umbraco, at /media/1234/superboatpic.jpg

    and your CDN domain is https://cdn.duckferries.com

    Your html should render it as:

    https://cdn.duckferries.com/media/1234/superboatpic.jpg

    if the image is already in the CDN it's returned from the CDN, Umbraco doesn't see the request.

    If it's not in the CDN, you configure in Azure the location of where the images are coming from as your Umbraco site, so the CDN would make a request to Umbraco for the image at /media/1234/superboatpic.jpg

    Now if you have ImageProcessor configured with it's cache also in blob storage... then ImageProcessor will look for a cached version of the processed image in it's cache storage area...

    ... if not, ImageProcessor will process the image with any querystring parameters and return the processed image to the CDN with direction to the cached storage location...

    So there is overhead on the first request but superfast thereafter...

    ... what you have in your page however are relative urls in the HTML, and also img srcsets, and these are processed through Umbraco on each request and bypassing the benefits of having a CDN!

    Have a look at this site, https://www.antiquestradegazette.com/guides/collecting-guides/clarice-cliff/ and the html of how the images are written out in the src and see these are requested first via the CDN.

    regards

    Marc

  • Jeffrey Weinstein 67 posts 313 karma points
    Jul 29, 2019 @ 16:01
    Jeffrey Weinstein
    0

    yeah, this makes sense 100%, thanks Marc!

    I want to add - I'm using Azure with Akamai CDN (because at the time of writing of this post Verizon doesn't gzip anything more than 1MB)

    And then I would have URL with with and height cropping for imageprocessor, however there Azure CDN would cache only 1 image per url with querystring.

    So you have to change the setting to cache each version different by querystring - Cache every unique URL

    More about it you can read here https://docs.microsoft.com/en-us/azure/cdn/cdn-query-string

  • Planx42 14 posts 55 karma points
    Aug 21, 2019 @ 03:09
    Planx42
    0

    Hi Vojtěch,

    Are you able to share your configuration for this please? (web.config, cache.config and security.config)

    I am also using Umbraco 8 but I noticed on your website all of your images are coming directly from your CDN url with a direct 200 get and not with a 302/200 request.

    Are you using the AzureBlobCache plugin for this? I have tried replicating the behaviour of your website and there is a setting for "StreamCacheImage" but when turning this to true my images are loading from http://mywebsite.com/media/ and are very slow. When using this to false I am getting first a 302 request then 200 get to my CDN url. This is somewhat faster but still slower than my previous site.

    I was previously using the package AzureCDNToolkit to get the CDN link directly with GetCropCdnURL. This was very fast but the package is no longer supported on Umbraco8. Please let me know how you have accomplished this to get the CDN cache url of images directly, thanks!

  • Jeffrey Weinstein 67 posts 313 karma points
    Aug 21, 2019 @ 07:55
    Jeffrey Weinstein
    0

    Hello,

    here is my other post about it

    https://our.umbraco.com/forum/using-umbraco-and-getting-started/98364-compression-of-generated-images-via-remote-service

    I ended up ditching azureStorageCache - because of the redirect. The way it works now it's the CDN domain (https://duckferries-web-prod.azureedge.net) is proxy is pointed to the WWW domain (https://www.duckferries.com). That way if the image is not present in the CDN you hit your webserver with ImageProcessor pipeline. You have to configure CDN to register the querystring to make it work.. That in my mentioned post above..

    Here are my configs.

    CacheConfig

    <?xml version="1.0" encoding="utf-8"?>
    <caching currentCache="DiskCache">
      <caches>
        <cache name="DiskCache" type="ImageProcessor.Web.Caching.DiskCache, ImageProcessor.Web" maxDays="365" memoryMaxMinutes="1" browserMaxDays="7">
          <settings>
            <setting key="VirtualCachePath" value="~/app_data/cache" />
          </settings>
        </cache>
      </caches>
    </caching>
    

    here is security config.

    <?xml version="1.0" encoding="utf-8"?>
    <security>
      <services>
        <!--<service name="LocalFileImageService" type="ImageProcessor.Web.Services.LocalFileImageService, ImageProcessor.Web" />-->
        <!--Disable the LocalFileImageService and enable this one when using virtual paths. -->
        <service prefix="media/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">
          <settings>
            <setting key="Container" value="umb-media" />
            <setting key="MaxBytes" value="8194304" />
            <setting key="Timeout" value="30000" />
            <setting key="Host" value="https://xxx.azureedge.net/" />
          </settings>
        </service>
        <service prefix="remote.axd" name="RemoteImageService" type="ImageProcessor.Web.Services.RemoteImageService, ImageProcessor.Web">
          <settings>
            <setting key="MaxBytes" value="4194304" />
            <setting key="Timeout" value="3000" />
            <setting key="Protocol" value="http" />
          </settings>
          <whitelist>
          </whitelist>
        </service>
      </services>
    </security>
    

    And here is my CDN creating URL helper method

        public static class CdnUrl
        {
            public static IHtmlString GetCdnUrl(this UrlHelper urlHelper,
                IPublishedContent mediaItem,
                int? width = null,
                int? height = null,
                string propertyAlias = Umbraco.Core.Constants.Conventions.Media.File,
                string cropAlias = null,
                int? quality = null,
                ImageCropMode? imageCropMode = null,
                ImageCropAnchor? imageCropAnchor = null,
                bool preferFocalPoint = false,
                bool useCropDimensions = false,
                string furtherOptions = null,
                ImageCropRatioMode? ratioMode = null,
                bool upScale = true,
                bool htmlEncode = true)
            {    
    
                var url = Configuration.CdnEndpoint +
                          urlHelper.GetCropUrl(mediaItem, width, height, propertyAlias, cropAlias, quality, imageCropMode,
                              imageCropAnchor, preferFocalPoint, useCropDimensions, false, furtherOptions, ratioMode,
                              upScale, htmlEncode);    
    
                return new HtmlString(url);
            }
        }
    

    The important thing is CdnEndpoint which is ConfigurationManager.AppSettings["mediaCdnEndpoint"]

    which is my CDN proxy to WWW on Azure..

    Than its uses like this

     <meta property="og:image" content="@CdnUrl.GetCdnUrl(Url, content.CoverImage, width: 800, height: 800, quality: 80)" />
    

    And that's it I guess, ping me if need more information..

  • Marc Goodson 2097 posts 13921 karma points MVP 8x c-trib
    Aug 21, 2019 @ 08:30
    Marc Goodson
    0

    Hi Planx42

    Key thing is to make sure in your html you are requesting the image first via the CDN

    <img src="https://cdn.mydomain.com/media/someimage.jpg?width=40" />
    

    and the CDN is then setup, if the image doesn't exist in the CDN to request it from your site via the /media folder (including querystrings), which then enables ImageProcessor to do it's thing, and return the processed image from it's image processing cache

    By default this will be via a 302 redirect but with

     <setting key="StreamCachedImage" value="true"/>
    

    the image should be streamed back to the CDN, so future requests do not involve a redirect, or any request to the umbraco site and are served directly from the CDN.

    (this is different to how you would work with the AzureCDNToolkit, where you'd be trying to get the CDN url before rendering the page)

    regards

    Marc

  • Tito 313 posts 622 karma points
    Feb 28, 2020 @ 18:59
    Tito
    0

    Hi Marc, how can i configure the cdn to request media folder if the image doesnt exist? I have configured cdn using Azure and the endpoint but i cant find that option....

  • Planx42 14 posts 55 karma points
    Aug 22, 2019 @ 06:29
    Planx42
    0

    Hi Vojtěch,

    Thanks very much, it is working great! I was able to take your example code and added a key in my web.config for my CDN root. My endpoint is now pointing to the website root instead of Blob Storage account. Now the images are loading much faster than the delay I was getting for each image request. Very much appreciate the suggestions and example!

    Thanks Marc appreciate the description of how this can be setup to work with AzureBlobCache better and I will try that also.

Please Sign in or register to post replies

Write your reply to:

Draft