Poll: How fast do the images load on my app? | Hacker News Reader

Poll: How fast do the images load on my app?

Summary: http://doleaf.com - How fast do the images load?

I'm trying to get Amazon CloudFront set up as my CDN, and I'm trying various tricks like using multiple CNAMEs to trick the browser into opening multiple connections to CloudFront. So far, everything has just made it slower, so I'm back to a single CNAME, but even that is kind of slow.

Please go to http://doleaf.com and see how long it takes to load all the plant images. It's tough for me to get a clear idea since there are many levels of inter-related caching going on (DNS, CloudFront, browser, etc.)

View on HN

It depends what you mean -- for me (Christchurch, New Zealand) it took about 5-7 seconds just to get the page up, then 2-3 seconds after that to load the plant images. The 2-3 seconds wouldn't bother me much, but the 5-7 before anything shows up does.

Hmm, yeah. Need to get initial response time down on the server.

Thanks.

I had a similar experience - blank page for 5 seconds or so, but once the DOM loaded the images loaded in a flash. Its clear you've worked hard on this, its impressive.

Regarding the initial delay, I have a suggestion. The way the page is including your Javascript files is likely causing more of a delay than you are saving using CloudFront. Really easy to fix though:

Combine base_packaged.js, application.js, and listings.js and move the combined <script> tag to the bottom of the page, right after your </div> tag for #footer-wrapper. base_packaged.js alone is 252 KB, and the browser will block until its finished downloading. This means it won't be rendering any elements which occur after the script include until the download completes. Because your include is in the head the user sees nothing but the title until the script has downloaded. Importantly your img tags aren't rendered yet, and so the image downloads aren't starting for several seconds, during which time the user is left with no feedback.

Generally, move every script to the bottom of the page unless there's a reason you can't (e.g. you're using document.write to render page content).

Thanks for the advice. I'll see if we can get away with putting the js in the footer like you say.

Took just over 5 seconds, but most of that was waiting for the page itself (especially the js).

Here's a screenshot of the Firebug net tab: http://img155.imageshack.us/img155/5097/doleaffirebug.png

The page took forever to load, but the images loaded instantaneously. I guess you need to put your index.html on cloudfront too :)

I had the same experience, Micah (from Augusta, GA)

Sydney, at 7.2Mbps 3G; nearly instantaneously.

Brooklyn, NY on verizon dsl(3/768): page load takes ~4s; after that the images load in less than 1s

Direct link: http://doleaf.com

Nearly instantaneously but please add a display:block to your nav css. :)

Thanks everyone. Resolution: stop worrying about CloudFront and focus on moving the very heavy JS file out of the head.

This advice has been extremely useful.

Fast. Cool site.

Reply on news.ycombinator.com