CODEWITHSUNDEEP
performancefirebugyslowbundling-and-minification
Hemant Tank
Hemant Tank

Reputation: 1744

Performance facts in Firebug contradict with YSlow

I've a simple ASP.Net MVC3 based web app. I've been doing some performance tuneup recently. I used Firebug in Mozilla to review the resource load size and timing. Later, I used YSlow to derive some possible optimization.

I'd like to narrow down the focus to the general optimization concept of 'bundling & minification' in which we minify js & css and bundle into a single combined js & css. As per YSlow it saves extra server requests and also some bandwidth/time. However, in my case it contradicts! I'm using SquishIt lib.

Here're my stats (pls review the attached images)

Old Login page: Requests(10), Size(434), Load Time in seconds(29), YSlow grade C(78)
New Login page: Requests(6), Size(414), Load Time in seconds(42), YSlow grade B(88)

Old original page - Original old page Here's the new optimized page - New optimized page

Ideally it must be reversed! But it looks like the combined js file is taking up more time. I had slowed down my bandwidth to get more accurate difference and I've tested it in a non-cached (also did Ctrl+F5) to ensure both the pages get a fair chance. They're on the same servre with the same setup.

Notes: Pls ignore the last image reload in the image - I did a refresh. My pre-loading some extra jQuery lib on login page so that sub-sequent pages get cached resources. You can ignore such things but pls let me know if this is possible or am I making some mistake?

One more query regarding bundling & minification - I believe its not applicable if I'm using CDN references for my resources (tehy can't be bundled). In that case what is preferred - CDN references or bundling?

Upvotes: 2

Views: 352

Answers (1)

BrianC
BrianC

Reputation: 10721

In general I think you are on the right track: fewer requests + smaller total request size = better performance for most of your users.

In your testing results, I think you're seeing a couple of things:

  1. One drawback to using larger combined files is you lose some benefit of parallel downloads. I don't think this is a major contributor in your case, but you can see in your original case that many jquery JS files are being downloaded in parallel.
  2. The total page time load can vary from run to run depending on network speed and server load. In your original case, the jquery-ui file was 222KB and took 27.8s for about 8 KB/s. In your optimized page, the new combined JS was 254KB and took 41s for speed of 6.2 KB/s. This is very rough math, but I think it might give a clue as to the differences you saw.

If your site is available on the public internet, you could use a tool like WebPageTest or GTmetrix to run some measurements from an external server (and multiple locations).

To your question of CDN versus bundling, ultimately you could test some prototypes either way to see which works better for you. One option would have large infrequently-changing files like jQuery coming from the CDN, and all of your own JS hosted on your server (bundled).

One thing to keep in mind about CDN hosting of static files, the biggest benefit comes when you have a geographically distributed user base. Then they can take advantage of a global CDN network, being served static files from a server which is closer to them (and therefore quicker). Conversely, if your user base is not spread around the world, or if this is an internal application, using a CDN might not have much benefit.

Upvotes: 2

Related Questions