Maximizing Salesforce Lightning Experience and Lightning Component Performance
5 likes3,489 views
The document discusses various factors that affect the performance of Lightning Experience and Lightning Component pages. It outlines six main factors: geographical and network latency, device and browser capabilities, Salesforce org configuration, page complexity, component architecture, and server processing. For each factor, it provides recommendations for how to measure and optimize performance, such as enabling the Salesforce Edge network, limiting the number of components on a page, using conditional rendering, and leveraging caching features. The overall message is that page load time in Lightning Experience is sensitive to these infrastructure, code, and configuration factors.
Maximizing Salesforce Lightning Experience and Lightning Component Performance
- 1. Maximizing Lightning Experience and Lightning Component Performance April 2, 2020 | 10:30 a.m. IST
- 2. Sr. Developer Evangelist Sr. Developer Evangelist Aditya Naag Topalli Satya Sekhar Image Speakers Image
- 3. Forward-Looking Statement Statement under the Private Securities Litigation Reform Act of 1995: This presentation contains forward-looking statements about the company’s financial and operating results, which may include expected GAAP and non-GAAP financial and other operating and non-operating results, including revenue, net income, diluted earnings per share, operating cash flow growth, operating margin improvement, expected revenue growth, expected current remaining performance obligation growth, expected tax rates, the one-time accounting non-cash charge that was incurred in connection with the Salesforce.org combination; stock-based compensation expenses, amortization of purchased intangibles, shares outstanding, market growth and sustainability goals. The achievement or success of the matters covered by such forward-looking statements involves risks, uncertainties and assumptions. If any such risks or uncertainties materialize or if any of the assumptions prove incorrect, the company’s results could differ materially from the results expressed or implied by the forward-looking statements we make. The risks and uncertainties referred to above include -- but are not limited to -- risks associated with the effect of general economic and market conditions; the impact of geopolitical events; the impact of foreign currency exchange rate and interest rate fluctuations on our results; our business strategy and our plan to build our business, including our strategy to be the leading provider of enterprise cloud computing applications and platforms; the pace of change and innovation in enterprise cloud computing services; the seasonal nature of our sales cycles; the competitive nature of the market in which we participate; our international expansion strategy; the demands on our personnel and infrastructure resulting from significant growth in our customer base and operations, including as a result of acquisitions; our service performance and security, including the resources and costs required to avoid unanticipated downtime and prevent, detect and remediate potential security breaches; the expenses associated with new data centers and third-party infrastructure providers; additional data center capacity; real estate and office facilities space; our operating results and cash flows; new services and product features, including any efforts to expand our services beyond the CRM market; our strategy of acquiring or making investments in complementary businesses, joint ventures, services, technologies and intellectual property rights; the performance and fair value of our investments in complementary businesses through our strategic investment portfolio; our ability to realize the benefits from strategic partnerships, joint ventures and investments; the impact of future gains or losses from our strategic investment portfolio, including gains or losses from overall market conditions that may affect the publicly traded companies within the company's strategic investment portfolio; our ability to execute our business plans; our ability to successfully integrate acquired businesses and technologies, including delays related to the integration of Tableau due to regulatory review by the United Kingdom Competition and Markets Authority; our ability to continue to grow unearned revenue and remaining performance obligation; our ability to protect our intellectual property rights; our ability to develop our brands; our reliance on third-party hardware, software and platform providers; our dependency on the development and maintenance of the infrastructure of the Internet; the effect of evolving domestic and foreign government regulations, including those related to the provision of services on the Internet, those related to accessing the Internet, and those addressing data privacy, cross-border data transfers and import and export controls; the valuation of our deferred tax assets and the release of related valuation allowances; the potential availability of additional tax assets in the future; the impact of new accounting pronouncements and tax laws; uncertainties affecting our ability to estimate our tax rate; the impact of expensing stock options and other equity awards; the sufficiency of our capital resources; factors related to our outstanding debt, revolving credit facility, term loan and loan associated with 50 Fremont; compliance with our debt covenants and lease obligations; current and potential litigation involving us; and the impact of climate change. Further information on these and other factors that could affect the company’s financial results is included in the reports on Forms 10-K, 10-Q and 8-K and in other filings it makes with the Securities and Exchange Commission from time to time. These documents are available on the SEC Filings section of the Investor Information section of the company’s website at www.salesforce.com/investor. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements, except as required by law.
- 4. Follow us for updates @salesforcedevs Salesforce Developers Salesforce Developers India (t.me/salesforcedevsindia) Salesforce Developers This webinar is being recorded. The recording will be available on YouTube and will be sent via email.
- 5. Have Questions? Don’t wait until the end to ask your question! • Technical support will answer questions starting now. Respect Q&A etiquette • Please don’t repeat questions. The support team is working their way down the queue. Stick around for live Q&A at the end • Speakers will tackle more questions at the end, time-allowing Head to Developer Forums • More questions? Visit developer.salesforce.com/forums
- 6. As the global COVID-19 pandemic continues to impact us all, we hope that you’re focusing on the health and safety of yourself and your families. As we all continue to navigate this confusing time, we also want you to know that we’re here for you. Learn everything that Trailhead and Salesforce are doing to support our community in these unprecedented times - https://bit.ly/33MIwNY We’re here for you!
- 7. Is this our first remote webinar?
- 8. ● How is Lightning different from Classic ● How to measure overall page performance ● 6 factors that affect overall page performance ○ Measurement Metrics ○ Tips to optimize Agenda
- 9. We heard you loud and clear... … that Lightning performance isn’t where it needs to be The median time to load a Lightning page is currently 1.4 seconds. We are migrating many of the core parts of the Lightning UI, to LWC. We’re investing heavily to improve things going forward. Source: Lightning Experience LEX - lightning speed please! - Ideas
- 11. Is Lightning Experience just a UI change?
- 12. SERVER HTML rendered on client Classic Pages Server driven Server generates HTML
- 13. Data Centers Network Data Protection Monitoring Storage TRUST Databases Connectivity Message Bus Events Metadata SHARED SERVICES & TOOLS App Definition Authorization Provisioning Authentication Identity Resolution DATA & EVENTSRUNTIMEAPP LAYER Framework SLDS Navigation Testing Instrumentation Accessibility Offline LockerData APP LAYER Framework SLDS Navigation Testing Instrumentation Accessibility Offline LockerData Page Base Components Standard or Custom Components Client App Layer Framework Testing Instrumentation SLDS Navigation Offline Accessibility Locker Data Lightning Pages Component driven
- 14. Lightning Components Architecture XHRs XHR: XMLHttpRequest, used to transfer data between a web browser and a web server.
- 15. Ok, so LEX is not just a UI change... ● A lot of heavy lifting has been migrated from server to the client ○ Therefore, it is sensitive to browser & device performance. ● Lightning UI requires many XHRs to initially render a page ○ Therefore it is sensitive to network latency. ● Lightning UI is more dynamic & contains more components than Classic ○ Therefore pages with many custom fields and/or components are slower to render. ...but why does it seem slow? Did you know? Client side renderer application will ALWAYS be slower than server side rendered pages regardless of the complexity.
- 16. Experiment time! Let’s add a Visualforce Page to a page in Classic and Lightning
- 17. Poll: Are you still using Visualforce? Please answer the poll you see onscreen. The poll will be active for 30 seconds. Results will be shared after that.
- 18. How to measure Performance in LEX?
- 19. Experienced Page Time (EPT) The time from when a Page starts Loading to the time when No activity has occurred for at least two frames (about 33 ms)
- 20. Experienced Page Time (EPT) 0 1 432 1 3 2 4 4 Server Processing Time (SPT) Experienced Page Time (EPT) LatencyLatency Network Time Browser Processing Time (BPT) Cached Data Retrieval
- 21. How to measure EPT? ● Lightning Experience: Add an EPT counter to Lightning Experience. ○ Enable Debug mode ○ Add eptVisible=1 as a parameter to the Lightning URL. ● Lightning Usage App ○ Use app to view aggregated page and browser performance. ○ Build custom reports using Lightning Usage App objects. ● Event Monitoring: Use event types to monitor performance. ○ Lightning Page View, Lightning Interaction, Lightning Performance
- 22. Factors affecting EPT Geographical Factors and Network Latency Device and client capabilities Salesforce Org Configuration Page Complexity Component Architecture Server Processing
- 23. Geographical Factors & Network Latency
- 24. Geographical Factors & Network Latency How far are you from your host instance? UK Tokyo Example: 125 ms Round Trip Time TCP Connection Setup (1 RTT) TLS Setup (2 RTT) Open Internet VPN ~400ms
- 25. Geographical Factors & Network Latency Salesforce continually expands and improves its infrastructure through: ● Horizontal and vertical scaling ● Application and database tuning ● Salesforce EDGE service, which boosts network performance Continuous Improvement
- 26. Geographical Factors & Network Latency It establishes network Edge PoPs (points of presence) all over the world and adding high-bandwidth, persistent, secure connections between our data centers. Salesforce EDGE service
- 27. Geographical Factors & Network Latency Salesforce EDGE service Refer to What is Salesforce Edge? for more details ● TLS Termination: Secure handshake in shorter time ● Caching static content: Cacheable objects stored in locations closer to customer in a compliant manner ● Route Optimization: Uses latency measurements & topology to direct customers to the best EDGE. ● ML Driven network optimizations: Congestion Control
- 28. Geographical Factors & Network Latency Measure ● Ask your IT department to run a “ping” or “traceroute”. ● Run the Salesforce Performance test - https://yourdomain.lightning.force.com/speedtest.jsp Recommended metrics ● Latency of 150 ms or lower. ● Download speed of 3 Mbps or higher.
- 29. Geographical Factors & Network Latency Optimize ● Enable Content Delivery Network for Lightning Component Framework ○ Uses Akamai’s CDN for static JavaScript and CSS. ○ Doesn’t distribute your org’s data or metadata in a CDN. ○ Serves requests for the following from 'static.<instance>.salesforce.com' ● Refactor components to reduce XHRs.
- 30. Geographical Factors & Network Latency Optimize Without CDN With CDN
- 31. Geographical Factors & Network Latency Which option is right for me? My Domain enabled orgs with global users Static Lightning Components ● For publicly cacheable resources ● With Salesforce CDN partner or any preferred CDN vendor ● Customers with limited network egress for security and compliance ● Private connection from your DC to the Salesforce infrastructure Salesforce Edge Lightning CDN Communities CDN Express Connect
- 32. Device and Browser Capability
- 33. Device and Browser Capability ● The browser relies on the device’s available resources, such as processing power, memory, and even hard disk performance, to execute JavaScript and optimize rendering. ● Memory and CPU cycles are consumed when ○ Using web browsers with plug-ins or extensions ○ Running too many browser tabs simultaneously Resource availability is critical
- 34. Device and Browser Capability ● Metric used is Octane score ● Run the Salesforce Performance test - https://yourDomain.lightning.force.com/speedtest.jsp Measure Recommended metrics ● Octane score of 30000 ● 8 GB RAM with 3 GB to browser
- 35. Device and Browser Capability For the fastest and most stable experience Minimum Recommended Octane Score 20,000 30,000 RAM 5 GB with 2 GB available to browser 8 GB with 3 GB available to browser Network Latency 200ms or lower 150ms or lower Download Speed > 1Mbps > 3Mbps The minimum requirements result in 50% slower page load times
- 36. Device and Browser Capability ● Device ○ Ensure laptops are fully charged or connected to a power source. ○ Close other applications running on the client device, if possible. ○ Upgrade the client device to a model with more processing power and memory. ○ Restart ;) ● Browser ○ Reset browser settings to original defaults, if possible. ○ Remove or disable unused or unnecessary browser plugins and extensions. ○ Use latest browser version or patch. ○ Switch browsers: Performance varies by browser. Optimize
- 37. Org Configuration
- 38. Org Configuration ● Disable Debug Mode ● Enable Secure and Persistent Browser Caching ● Enable Progressive rendering on communities ● Limit # of Open tabs in Console Apps A few settings to remember
- 39. Org Configuration ● Scrolling performance degrades based on the number of rows in the page. List View Performance ∝ Time spent recalculating styles Number of HTML elements Number of rows and columns ∝ ● How HTML elements are drawn and managed is dependent on the browser.
- 40. Org Configuration Optimize List View Performance ● Don’t use a list view to scroll through large volume of content ○ Use a search bar ○ Use filters. e.g. Picklists, Owners, Date Range etc. ○ Use Reports ● Reduce the number of columns displayed ● Disable inline editing, if needed ● Disable Smooth Scrolling and Threaded Scrolling in Chrome, if needed
- 41. Page Complexity
- 42. Page Complexity ● Everything you do affects performance. ● Components added to a page are instantiated when the page is loaded. ● Performance suffers if a page has ○ Large number of fields ○ Large number of “visible” components ○ Inefficient custom components ○ Complex page configurations What makes a page complex?
- 43. Page Complexity ● Utilize Lazy instantiation in Lightning Experience. ● The below areas of Lightning Experience are lazily instantiated: ○ Quick or Global Actions ○ Utility Bar ○ App Builder tabs ● Use Base Lightning Components in custom components for Lazy instantiation Optimize
- 44. Page Complexity ● Break up the elements on pages into App Builder tabs. ○ Present the most-needed information on the first tab ○ Move less critical components behind one or more Lightning page tabs. ● Details Component ○ Reduce number of fields on the layout (less than 50 recommended). This has a linear impact on rendering time. ○ Recommendation: Place in a secondary tab Optimize
- 45. Page Complexity ● Related Lists ○ Reduce related lists (to less than 12) ○ Use Related List Single component for the most important object ○ Hide remaining related lists behind a secondary tab ● Custom Components ○ Use Lightning Actions instead of custom components where appropriate. ○ Optimize custom component performance and use LWC framework. ● Optimize for mobile Optimize
- 48. Component Architecture ● Use Chrome Developer Tools Performance timeline to drill down into each operation in the rendering pipeline ● Use the Lightning Inspector Chrome plugin (For Aura) ● Chrome Code Coverage Report for JS. Measure
- 49. Component Architecture ● Use if:true and if:false directives in LWC, or <aura:if> in Aura for conditional rendering which helps you avoid: ○ CSS toggling - Creates and renders components that aren’t used. ○ Using JS for dom manipulation - It is expensive. ○ High number of HTML elements - Slows the page down, and impacts style recalculations ● To conditionally render a large number of components in Aura, use dynamic component creation as JS is faster. Optimize: Conditional Rendering
- 50. Component Architecture ● Clean Unrendered Body Occurs when you change the isTrue/if:true from true to false in the same rendering cycle. The unrendered body must be destroyed, which is avoidable work for the framework that slows down rendering time. ● Multiple Items Set Occurs when you set the items attribute of an <aura:iteration> or <template for:each> multiple times in the same rendering cycle. Optimize: Fix Performance Warnings in Aura
- 51. Component Architecture ● Use caching features wherever possible ○ Lightning Data Service ○ Wire Decorators ○ Platform Cache ● Use Lazy Instantiation ○ Avoid creating components until the user clicks for them. ○ Use Pagination and Tabbed approach ○ Base Lightning Components like <lightning-tabset> and <lightning-tab> support lazy instantiation by default. ● Remove unused CSS, Avoid Complex selectors Optimize: A few tips
- 52. Component Architecture ● Reduce Lightning Out dependencies ○ As a best practice only include top level components and expensive-to-create components. ○ Don’t list the ones in lightning namespace ● Optimize images for mobile ● Optimize: A few tips
- 53. Component Architecture ● Use IFRAMEs sparingly ○ An iframe can block Lightning Component loading ○ Browser opens 6 connections for resources. iframes can hold many of them ● Minimize frequent navigation ○ Navigation makes components and pages reload ○ Include user-needed data as components ● Migrate component trees to LWC Optimize: A few tips
- 54. Component Architecture Optimize: Migrate to Lightning Web Components LWC Aura
- 55. Component Architecture Optimize: Lightning Web Components Case Study Read more: Case Study: DreamHouse Gains Speed by Switching to LWC
- 56. Component Architecture Optimize: Feel free to report issues
- 57. Poll: How many of the tools discussed today do you already use? Please answer the poll you see onscreen. The poll will be active for 30 seconds. Results will be shared after that.
- 58. Further Learning
- 59. Sample Gallery Reference Code and Best Practices for Salesforce Developers April 23 2020, 10:30 a.m. IST Upcoming Webinar RSVP now
- 60. Q&A Try Trailhead: trailhead.salesforce.com Join the conversation on Facebook: @salesforcedevs Subscribe to our Telegram Channel: t.me/salesforcedevsindia
- 61. Survey Your feedback is crucial to the success of our webinar programs. Please fill out the survey at the end of the webinar. Thank you!