Resource Enhancements

As any other rich UI library, PrimeFaces requires various js and css resources to create good looking and functional web applications. Downside of this requirement was the page load times as a complex page can require around 10-15 maybe more resources each causing an http request that slows down page load time. For PrimeFaces 3.0.M4, we have decided to improve this by merging commonly used resources so we now have primefaces.css and primefaces.js created at build time plus jquery.js that almost all PrimeFaces components require. The content of these files are compressed by PrimeFaces and if you enable gzip compression sizes at this time of writing are;

primefaces.css = 6.7kb
primefaces.js = 29kb

These files contain resources for around 40 commonly used components like datatable, form components, menus, trees and much more. As in production mode, JSF enables caching on these resources, resource loading really gets optimized.

We’ve tested performance difference before and after this change, for complex pages that require several components, difference is huge. Following test is from a layout sample of showcase;

Before

After

2 seconds to 0.8 seconds for a not so complex page, considering production apps using many components that can be far more complex than showcase samples, difference will be bigger.

PrimeFaces is designed to be a lightweight library, one jar, no config, no dependencies, runs fast (test on showcase) and with this change PrimeFaces is more lightweight than ever!

This entry was posted in PrimeFaces. Bookmark the permalink.

18 thoughts on “Resource Enhancements

  1. This is really a useful feature as we can separate out the js and css to a content delivery network (like Amazon CloudFront as we use EC2).

  2. Congrats to the PF Team.
    U guys are really putting the PF UI toolkit on a great pedestal.The JEE world is proud of you. As far as I am concerned, Primefaces just gave facade of JEE a sexy look!

  3. Thanks for this feature. Until now we had to do some magic with JS to solve this due complex sites with many controls…

  4. Perhaps I missed it, but will this cause any conflict if we need a different version of jQuery for a plugin? Ran into issues with other libs before under earlier versions of Liferay.

  5. That’s great. Keep it up. But one of the greatest request I have come across while working for corporate clients is the ability to customize the components to the look and feel of corporate colors using custom CSS styles. Please keep that in mind and document how one can customize your components. it is very important if you want “big” companies to use your components. I am sure you will.

  6. PrimeFaces provides integration with online theme creator tool known as ThemeRoller, so creating custom themes is simple.

  7. marvellous features, as PF is a matured framework on JQuery and YUI.. So happy to see such a great efforts in rollouts.
    I Love it..

  8. Nice work! Congratulation guys, performance is big relevante point in corporate applications.

  9. Hi All. Do you have sample of applications using primefaces 3.0.M4?
    Currently I am 3.0.M3 and after upgrade to 3.0.M4, it is totally broken.

    Thanks

  10. This week’s M4 snapshot builds are highly unstable, I suggest waiting for the M4 final.

  11. >>PrimeFaces provides integration with online theme creator tool >>known as ThemeRoller, so creating custom themes is simple.

    You are assuming that most corporate entities only use Primefaces components when developing with JSF. That assumption from my experience is wrong. ThemeRoller is perfect if the only component is PrimeFaces. Most entities I have consulted for mix JSF components with other tools e.g. Ext JS.

  12. I disagree. You can create themes same as ExtJs with themeroller no problem, have you seen that we’ve provided two richfaces skins and one apache trinidad skin as a PrimeFaces theme so you can use PF with these libraries with same look. Most corporate clients of ours use PrimeFaces theme features to create the look and feel with their corporate themes. There is even a POC work of a ThemeRoller theme same as blue ExtJS theme. Dive into PrimeFaces themes and you’ll see what I’m trying to explain.

  13. I shifted to PF 3.0 M4, and the performance and navigation for the pages & components (at local) is awsome.

    Really happy to see the enhancements in individual components.

    Thanks alot, PF Team.

  14. Cool! This is solution to my question I posted while ago :) )
    Thx, prime faces rocks!
    “Gordan on September 8, 2011 at 10:54 am said:
    Nice feature!
    I am curious whether there is a possibility to optimize the page loading so that it does not load resources (css and js files) for each component separately, but to load one css file and one js file for all components on the page?”