Improving Loading-Speed of ReactJS-Portlets https://liferay.dev/c/message_boards/find_thread?p_l_id=119785294&threadId=119115992 2026-04-04T14:57:38Z 2026-04-04T14:57:38Z Christoph Rabel https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=119127177 2020-05-08T12:58:19Z 2020-05-08T12:58:19Z

Hmm, I tested it now with 7.2 DXP and 7.3 CE, the plain npm portlet loads quite fast for me.<br />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?<br />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.

Christoph Rabel 2020-05-08T12:58:19Z Fredi B https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=119122651 2020-05-08T10:40:12Z 2020-05-08T10:40:12Z

I am using the sample code of Liferays React Widget.<br /><a href="https://help.liferay.com/hc/en-us/articles/360029028051-Developing-a-React-Application">https://help.liferay.com/hc/en-us/articles/360029028051-Developing-a-React-Application</a> <br /><br />Just choose &#34;Yes&#34; on &#34;Do you want to create sample code&#34;-Option.So it&#39;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.<br /><br /><a href="https://imgur.com/a/gssHo7T">https://imgur.com/a/gssHo7T</a>

Fredi B 2020-05-08T10:40:12Z Christoph Rabel https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=119120877 2020-05-08T10:32:50Z 2020-05-08T10:32:50Z

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

Christoph Rabel 2020-05-08T10:32:50Z Fredi B https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=119121935 2020-05-08T09:21:40Z 2020-05-08T09:21:40Z

Hi Christoph,<br /> <br />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)<br />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 &#34;jumping&#34; after the React Portlet has its full height.<br />Are there any advised tips or techniques to make React Portlets load faster?

Fredi B 2020-05-08T09:21:40Z Christoph Rabel https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=119117819 2020-05-07T15:20:15Z 2020-05-07T15:20:15Z

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?

Christoph Rabel 2020-05-07T15:20:15Z Fredi B https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=119115991 2020-05-07T13:50:18Z 2020-05-07T13:50:18Z

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

Fredi B 2020-05-07T13:50:18Z