WebPagetest Forums
CSS and JS Bundles are useful, yeah ? - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Discuss Test Results (/forumdisplay.php?fid=4)
+--- Thread: CSS and JS Bundles are useful, yeah ? (/showthread.php?tid=12901)



CSS and JS Bundles are useful, yeah ? - Funkerman88 - 04-09-2014 10:24 PM

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


RE: CSS and JS Bundles are useful, yeah ? - pmeenan - 04-10-2014 12:40 AM

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


RE: CSS and JS Bundles are useful, yeah ? - pmeenan - 04-10-2014 12:40 AM

Also, if you have an IE conditional comment in the code then that may be causing the blocking behavior.


RE: CSS and JS Bundles are useful, yeah ? - Funkerman88 - 04-10-2014 01:49 AM

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)
- deffer on 3dparties
- memcache on backend


RE: CSS and JS Bundles are useful, yeah ? - Funkerman88 - 04-10-2014 02:51 PM

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


RE: CSS and JS Bundles are useful, yeah ? - pmeenan - 04-11-2014 02:58 AM

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: http://www.phpied.com/conditional-comments-block-downloads/