The document discusses various ways to improve the performance of Salesforce Lightning Components, including caching data, using the Lightning Data Service to progressively load only requested fields, conditionally rendering components to delay page loading, limiting event handlers and application events, and enabling component caching in production.

1. How to improve the performance of
Salesforce Lightning Components?
cloud.analogy info@cloudanalogy.com +1(415)830-3899
TM

2. Salesforce Lightning Component
Salesforce Lightning Component Framework is a user
interface framework that enables you to craft
dynamic and personalized Salesforce web
applications for mobile and desktop devices. It uses
JavaScript (client-side) and Apex (server-side) to
create single-page web applications.
cloud.analogy info@cloudanalogy.com +1(415)830-3899

3. Ways to Improve Performance of
Lightning Components in
Salesforce
cloud.analogy info@cloudanalogy.com +1(415)830-3899

4. cloud.analogy info@cloudanalogy.com +1(415)830-3899
Data
Retrieval01
● 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.
● Don't call the server to filter or sort the data that you already have at the
client-side.
● Cache data when possible.

5. cloud.analogy info@cloudanalogy.com +1(415)830-3899
Data Caching02
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.
Storable Action03
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.

6. cloud.analogy info@cloudanalogy.com +1(415)830-3899
Lightning Data Service04
Slow Instantiation of
Component05
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.
Instead of creating all Lightning Components at once, you can delay the instantiation of the
Lightning component.

7. cloud.analogy info@cloudanalogy.com +1(415)830-3899
06
Utilize Tools For Performance
Improvement
There are many tools available to understand performance issues. So, you can also use the following
profile tools:
Chrome Timeline Salesforce Lightning Inspector

8. There are two ways to conditionally render Lightning Components:
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.
cloud.analogy info@cloudanalogy.com +1(415)830-3899
07 Conditional Rendering
There are two ways to conditionally render Lightning
Components:
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.

9. There are two ways to conditionally render Lightning Components:
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.
cloud.analogy info@cloudanalogy.com +1(415)830-3899
08
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}.
Unidirectional or unbound expression - It is denoted by #.
Syntax would look like {#v.var1}0

10. ghtning 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.
cloud.analogy info@cloudanalogy.com +1(415)830-3899
09 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
ghtning 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.
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.

11. cloud.analogy info@cloudanalogy.com +1(415)830-3899
11 Setting in Production
We recommend the following two settings in production. These are:
Debug
mode: OFF
Component
Caching: ON

12. cloud.analogy info@cloudanalogy.com +1(415)830-3899
Have any questions or facing issues while
developing Salesforce Lightning
applications? Hire the best Salesforce
Lightning Expert, choose Cloud Analogy now!

13. cloud.analogy info@cloudanalogy.com +1(415)830-3899
Thank you