Move images and stylesheets externally to a CDN or S3 ?

[daniel20]

Hello,

Zen Cart is not designed for placing images remotely, such as at a CDN service.

However, I wonder if someone has been able to manage a patched up solution to this.

I was able to place the stylesheet in a CDN in this way:

includes/templates/your_template/common/header_html.php
around line 43:
substitute:
echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";

with:

echo '<link rel="stylesheet" type="text/css" href="http://your_link_to_your_CDN/cdn_path/stylesheet.css" />'."\n";

Where,
your_template = your template

cdn_path = what ever the path to wherever in your CDN you've placed your stylesheet(s)

your_link_to_your_CDN = whatever link you are using to fetch files from your CDN


This works like a charm, and has saved quite a bit of latency time in the case of our site.

However, most of the latency time in the front-end comes from the images. It's easy to end up with 30 or 40 images in some pages, and sometimes the number of requests can be 50 or more. This is a normal situation these days.

Perhaps, it is possible to trick zen cart to fetch images from a CDN using the same technique I used for the style sheets. However, I'm still looking where are those magic 'echo' statements where the path to the CDN can be placed safely.

Although this system would make the system to manage images more involved (having to upload normally, and then also keeping track of what's in the CDN, among other things), it would reduce dramatically the latency times of the front-end.

If somebody has played with this, please let me know. In the mean time I'll keep trying, and post here when I succeed.

Thanks.

[kobra]

most of the latency time in the front-end comes from the images. It's easy to end up with 30 or 40 images in some pages, and sometimes the number of requests can be 50 or more.

Optimize images for the web and get a hosting service that is fast
There is no need to jump through the hoops you are talking about

[daniel20]

Optimize images for the web and get a hosting service that is fast
There is no need to jump through the hoops you are talking about

Yes, that's also part of the solution. In fact, I've done that already and cut the number of images, compressed more the ones that were oversized, and used sprites wherever I could, taken out unnecessary image backgrounds, etc. I was able to cut the number of requests and saved a lot of latency time, thus far.

I also use a good host: rackspace. I'm using Rackspace's 'Cloud Sites', which are supposed to behave well with zen cart (as they say in their marketing pages, but the don't). The MySQL servers (which remain shared) tend to get over loaded too often and the delays at the back-end stage can be substantial, which adds to the problem at the front-end level due still to the number of requests and distance. We're in the process of moving to a dedicated server somewhere else to solve that part of the problem, and allow us to optimize things a bit more.

Still, and despite all of the above, there is no possible comparison with what it is possible to attain with having the images in a good CDN service, (without having to go to the extremes of Akamai). We are talking about proxy servers that have the images cached near the geographical location of the end user, and that is an ideal situation.

[kobra]

Still, and despite all of the above, there is no possible comparison with what it is possible to attain with having the images in a good CDN service,

I beg to disagree...
What are your current page parse times?
admin > config > logging > display page parse time > set to on

[daniel20]

I beg to disagree...
What are your current page parse times?
admin > config > logging > display page parse time > set to on

First thing first: Thank you both for replying to this so fast and so in context.

OK, I didn't enable the parse time display, but I went and got a cascade graph. I'm embarrassed for having chosen Rackspace without researching more. Here are the results a couple of minutes ago (not always it's been so bad, by the way):

Load Time: 19.407s
First Byte: 6.327s
Start Render: 6.982s
Requests: 56
Document Complete: 19.407s

This test was performed from Sydney.

I chose one of my worse pages. By the way I'm using 120x120 in the thumbnails, because image downloading times are negligible in comparison to the request times shown in the graphs.

Rackspace internal processing: 6.327s (totally unacceptable)
Front-end for image download: about 13s This is what I mean. The number of requests is 56, which is not exaggeratedly high now-a-days.

Of course that the users start seeing the page much before the rendering ends, but still even after we have finished moving the site to the new dedicated server located at ubiquity.com, (and I hope they are not another disappointment), it would be ideal if I could cut front-end time.

But you both may be right: the major problem may be Rackspace. In fact, before Rackspace I had a humble VPS, which behaved much, but much better.

I have a separate CDN that I'll use with ubiquity's server: I have 1Tb to spend in 1 year with MaxCDN for about $40.

My customers are really in Australia and MaxCDN won't be having edge servers in Australia but in about 6 mths. So, I may not be able to see a very significant reduction in front-end times until that happens. Right now I'm still using Rackspace's CDN, which doesn't look much as a real CDN when compared to MaxCDN.

[henrytan]

Hi guys,
I did a load test for my website, and realize the speed is too slow.

I learned that i could speed load time by using cloud computing, and hence i signed up for amazon cloudfront. In case anyone do not know what i am talking about, Cloud computing works by distributing resources from the nearest servers, and hence increases load time.

I have already gotten the images uploaded, and i got the amazon cloudfront domain given to me.

The issue i faced now, how do i ensure that all images are served from my amazon cloudfront domain, instead of my own server images folder?

If this can work in terms of increasing the load speed, it might be a viable solution for people wishing to increase their zencart website load time?

The question is which files should i edit to change the images folder location to my amazon cloudfront domain?

thanks in advance!
Henry

[DrByte]

Zen Cart's built-in code for looking up available product (and category, manufacturer, etc) images is based on being able to query the server's local filesystem.

When you move images off your server and onto an external server it no longer has any ability to do the querying to determine what's available, nor the size/dimensions of the actual image.

The "best" way to do it would be to write code to interact with your CDN's API to query the available images and retrieve the correct URLs for those images, replacing the built-in code. That's quite a lot of core code customization.

[abhishek1711]

Hi,

Just wondering if u cracked the CDN for images in zen cart

Am trying same and unable to find my way yet...

Abhishek