How to improve the performance of Salesforce Lightning Components?

1. Data Retrieval

• Before calling the server, you should make sure there are no other options for receiving data.
• Pass data between components (using attributes, events, or methods) instead of retrieving the same data in different components.
• When calling the server, limit the columns and rows of result sets:

1. Select only the columns you need.
2. Set Limit for requests and, if necessary, provide a paging mechanism.

• Don’t call the server to filter or sort the data that you already have at the client-side.
• Cache data when possible.

2. Data Caching

Application composition is an incredibly powerful way to build applications by assembling self-contained components. Without proper planning, the autonomous nature of the components that you collect can have an adverse impact on the component’s performance. 

To minimize the impact, Client-side data caching can be used to exchange data between components. This can significantly reduce the number of server round-trips and improve the performance of your Lightning components. 

3. Storable Action

A storable action is a server action whose response is stored in the client cache so that subsequent requests for the same server method can be accessed with the same set of arguments from that cache.

The Lightning component invokes the Apex Server in the background. If the cached results are redundant then it would cache and refresh the lightning component. This is very useful for devices with slow internet connections.

4. Lightning Data Service

The Lightning Data Service framework is responsible for maintaining records such as fetching them from the server, storing them in a highly efficient client cache, sharing them between all components, and sending the changes to the server. It also handles progressive loading that means it only loads the requested fields. Moreover, it also improves user interface consistency i.e. when components update records, all other components that use the records are notified or updated automatically.

5. Slow Instantiation of Component

Instead of creating all Lightning Components at once, you can delay the instantiation of the Lightning component.

6. Utilize tools for performance improvement

There are many tools available to understand performance issues. So, you can also use the following profile tools:

1. a)      Chrome Timeline
2. b)     Salesforce Lightning Inspector

7. Conditional rendering

There are two ways to conditionally render Lightning Components:

1. Using CSS
2. Using aura: if

While using CSS, the components will be created and if there might be any event linked with it, then it will also get executed. So, this approach to render Lightning Components or elements is not highly recommended.

But, on the other hand, aura: if will create element only if the condition is true. So, it is preferred to use aura: if as much as possible to delay page load.

8. Use of Unbound Expression

There are two ways to bind variables in Lightning Components

Bi-directional binding –  It is denoted by !.

Syntax would look like {!v.var1}. 

In this case, if the value in var1 changes, the Lightning component would be notified and value would be updated.

Unidirectional or unbound expression –  If you don’t want to update Lightning components if, in case, the value is not changing, then you can improve performance using # instead of !. 

Syntax would look like {#v.var1}

9. Limit event handlers

You should try to limit the number of event handlers in your Lightning component. Multiple event handlers mean your component would be busy handling the event changes resulting in performance overload.

10. Limit the use of Application event

Application events are very powerful and offer a lot of flexibility to communicate between any components in the application. However, you should use and handle each application event accurately.  As the application event is broadcasted to all components at the same time, it might be excessive for a few components and hence decrease performance.

11. Setting in production

We recommend the following two settings in production. These are:

1. a)  Debug mode: OFF
2. b)  Component Caching: ON

For debug mode,  Setup > Custom Code > Lightning Components

For component Caching, Setup > Security > Session Settings > Caching, and uncheck Enable secure and persistent browser caching to improve performance.

12. Use Aura: method for Component Communications

Instead of using events, you can use the Aura: method to facilitate communication between components. There are several advantages of using aura: method rather than events such as the ability to mention methods that help clarify and identify the behavior, the ability to use the same argument, and define multiple methods.