{"id":6048,"date":"2018-05-12T13:35:35","date_gmt":"2018-05-12T17:35:35","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=6048"},"modified":"2018-05-12T13:35:35","modified_gmt":"2018-05-12T17:35:35","slug":"15-ways-to-improve-performance-of-lightning-components-in-salesforce","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/15-ways-to-improve-performance-of-lightning-components-in-salesforce\/","title":{"rendered":"15 ways to improve performance of Lightning Components in Salesforce"},"content":{"rendered":"
    \n
  1. \n
    Avoid Server Trips<\/h5>\n<\/li>\n<\/ol>\n

    Most obvious idea to improve Lightning Component Performance<\/strong> 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.<\/p>\n

    2. Use Storable Action<\/h5>\n

    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().\u00a0<\/em>This blog post explains<\/a> working of storable action<\/strong> in detail.<\/p>\n

    3.\u00a0 Use Lightning Data Service<\/h5>\n

    In my previous post around year back<\/a>, I talked about Lightning Data Service<\/strong> 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<\/a>.<\/p>\n

    4. Custom Cache<\/h5>\n

    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<\/a> to read strategies about implementing custom cache.<\/p>\n

    5.\u00a0 Lazy Instantiation of Component<\/h5>\n

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

    6. Conditional rendering<\/h5>\n

    There are two ways to conditionally render Lightning Components<\/p>\n

      \n
    1. Using CSS<\/li>\n
    2. Using\u00a0aura:if<\/strong><\/li>\n<\/ol>\n

      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.<\/p>\n

      aura:if\u00a0<\/strong>on other hand, would create element only if condition is true. So, we should use\u00a0aura:if\u00a0<\/strong>as much possible to defer page load.<\/p>\n

      7. Use of Unbound Expression<\/h5>\n

      There are two ways to bind variables in Lightning Components<\/p>\n

        \n
      1. Bi-directional binding<\/strong> : It is denoted using\u00a0!\u00a0<\/strong>symbol like {!v.var1}<\/em>. 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.<\/li>\n
      2. Unidirectional or unbound expression<\/strong> : If you don’t really need to update Lightning components if value is not changing, then you can improve performance using\u00a0#\u00a0<\/strong>instead of\u00a0!.\u00a0<\/strong>Syntax would look like {#v.var1}<\/em><\/li>\n<\/ol>\n
        \u00a08. Use aura:method for Component Communications<\/h5>\n

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

        9. Limit event handlers<\/h5>\n

        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.<\/p>\n

        10. Limit use of Application event<\/h5>\n

        As we know, there are two types of events –\u00a0Application and Component events.\u00a0<\/strong>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<\/a>, which explains how communication between component happens and best practices around it.<\/p>\n

        11. Limit use of Javascript Libraries<\/h5>\n

        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\u00a0EcmaScript<\/a>.\u00a0<\/strong>You might be able to achieve most of stuff by combining\u00a0Vanilla Javascript\u00a0<\/strong>and\u00a0Aura framework. $A.util\u00a0<\/strong>has many useful methods for Lightning Component development.<\/p>\n

        12.\u00a0 Use Minified version of Javascript Libraries<\/h5>\n

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

        13. Use of Lightning Base Components<\/h5>\n

        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<\/strong><\/a> 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<\/a>.<\/p>\n

        14. Debug mode off in Production<\/h5>\n

        You can disable Lightning Component debug mode by navigating to –Setup > Custom Code > Lightning Components<\/em><\/p>\n

        15. Performance Profiling<\/h5>\n

        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<\/a> or chrome performance tool<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Improve Lightning Component performance using simple 15 rules like Storable Actions, avoiding server trips, Lightning Data Service, Unidirectional data binding, creating component APIs etc<\/p>\n","protected":false},"author":1,"featured_media":6472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[311,409],"class_list":["post-6048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-component","tag-performance"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=2118%2C542&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5796,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-data-services-standard-controller-for-lightning-components\/","url_meta":{"origin":6048,"position":0},"title":"Lightning Data Service – Standard Controller for Lightning Components","author":"Jitendra","date":"July 22, 2017","format":false,"excerpt":"Best Practices for Salesforce Lightning Component. How Lightning Data Service can improve Lightning Component performance and solve inconsistent data problem without writing single line of Apex code. Demo source code, image and slides included.","rel":"","context":"In "Apex"","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Salesforce Lightning Data Services","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":7101,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/implement-infinite-scrolling-for-lightning-data-table\/","url_meta":{"origin":6048,"position":1},"title":"Implement Infinite Scrolling for lightning-datatable","author":"Jitendra","date":"June 10, 2020","format":false,"excerpt":"When to use wire vs Imperative approach to call Apex in Lightning Web Component","rel":"","context":"In "Lightning Web Components"","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Salesforce Lightning Datatable Infinite Scrolling","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":6048,"position":2},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4287,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/learning-lightning-component-trailhead-way\/","url_meta":{"origin":6048,"position":3},"title":"Learning Lightning Component – Trailhead way","author":"Jitendra","date":"March 19, 2015","format":false,"excerpt":"In Previous article, I\u00a0have introduced what is Trailhead and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules to be learned from it. Recently Salesforce has added some more awesome tutorial\u00a0and \u00a0In this article, I\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Learn Lightning Component Trailhead way","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":6048,"position":4},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4788,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","url_meta":{"origin":6048,"position":5},"title":"Salesforce Lightning Component – Radar Chart","author":"Jitendra","date":"August 29, 2015","format":false,"excerpt":"How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Component for Radar Chart","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/08\/GIF-Radar-Chart.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6048"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6048\/revisions"}],"predecessor-version":[{"id":6473,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6048\/revisions\/6473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6472"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}