February 17, 2017
As every computer and mobile app user knows, waiting for a page or feature to load is annoying. We have standards and expectations based on our experiences with top-of-the-line UI/UX, and any app that makes us wait too long is likely to be uninstalled and forgotten. So how can you, as a developer, make sure your apps meet or exceed user expectations when it comes to speedy load times using Salesforce Lightning?
Performance in the Lightning component framework is uncharted territory for many Salesforce developers because of Lightning's "stateless" backend model. Today we'll be focusing on how to remove wait times by reducing the number of requests to the server side.
Have you ever waited a long time for a Lightning component to load or respond? This is usually because it’s making a lot of requests to the server side. These requests start in the user's browser (from the components code), are sent across the internet to the Salesforce server (the apex controller), and result in data being sent back to the browser. The travel time for these "round trips" adds up, especially when the user has to wait on them for the app to respond. Here are our best Lightning tips to reduce the number of trips and speed up user wait time:
- Most components will need to fetch from data the server at initialization time. This data is almost always small enough that the best approach is to fetch it all at once, rather than incrementally. Accomplish this by providing a server side function that returns a "wrapper class" instance which stores the pertinent records and metadata information necessary to display the initial loaded page. The wrapper class approach means fewer round trips to collect data, speeding up the process. This approach is also simpler than simultaneous requests (with comparative performance characteristics due to "Boxcarred action").
- For routinely displayed records and metadata, "prefetch" it (load it before it should be displayed in the app) in a wrapper, rather than collecting the data individually and on demand. For example, if you click a picklist, you want to immediately be able to see and select the available values from a dropdown menu, rather than wait for them to pop up.
- During a prefetch request, also return data that the app is merely likely to display, even if it will not be needed in all scenarios. A user experience without delays is always preferable to a sluggish app which uses slightly less bandwidth.
- Finally, keep as much application logic as possible on the client side. When logic runs in the user’s browser, it’s able to respond near-instantaneously to user requests, whereas logic on the server side always has at least a round trip delay. In most cases you should only call the server side to read or write metadata and records.
When you reduce the amount of time the user spends waiting for your component to respond, you deliver a fluid and impressive user experience. Have your team try out these principles with your next component for a shocking improvement in load and response time. And if you’re looking for help designing and implementing your next big application, talk to our experts.