Effectively profile & speed up slow Lightning components (using Chrome Lightning Inspector)

Client Side Performance Consideration

The Chrome lightning debugger has a tree view for the performance thats better than chart view and i find it easier to debug performance bottle necks .

Lets take a look at the screenshot below

Looks like the strike_row component is the bottle neck due to multiple aura:if statements .

The performance really is hit by below lines

<aura:iteration items="{!v.fields}" var="field" indexVar="index">
        <td data-label="{!field.label}">
            <div aura:id="value-output" class="{!if(field.dataType != 'COMPONENT', 'slds-truncate', '')}" title="{!if(field.dataType == 'COMPONENT', '', field.value)}">
                <aura:if isTrue="{!field.dataType == 'BOOLEAN'}">
                    <ui:outputCheckbox value="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'CURRENCY'}">
                    <ui:outputCurrency value="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'DATE'}">
                    <ui:outputDate format="M/dd/yyyy" value="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'DATETIME'}">
                    <ui:outputDateTime format="M/dd/yyyy H:mm a" value="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'EMAIL'}">
                    <ui:outputEmail value="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'NUMBER'}">
                    <ui:outputNumber value="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'PHONE'}">
                    <ui:outputPhone value="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'URL'}">
                    <ui:outputURL value="{!field.value}" label="{!field.value}"/>
                </aura:if>
                <aura:if isTrue="{!field.dataType == 'STRING'}">
                    {!field.value}
                </aura:if>
            </div>
        </td>
    </aura:iteration>
</tr>

aura:iterations with multiple if statements ,clearly there is a rendering cost .

How Would we else solve dynamic display of field based on data type ?

The answer to this is use $A.createComponents() .This will bring the number of components to less than before .

Also two way data binding has its own cost associated to it .Only way to avoid two way data binding would be just use jquery or plain old javascript and build your own logic in lightning container .

Here is a handy blogpost that might explain you some of the approaches .

Server Side Performance Consideration

On Server side there are few techniques that has found to consume less time

1. JSON stringify the result from @AuraEnabled method and parse on client side in controller js to Javascript Objects .This is efficient than using a message layer class
2. Use Static variables to cache repeating logic so that you do not fetch the same data again and again
3. Use continuation class to make multiple calls in parallel .There is already a sample application to observe how one can iframe a 1px vf frame and get data via remoting .

Framework Specific Optimization

Use Storable actions along with aura enabled methods .Here is a handy article on this .

Adopt Lightning Base Components

I would recommend looking to see lighnting:datatable to see if this solves your needs .If not would recommend building one of your own with performance considerations .

I just want to mention that the Chrome plugin called Salesforce Community Page Optimizer. It's described here: https://releasenotes.docs.salesforce.com/en-us/summer17/release-notes/rn_networks_performance_tool.htm) and is an even better plugin for profiling. The Lightning inspector didn't load the view described by Mohit.

Using the Optimizers Cost view made me clear how immensively expensive all those aura:if in the Strike Grid are.