How can I improve performance on the initial page load?

Components, Ajax Framework, Utilities and More.
magnus
Posts: 1
Joined: 10 Jun 2012, 16:22

10 Jun 2012, 16:40

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?

ITStudent
Posts: 64
Joined: 18 Oct 2011, 22:25

02 Dec 2012, 17:21

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?

squallooo
Posts: 8
Joined: 03 Dec 2012, 01:51

03 Dec 2012, 01:59

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

ITStudent
Posts: 64
Joined: 18 Oct 2011, 22:25

12 Dec 2012, 14:48

hey squallooo,

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

User avatar
optimus.prime
Prime
Posts: 17371
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

12 Dec 2012, 16:46

Gzip it.

User avatar
optimus.prime
Prime
Posts: 17371
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

17 Dec 2012, 17:16

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.

dako-ak
Posts: 60
Joined: 19 Jul 2012, 15:49

17 Dec 2012, 17:52

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

javaone9
Posts: 306
Joined: 06 Nov 2012, 20:50

17 Dec 2012, 22:16

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
Responsive Webapp Framework: Cmobilecom WAF 5.6
JSF components: PrimeFaces 5.0
JSF core: Mojarra 2.2.6
Glassfish 4, Tomcat 8
FireFox 28, IE 8, Chrome 24.0

User avatar
optimus.prime
Prime
Posts: 17371
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

17 Dec 2012, 22:31

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

User avatar
Oleg
Expert Member
Posts: 3794
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

18 Dec 2012, 00:28

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 Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 40 guests