help - why's this page so slow?

http://www.webpagetest.org/result/110106_2X_a7c577db5e561f792fec80747a3cf8db/

any help would be appreciated.

have set up htaccess to cache everything, used minify to combine scripts and css files, using gzip on my server’s files - but it’s still dog slow and i am not sure how to make it faster.

Lol - dog slow, I was expecting something > 20 seconds, not 3.5 :slight_smile:

Can the js be loaded at the bottom of the page instead of the head without breaking functionality (would load in parallel with images)? or even asynchronously (though that’s usually more work).

From what I can tell, al of your images for the slide show load right after each other as part of the main page load. You could load just the initial picture first and then after onLoad get the others to load and initiate the slideshow code.

It looks like you cold benefit a little bit by spriting the icons as well.

Beyond that you should look into CDN options. There are some free and low-cost options available and your images will load a fair bit quicker being served from a CDN (the green request time for each item will be reduced quite a bit).

-Pat

btw, out of those suggestions, moving the javascript would be the biggest bang and would improve the start render time which goes directly to the user experience.

Thanks pat. I’ll try these. I came across headjs.com and also defer=“defer”

either of this useful.

currently moving the js out of the head breaks something - will figure out what and proceed with your suggestions.

Thanks!

started implementing amazon’s cloud cdn and webpagetest started showing

“The test completed but there were no successful results.”
what’s that caused by? i’ve reverted the code - and it’s still giving me that result. eek!

You Did it, YOU broke WebPagetest! :wink:

Sorry for the bad timing. Something got screwed up on the WebPagetest server and it wasn’t accepting the posts of the result files (anything larger than a few K was being dropped). I bounced the server and everything should be working again.

ok - have the amazon cdn in place. seems awfully slow.

http://www.webpagetest.org/result/110122_WV_6dd686a61d3c3ccb9c3e738bd58787c4/1/details/

is there an alternate low cost higher performance option?

Try running several tests just to make sure you’re not seeing an artifact of the CDN edges getting populated. Usually the first time a CDN node sees a given request it has to go back and fetch the actual asset so it’s quite a bit slower.

That said, if you’re not tied to S3 storage for your site you have quite a few options. I’m a pretty big fan of MaxCDN (and they’re crazy-cheap) but if you need a broader footprint you’ll probably have to look into something like Akamai (I think there is a low-volume reseller of Akamai). There’s also Cloudflare which has a free entry-level offering if you wanted to try them out.

Thanks. I’ve set up an account at MaxCDN, using webpagetest’s referrer code, and am testing it now.

First impression is it’s much easier to get my site up and running compared with amazon’s cloud.

with maxcdn it took 45 minuets to get ALL of my site images using the cdn and using correct caching info.

with amazon cloud it took 3-4 hours to get some of my images loaded and caching info set and still i hadn’t set up the bulk of my product images.

left javascript in the header but wrapped it in
reference: [url]http://friendlybit.com/js/lazy-loading-asyncronous-javascript/[/url]

<script type="text/javascript">
(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://www.MYSITE.com/myscript.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

at the start of this thread the times were
Load time 3.551s
Start Render: 1.683s

currently:
[url]http://www.webpagetest.org/result/110125_DG_f88be5d833159742ab16acf9cf06177b/[/url]
Load time 2.918s
Start Render: 0.988s

so far i’ve:

  • added a cdn
  • contacted liveperson and asked them to turn off ssl for my account
  • removed a few images
  • wrapped javascript in the code given above

will now combine css images and re-write the html and css.

Nice. The images look like the long pole now so spriting as many of the icons ans possible should be a big help. Looks like your css (and as a result, some of your images) are coming from your origin server instead of the CDN. Might be worth moving that to the CDN as well.

i’ll move the css images to the cdn when I get MaxCDN to cache my images. based on this result it seems like the caching isn’t working.

http://www.webpagetest.org/result/110125_PS_11eb55648ef5683d6ec49bafc890a65c/

c.eventswholesale.com is the maxcdn CNAME hack.

Yep, looks like the caching of the images is broken because of a Vary header on the images:

Vary: Accept-Encoding

That breaks caching for images with IE :frowning: I’ll see if it’s a more general problem with MaxMind, if so I expect it will be a very urgent fix on their side.

I don’t see the Vary header on images served for WebPagetest so it might be something on your origin server (are you running Nginx?)

Apache and a tomcat module.

[hr]
for what it’s worth,
comparing images on your site, served by maxcdn and from my site i see the response headers of ‘my’ images have two extra lines:

Response Headers:
Vary: Accept-Encoding
X-Cache: HIT

seems i got the png files caching and the jpg’s to return 304’s (at least they won’t refetch the images)

  1. changing htaccess caching rules to be based on M rather than A. ex:
    ExpiresActive On
    ExpiresByType image/gif “M44692000”

  2. purging cache via maxcdn interface

BrowserMatch “MSIE” force-no-vary

added that to the htaccess file and everything’s working.

Can you do it only for image/* mime types? Otherwise there’s a (small) risk of problems for text content (though I guess since it’s all going through MaxCDN, they would be handling that part).