How to use multiple host name to load product images

Hi,

As topic says, I want to customize Nop Commerce to load product images from multiple host name. So suppose, my domain name for store is example.com, I want few images to be loaded from, img1.example.com, few from img2.example.com, few more from img3.example.com. While storing this all images from the same folder. Apart from development, its easy to map domain to same directory.

What we need to do is, load images from different hostname to speed up loading time of the site. This is purely Performance Related enchantments.

Any idea, how to do this?

Thanks in advance.

This will have the opposite effect from what you probably intend.  Your goal should be to have as few domains linked on your page as possible.  Every time you link to an asset on another domain, the client has to do another DNS lookup.

http://developer.yahoo.com/performance/rules.html#dns_lookups

"Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads."

Looks like it's not ruled out altogether in that article.

Hi,

Thanks for reply. I agree with both of you. Its actually a kind of trade-off. On home page I have more than 80 product thumb being loaded from the same host name, which takes lot of time to load. Hence, I want to parallelize it across more than 1 host name. Thereby we are just tricking browser to cross its connections limits and it will load images parallel thinking that it is actually loading resources from different website.

Now, the question is, how to do this in Nop Commerce ? Any ideas ?

I'm still getting my head round nopcommerce, haven't yet properly started development on a site we're working on but this is how I was approaching the problem (although with only one hostname for images, easily changeable though):

I created a helper extension method to create the url for me. So, here's the usage below:

<img src="@Url.ServeImage("Content/images/banners/food.jpg")"/>

and the method:

public static string ServeImage(this UrlHelper urlHelper, string relativeImagePath)
        {
            string imageHostDomain = "";
            try
            {
                imageHostDomain = SiteConfig.GetSiteStatus() == SiteStatus.Live ? ConfigurationManager.AppSettings["ImageHost"] : ConfigurationManager.AppSettings["ImageHostDev"];
            }
            catch (Exception)
            {
                //Need to log this error
                throw;
            }
            
            return string.Format("{0}/{1}", imageHostDomain, relativeImagePath);
        }

you could easily amend this to serve from a range of possible image hostnames.

I guess I could see how 2 might be better than 1 but will it make enough difference to justify the complexity you will have to add in to support it?  You could do both and test the load times.

Here's my first guess at how to implement this.

-Determine how many domains you want to do.
-Map all your domains to the same site in IIS
-Create an overload for GetStoreLocation that accepts an integer.  Do a modulo (%) of that integer and how many unique domains you have to determine which domain to return.
-Modify the call to _webHelper.GetStoreLocation() at the bottom of PictureService.GetPictureUrl() to pass the ID of that picture.

That would probably distribute your images somewhat evenly across your domains without a lot of hassle.

I'm actually thinking of doing the same thing but only using 1 domain so that I'm not passing cookies with requests for static files.

ScariestLlama wrote:

If you change the service instead then you will update all of the Views at once.  With an extension method, you need update every view to use that instead of the Model plus remember to use it in the future when you are embedding an image.

I've come full circle on this idea.  Once my store is launched I will look at improving performance and will probably write/release a plugin for this.

AndyMcKenna wrote:

Please update here when you release a plugin for this...

Moreover, have a look at this post...

http://stackoverflow.com/questions/10584112/challenges-in-loading-images-from-cdn-on-multiple-host-name-for-e-commerce-site

What do you suggest?

Thanks

jariwalakrunal wrote:

I would advise you to reduce drastically the number of thumbs being displayed on the home page.

80 is too many, 8 is probably about right.

If you're not convinced do a test - one page with 80 on, one page with 8 on.

Ask test users to find a product from the thumbnails on both pages.

They will find the product quicker on the one with 8.

Customer finding product quickly = happy customer. Customer presented with wall of thumbnails = lost customer.

You will be creating information overload with 80.

HTH

Dave