Lightning page optimization & best practices

Lightning Page
Optimization & Best
Practices
Hyderabad, Salesforce Community
@gauravforc
e
Gaurav Jain
HYD, IN Admin Group
Lead, Lightning
Champion,
Tech Lead at
CriticalRiver
@SF_HYD_UG @HydSfdg @HyderabadWit @hydmcug
@gauravforce @RoshanKotla @SwatiTaunk @pradeepsfdc99
#TrailblazerCommunity #TeenKaTadka #LightningChampions
#HyderabadSalesforceCommunity
Sanket Kumar
Lightning Champion,
System Engineer at TCS
@sanket539

• 10 Ways to Increase Lightning Page Performance
• Best Practise and Limits
• Measuring Page Load Time
• Error Handling Best Practices for Lightning and Apex
• Lightning Component Code Review using Command Line Interface (CLI)
• Q&A
• Trailheadathon Registration and Instruction
• Trailheadathon
Agenda

10 Ways to Increase Lightning Page Performance
• Excessive fields clutter your page layouts, make your implementation difficult to maintain,
and increase page load time.
• Details Tab on Record Pages as Secondary Tab
• Replacing Related Lists with the Related List Quick Links Component
• Using Related List – Single Component
• Less Number of Lightning Components on Record Lightning Pages
• Set Component Visibility
• Move some Lightning components to the Tabs or Accordion Lightning component
• Taking out Inline Visualforce Pages and Report Chart from Page Layout
• News and Twitter components should be placed behind a tab
• Disable Debug Mode

Best Practise and Limits
• The number of fields should not exceed more than 150 on a page layout.
• 0-50 – GREEN
• 51-150 – AMBER
• > 150 – RED
• Too many components on a page can cause it to load slowly. You should keep below in
mind:-
• 0-15 – GREEN
• 16-20 – AMBER
• > 20 – RED

Error Handling Best Practices for Lightning and Apex
Client-server communication overview
1. A Lightning component sends a request to its Apex
controller using a server-side action.
2. The controller processes the request. This can
trigger a server-side error (permission issue, invalid
query).
3. The controller sends a response to the Lightning
component.
4. The Lightning component processes the response
in a callback function. This can trigger a client-side
error (unexpected response).
This pattern can trigger two types of errors that
developers must handle: server-side and client-side
errors.

• If you process a failing server request
as is, a system exception is returned to
the Lightning component.
• Doing so is bad practice as this results
in a generic error message: “An
internal server error has occurred” or
“Sorry to interrupt”. This is not user-
friendly and provides no information
about the error. We all hate that. 🙁
What to avoid

Server-side errors handling
Using AuraHandledException
Basic error handling
1. Wrap the code that can trigger
exceptions in a try-catch block
2. Throw an AuraHandledException in the
catch block. This allows you to provide a
custom user-friendly error message.
Custom error handling
1. Create a simple wrapper class that can
hold the data.
2. Instantiate your custom class, serialize it
as JSON, then pass it to the
AuraHandledException.
3. client-side (Lightning controller or
helper), parse the error message string
as JSON, and access your custom error
data.
The AuraHandledException is sent back to the client with your custom message, and you’re
free to display it in the way you want using the Lightning Component framework.

Client-side errors handling
Basic error handling
Just like Apex Exceptions, JavaScript Errors enable you
to separate result values from errors when you call a
function. For instance, if you follow best practices and
let your helper do the heavy-lifting, you can write code
like this in your controller
Custom error handling
If a text message is not enough data to describe your
error, you can extend the JavaScript standard Error
type and create errors with custom attributes.
try {
// Call a function that may throws an Error
let value = helper.doSomethingThatMightFails();
// Process value if function succeeded
} catch (e) {
// Handle error
console.error(e);
}
// Declaring a custom error type
function MyCustomError(name, message, code) {
this.name = name;
this.message = message;
this.code = code;
this.stack = (new Error()).stack;
}
MyCustomError.prototype = Object.create(Error.prototype);
MyCustomError.prototype.constructor = MyCustomError;

You now know how to handle those different errors and how
to extend them to fit your needs.
Before Error Handling
After Error
Handling

Step 1: Heroku Installation
Download the Heroku toolbelt on your machine from the following link:
https://toolbelt.heroku.com/
Step 2: Install Salesforce Lightning CLI
Install Lightning CLI as a Heroku Toolbelt plugin. Once this is done, update the Heroku
Toolbelt to get the latest Lightning CLI rules.
heroku plugins:install salesforce-lightning-cli
Lightning Component Code Review using Command Line
Interface (CLI)

Step 3: Use Salesforce Lightning CLI
To display the Code Review on the command prompt in a text format, use:
heroku lightning:lint "F:ANTMalwarebytesBackup Partial 2-2-
2020auraAVLR_TaxExcempt"
Lightning Component Code Review using Command Line
Interface (CLI)

Lightning page optimization & best practices

Lightning page optimization & best practices

Recommended

More Related Content

What's hot (20)

Similar to Lightning page optimization & best practices (20)

Recently uploaded (20)