15 ways to improve performance of Lightning Components in Salesforce

Improve Lightning Component performance using simple 15 rules like Storable Actions, avoiding server trips, Lightning Data Service, Unidirectional data binding, creating component APIs etc

15 ways to improve Performance of Lightning Component
  1. Avoid Server Trips

Most obvious idea to improve Lightning Component Performance is to avoid server trips. Let’s say, you need to know the queue Id to be assigned as owner in Case and also need custom setting information to derive the behavior of Lightning Component. There are two ways to achieve this – Call Apex Controller two times vs return combined results from Apex in single call and process JSON in client side controller of Lightning Component.

2. Use Storable Action

In this approach, Lightning component shows cached result instead of making immediate server trip. Lightning component will make server (Apex) call in background and if cached result is stale, then it would cache and refresh the lightning component. This is very useful for devices which has slow internet connections. If you are Facebook or Google News user, you would be easily relate it. When we open these apps, it shows previous feed and if there are new feeds, it gives us option to refresh view or automatically refresh it. All you have to do is, on client side controller of Lightning component, mark action as storable using this code action.setStorable(). This blog post explains working of storable action in detail.

3.  Use Lightning Data Service

In my previous post around year back, I talked about Lightning Data Service which is equivalent to Standard Controllers for Lightning Component. You don’t need to write Apex, Test classes for your Lightning Component. However, Lightning Data Service needs more recognization instead of just saying we don’t need to write Apex. Other important side of Data Service is its ability to use shared cache. You can read more about Lightning Data Service in this Trailhead module.

4. Custom Cache

If Lightning Data Service and Storable Action is not able to full fill requirement then we can also build our own custom cache. Advantage of custom cache is that, you would have full control over life cycle and behavior of cache. Read this blog post to read strategies about implementing custom cache.

5.  Lazy Instantiation of Component

Instead of creating all Lightning Components at same time, you can delay instantiation of Lightning component. Check this blog post on how to dynamically create and destroy components.

6. Conditional rendering

There are two ways to conditionally render Lightning Components

  1. Using CSS
  2. Using aura:if

If we use CSS, then component would still be created and if there is any event associated with it, then it would be executed. So, this approach to conditionally render component or element is not recommended.

aura:if on other hand, would create element only if condition is true. So, we should use aura:if as much possible to defer page load.

7. Use of Unbound Expression

There are two ways to bind variables in Lightning Components

  1. Bi-directional binding : It is denoted using symbol like {!v.var1}. In this case, if value in var1 changes, Lightning component would be notified and value would be updated. As you can imagine, in background, Lightning component must be using event listeners to keep track of change.
  2. Unidirectional or unbound expression : If you don’t really need to update Lightning components if value is not changing, then you can improve performance using instead of !. Syntax would look like {#v.var1}
 8. Use aura:method for Component Communications

Instead of using events, we can use aura:method to facilitate communication between components. Its like exposing component API. There are few advantages of using aura:method instead of events, like ability to name method which would help to clarify & identify behavior, ability to use same arguments and define multiple methods.

9. Limit event handlers

Try to limit number of event handlers in your Lightning component. As you can guess, multiple event handler means your component would be busy in listening event changes resulting in performance overload.

10. Limit use of Application event

As we know, there are two types of events – Application and Component events. Application events are very powerful and gives lots of flexibility to communicate between any components in Application. However, we should use Application event with great precaution. As Application event is broadcasted to all components simultaneously, it might be overkill for some components if its not needed. I would suggest going through this post, which explains how communication between component happens and best practices around it.

11. Limit use of Javascript Libraries

This is the best time to go back to basics and learn Javascript. There was time when only few libraries were there like JQuery, underscoreJs etc. However in this ever changing technology every minute there is new Library and new versions of existing libraries. At the same time, vanilla Javascript has also become more powerful with active releases of EcmaScriptYou might be able to achieve most of stuff by combining Vanilla Javascript and Aura framework. $A.util has many useful methods for Lightning Component development.

12.  Use Minified version of Javascript Libraries

This is no brainer best practice. If you end up using library, then make sure it minified, so that http load would be minimal.

13. Use of Lightning Base Components

Instead of reinventing wheels or third party Lightning Components, have a look at base components first. Creating custom component and then applying Salesforce Lightning Design System doesn’t make sense if you already have Base component. Base component incorporates Lightning Design System, improved performance with minimal foot prints and best practices. You can read more about base components here.

14. Debug mode off in Production

You can disable Lightning Component debug mode by navigating to –Setup > Custom Code > Lightning Components

15. Performance Profiling

I saved the best for last, Performance profiling. There are many tools available to dig into problem of slow Lightning component before playing in dark. Tools like Lightning Component Inspector in Google chrome or chrome performance tool.

Related posts

2 thoughts on “15 ways to improve performance of Lightning Components in Salesforce”

  1. Hi, how can we identify when to use bound expression and when not. Because there behaviour is pretty dubious as “Data updates behave as you would expect in JavaScript. Primitives, such as String, are passed by value, and data updates for the expression in the parent and child are decoupled.
    Objects, such as Array or Map, are passed by reference, so changes to the data in the child propagate to the parent. However, change handlers in the parent aren’t notified. The same behavior applies for changes in the parent propagating to the child.”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.