Hi, WPO community I found out a very nasty thing.
CSS and JS bundles makes nothing for performance, I will say more, bundling CSS files into a one file - makes worse render time =((((
one with 73 assets -no bundles
one with 22 assets -bundles
you will see absolutely no difference ((((((((((((( I am very disappointed
http://www.webpagetest.org/video/view.php?id=140409_8878af06704bd1bf2b70e8dd2ee208978683b56e&data=1
In your case, the bundled got the main image up to the screen a lot faster: http://www.webpagetest.org/video/compare.php?tests=140409_1B_cc11fd54fba48fd74210e4733f50417b-r%3A1-c%3A0-l%3ABundled%3A%2F%2Fdemo.ojega.se%2C140409_F8_6ae26911fea71464712fcf75de6ca712-r%3A1-c%3A0-l%3ASeparate%3A%2F%2Fdemo.ojega.se%2C&thumbSize=200&ival=100&end=visual (1/2 a second or so).
That said, there’s a lot of blocking behavior going on that shouldn’t be (like the js isn’t being downloaded while the css is). Are you loading the js directly through script tags or are you using inline js to generate the script src urls? It’s hard to say without seing the page source but it looks like the resources are hidden from the preload scanner (or it could be an IE 8 thing).
Also, if you have an IE conditional comment in the code then that may be causing the blocking behavior.
Thanks for answering
We have slightly changed the order of guys in waterfall
Here is what we have on demo server http://www.webpagetest.org/video/compare.php?tests=140409_QX_c5954bdb2ba83865b57d28829095f6db-r:1-c:0
Tonight we deploy bunch of performance improvements
what we did:
-sprites
-inline background images
-bundles CSS and JS
-lazy load images
-inline js and css
-compress image size
-dns prefetching
-partly deferring of Js (libs are in header, out js deffred on Onload event)
Results of optimization on live - Though we have not added optimized images in production yet (
http://www.webpagetest.org/video/view.php?id=140410_a09f6e768391524ef312029a6c5fc5f124a0643b&data=1
Nice. I’m willing to bet the the blocking behavior you are seeing with the css is because of the IE conditional comments. If you put an empty conditional comment up before any of your external links in the head it should eliminate it and get the images loading sooner. It’s a bizarre hack but very effective for IE.
Here’s an oldie but goodie article on it: Conditional comments block downloads / Stoyan's phpied.com