Board index JavaServer Faces General How can I improve performance on the initial page load?

How can I improve performance on the initial page load?

Components, Ajax Framework, Utilities and More.


Posts: 1
I'm fairly new to Primefaces and would like some advice on how to improve performance on the initial page load.

I'm using Primefaces 3.3 in combination with Twitter Bootstrap 2.0.

When I load my homepage in chrome for the first time and inspect what is being loaded I can see the following javascript and css.

From PrimeFaces

  • primefaces.js 172KB
  • jquery.js 308KB
  • primefaces.css 43KB
  • theme.css 28KB

From BootStrap

  • bootstrap.min.css 93KB
  • bootstrap.min.js 22KB
This gives me a huge overhead of 666KB (551KB for primefaces and 115KB for bootstrap) before I load any content or graphics on the page.

Needless to say the page loads really slowly the first time a user hits the home page and all this javascript and css has to be fetched from the server. On subsequent pages the scripts are retrieved from the browser cache which helps.

So far I have tried the following with to try and help performance:

  • set the glassfish 3.1.2 server to use HTTP/1.1 GZIP to try and reduce the network traffic.
  • set file caching on the server.
  • targeted the bootstrap.min.js for the end of the body content

I'm guessing that there must be a lot more than the standard jquery in the 308KB primefaces version of the jquery file as the standard jquery-1.7.2.min.js is only around 93KB!

Is there anything else I can try to reduce the page load when the user first hits the homepage?


Posts: 64
hey,

any updats about this topic??

Although there are differences with gzip , but there are still more than 140k of PF :(

how can I reduce?


Posts: 4
try to put all your script declaration at the end of the home page and check again it's a good trick ;)
Hop that helps


Posts: 64
hey squallooo,

how does that work for jquery.js and primefaces.js?


Posts: 15033
Location: Cybertron

Gzip it.
PrimeFaces Lead


Posts: 15033
Location: Cybertron

jquery core and jquery plugins PF uses are in separate files in PrimeFaces 3.5. Before 3.5, they were merged in big jquery.js. We're also thinking about further optimizations.
PrimeFaces Lead


Posts: 60
I would recommend too, that you gzip html/js content by your apache web server or tomcat.
PrimeFaces 3.4.2
PrimeFaces-Extensions 0.6.2
Mojarra 2.1.7
JBoss 6.1


Posts: 251
dako-ak wrote:
I would recommend too, that you gzip html/js content by your apache web server or tomcat.


JS/CSS GZIP is done by server, or needs to be G-ziped before packaging into jar?

In my case, there are more than 15 js/css files that need to be loaded for the home page, and it may take 15 seconds. For e-business website, customers can not wait for so long time, and usually close it before page completes loading.

For JSF tree with calendar/char/schedule, but rendered is false, primefaces calendar.js/chart.js/schedule.js are not needed, but still loaded. This should be one area to be optimized. Load resources only when needed.

Thanks,
Dave
primefaces 3.5
mojarra 2.1.21
Jboss 7.1.1, Tomcat 7
FireFox 28, IE 8, Chrome 24.0


Posts: 15033
Location: Cybertron

If 15 resources take 15 seconds then you have a problem with the server. Compare with PF showcase as a referance.
PrimeFaces Lead

Oleg User avatar
Expert Member

Posts: 3683
Location: Russia, Siberia => Germany, Black Forest
If 15 resources take 15 seconds then you have a problem with the server.

Agree. It looks very strange with 15 seconds. Modern browsers can open up to 8 connection to the same host, so that the loading time for 15 resources is normally 1-2 sec. max. Do you have a low bandwidth maybe?

primefaces calendar.js/chart.js/schedule.js are not needed, but still loaded. This should be one area to be optimized.

Agree too :-) The idea is here to split PrimeFaces resources in most used and rare used, so that there are two resource JARs. I guess, 90% of users will use the "main" JAR with common / most used components. Another JAR would be optional. This is a good deal in my opinion.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/

Next

Return to General