Improving Loading-Speed of ReactJS-Portlets

Message Boards

Fredi B, modified 3 Years ago.

Improving Loading-Speed of ReactJS-Portlets

Junior Member Posts: 69 Join Date: 4/1/20 Recent Posts

Hello Liferay Friends,
I hope you all are healthy and well in these quite crazy corona-times.
Recently I tested out some use-cases for ReactJS-Portlets and noticed that they load quite slow (with Liferay Portal CE 7.2.1) .
Are there any possibilities to improve loading speed of ReactJS-Portlets?
Have a nice week,
Fredi.

Christoph Rabel, modified 3 Years ago.

RE: Improving Loading-Speed of ReactJS-Portlets

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts

I am not really a React Portlet user, but did you measure, what is slow? Do the resources take a lot of time to be loaded?

Fredi B, modified 3 Years ago.

RE: Improving Loading-Speed of ReactJS-Portlets

Junior Member Posts: 69 Join Date: 4/1/20 Recent Posts

Hi Christoph,

on a Content-Page with multiple Fragments and a React Portlet between the React Portlet is loading noticable slower then all the other Fragments on the page. (Difference up to 2seconds)
Of course loading the resources takes time but like that using React Portlets means we have to make sure that there are for example Placeholder-Previews or Loading-Circles to prevent the Elements on the Page from "jumping" after the React Portlet has its full height.
Are there any advised tips or techniques to make React Portlets load faster?

Christoph Rabel, modified 3 Years ago.

RE: Improving Loading-Speed of ReactJS-Portlets

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts

Can you measure it with the browser developer console?
Can you create a minimal example and post it here or on github? Maybe creating the "minimal" example already helps you, because it might help you to narrow it down.
If you use the React code on a simple html page, how does it behave? Is it also slow or much faster?

Fredi B, modified 3 Years ago.

RE: Improving Loading-Speed of ReactJS-Portlets

Junior Member Posts: 69 Join Date: 4/1/20 Recent Posts

I am using the sample code of Liferays React Widget.
https://help.liferay.com/hc/en-us/articles/360029028051-Developing-a-React-Application

Just choose "Yes" on "Do you want to create sample code"-Option.So it's a really basic React Widget (added for testing two different pages inside the portlet with routes - nothing more) and for my understanding should not take that much time loading.

https://imgur.com/a/gssHo7T

Christoph Rabel, modified 3 Years ago.

RE: Improving Loading-Speed of ReactJS-Portlets

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts

Hmm, I tested it now with 7.2 DXP and 7.3 CE, the plain npm portlet loads quite fast for me.
Question: When you switch between pages, is it faster or the same? I mean, create two pages, put the portlet on page1. Refresh page. Click page 2, click again page 1. Is it still slow?
One difference I see is the page size. My testpage here has 2.8 MB, yours has 16. For some reason, your page is really heavy. My guess here is that your problem is more general, not specific to the React Portlet.