1

I am trying to create an LWC which is similar to a VF page. I have inserted the LWC on the VF page using lightning out.

The VF page uses <apex:inputfield> to take input from the user in a pageBlockTable. In my LWC, I am using <lightning-record-edit-form> and <lightning-input-field> to take input from the user in a custom data table. When there are lots of rows (around 50), the fields of VF page are loading much faster than those of the LWC. The <apex:inputfield> loads the fields almost instantly but the <lightning-input-field> takes more than 30 seconds to load the fields.

Screenshot 1: The LWC has loaded but the fields have not loaded: The LWC has loaded but the fields have not loaded

Screenshot 2: The fields load after a long time. enter image description here

Note that as the number of rows in the datatable increase, the time to load increases. The same is not the case with <apex:inputfield> of VF Page.

I went through the Salesforce documentation but I did not find any reason for this to happen nor did I find any solution online. Can it be because of lightning out? I have no idea. Please help. Thank You!

VF Page Code:

<apex:pageBlockTable id="contactWrapper" title="Contact" value="{!contactWrapperList}" var="cwl">
    <apex:column headerValue="Input Value">
        <apex:inputfield id="chosenInput" value="{!cwl.inputObject[cwl.inputFieldName]}" required="false" />
    </apex:column>
</apex:pageBlockTable>

LWC Code

<table>
    <template iterator:item={wrapperListCopy}>
        <tr key={item.value.index}>
            <td class="tr-width">
                <div class="set-width">
                    <lightning-record-edit-form object-api-name={objectApiName}>
                        <lightning-input-field variant="label-hidden" id={item.value.index} onchange={handleLightningInputField} field-name={item.value.inputFieldName} value={item.value.filterValue}>
                        </lightning-input-field>
                    </lightning-record-edit-form>
                </div>
            </td>
        </tr>
    </template>
</table>
5
  • 2
    Lightning Out takes some time to load. Oct 15 '20 at 13:59
  • @rahulgawale The rest of the LWC loads fine in lightning out but the fields that are loaded by <lightning-Input-Field> take extra time to load.
    – Koustubh
    Oct 15 '20 at 14:10
  • @rahulgawale I have edited the question and added screenshots of the problem. Please have a look. Thank You!
    – Koustubh
    Oct 15 '20 at 14:18
  • Could you also provide the Javascript code? It could be that it takes a lot of time to fill wrapperListCopy. The LWC is shown first, without data. As soon as wrapperListCopy is filled, the page is refreshed with the data. If the filling of wrapperListCopy takes 30 seconds, then the display of the LWC with contents will last just as long. Oct 15 '20 at 14:46
  • @SanderdeJong The data in wrapperListCopy comes from apex code. It loads quickly. All the other columns that you see in the screenshot get data from the same 'wrapperListCopy'. Hence the `<lightning-Input-Field>' too gets the data at the same time.
    – Koustubh
    Oct 15 '20 at 14:52
6

The Visualforce page renders exactly the HTML needed to render the HTML input field, and is thus very fast with only a few fields (literally, as fast as the page loads). The LWC model, however, has to first load your component definition, then load the lightning-input-field and lightning-record-edit definitions, then load the object and record data and metadata into the client (getObjectInfo/getRecord), and can then finally render everything.

The part where the load time increases with the number of fields on an object is because of the getObjectInfo/getRecord calls. More data has to be transferred to the client, increasing the load time. Note that this is mostly a problem with spotty or limited bandwidth. On a broadband connection, the time is very quick. The getObjectInfo call can easily be upwards of 1MB of data or more, so a very slow connection will have significant load times. There's also a cache of data, so this load won't happen every time, just when there's a cache miss.

LWC is exceptionally fast at rendering (nearly as fast as VF itself), but it has to load a bunch of possibly unnecessary data in order to render the UI. Fpr this reason, LWC will not be quite as fast as Visualforce. The tradeoff for LWC, though, is that saving and loading the records themselves are actually faster, as the VF runtime is rather slow at generating the necessary HTML, despite delivering only the necessary metadata. As you add more fields to a VF page, you should notice that VF and LWC take similar amounts of time to load.

To see where LWC would really shine, try rendering an apex:detail of each record in the Visualforce page, and compare it to rendering all fields on an object in LWC. The LWC should actually load faster in that situation, as there is a tipping point where VF simply won't be as fast as LWC.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.