Website download performance (images)

komodosp

Hi folks

I am currently working on a Magento website, trying to improve its performance. I'm using Firebug's "Net" panel to see where the delays are and notice something odd with the images.

Now like any Magento site, there are plenty of CSS and Javascript includes, and plenty of images.

But when downloading some of the images, there seems to be a lot of time "Waiting"... e.g.



The highlighted file is just 27.7kb - and spends only 65ms actually transferring. But there is 1.63s "Waiting". What is it waiting for? Is there any way to reduce this waiting time? It's Apache running on Ubuntu.

If I load the same image individually in the browser, the Waiting time is just about 50ms.

Creamy Goodness

at a very quick guess is there any javascript in the page that may block up the loading of the asset?

great tools in this area are:

Google page speed – https://developers.google.com/speed/pagespeed/
Yahoo YSlow – http://developer.yahoo.com/yslow/

run these and make the changes they suggest if feasible.

Trojan

Could this be related to the max number of default simultaneous http connections?

Depends on what browser you're using.
Firefox 2: 2
Firefox 3+: 6
Opera 9.26: 4
Opera 12: 6
Safari 3: 4
Safari 5: 6
IE 7: 2
IE 8: 6
IE 10: 8
Chrome: 6

(source for those numbers: http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/ )

What you can do is move some content to subdomains, e.g. img1.example.com, img2.example.com, to get extra connections. (View source on here and you'll see that boards use a similar concept by b-static.net domain.)

I have a performance optimisation case study here, you probably are aware of everything, but there might be one or two new ideas for you to use.

komodosp

Hmmm... I would think that the max number of connections affects the "Blocking" time alright... In fact as I count back the rows it seems like it begins the instance the one 6 items ago finishes, (and it is Firefox) which goes with what you're saying. It's the purple "Waiting" time I'm concerned about though.

Anyway I'll take a look at the links provided, thanks

Graham

Could you move the images onto a CDN? You'd see a double boost then as images would be delivered from a different domain as Trojan suggested and the images would be served from a point closer to your end user.

Trojan

Graham wrote: »

Could you move the images onto a CDN? You'd see a double boost then as images would be delivered from a different domain as Trojan suggested and the images would be served from a point closer to your end user.

+1

One of the reasons I like going with subdomains for images & other media starting out is it makes it very easy to transition to CDN later.

billyduk

If I am working on an image heavy site I usually dump my images into an Amazon S3 bucket and use cloudfront to serve them. There are other CDN solutions that work just as well.

colm_c

Also look at image sprites for css images. It will generally have a bigger effect than moving your images to a cdn, especially if you can move most of the CSS based ones. One image download vs multiple will nearly always win.

billyduk

colm_c wrote: »

Also look at image sprites for css images. It will generally have a bigger effect than moving your images to a cdn, especially if you can move most of the CSS based ones. One image download vs multiple will nearly always win.

^^^This^^^ will definitely give you better speeds for your css images like icons, custom social buttons, logo and small image assets. I would then use a CDN to serve any large images for things like galleries or large full width image backgrounds. Its all about working to get the best performance option for each asset.