HN Explorer

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

8 points by MicahWedemeyer ↗ HN
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.)

14 comments

[ 3.1 ms ] story [ 33.8 ms ] thread
mahmud
Sydney, at 7.2Mbps 3G; nearly instantaneously.
benhoyt
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.
MicahWedemeyer
Hmm, yeah. Need to get initial response time down on the server.

Thanks.

qeorge
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).

MicahWedemeyer
Thanks for the advice. I'll see if we can get away with putting the js in the footer like you say.
tdonia
Brooklyn, NY on verizon dsl(3/768): page load takes ~4s; after that the images load in less than 1s
[deleted]
(comment deleted)
quizbiz
Nearly instantaneously but please add a display:block to your nav css. :)
jrockway
The page took forever to load, but the images loaded instantaneously. I guess you need to put your index.html on cloudfront too :)
azsromej
I had the same experience, Micah (from Augusta, GA)
MicahWedemeyer
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.