How to check load/performance time on each method of your SPFx Web part/Extension

In this article, we are going to see how to check the performance time on each method of the SPFx WebPart or Extension.

It is very straight forward.  We need to add few lines of code on every method of our webpart or extension component.

Add the below code related to window.performance on each method as shown below

  public async onInit(): Promise<void> {
     this.footerPlaceholder
     if (window.performance != undefined && window.performance != null) {
       if (window.performance.mark != undefined && window.performance.mark != null) {
         window.performance.mark('Method-Begin');
       }
     }
     Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
     }
 
     /** call render method for generating the needed html elements*/
     return(await this.renderPlaceHolders());
   }
 
 
 private async renderPlaceHolders(): Promise<void> {
     if (window.performance != undefined && window.performance != null) {
       if (window.performance.mark != undefined && window.performance.mark != null) {
         window.performance.mark('Method-Start');
       }
     }
     try {
    /**Handling the header placeholder*/
     if (!this.footerPlaceholder) {
       this.footerPlaceholder =
         this.context.placeholderProvider.tryCreateContent(
           PlaceholderName.Bottom,
           { onDispose: this._onDispose });
 
     /** The extension should not assume that the expected placeholder is available.*/
       if (!this.footerPlaceholder) {
         console.error('The expected placeholder (Bottom) was not found.');
         return;
       }
       const element: React.ReactElement<ICollabFooterProps> = React.createElement(
         CollabFooter,
         {}
       );
       ReactDom.render(element, this.footerPlaceholder.domElement);
     
   }
     catch (ex) {
     }
     finally {
       if (window.performance != undefined && window.performance != null) {
         if (window.performance.mark != undefined && window.performance.mark != null) {
           window.performance.mark('Method-End');
         }
       }
     }
   }
 

Once the app deployed, go to the page and open the console then enter the below code to test the load performance time of the web part

performance.getEntries()

This will give the exact load time of the SPFX web part

Sample output:

1.      PerformanceMark {name: “TestSPFX-Begin”, entryType: “mark”, startTime: 9862.00000000099, duration: 0}

2.      130:PerformanceMark {name: “TestSPFX-Start”, entryType: “mark”, startTime: 9862.00000000099, duration: 0}

3.       131:PerformanceMark {name: “TestSPFX-End”, entryType: “mark”, startTime: 9865.0000000016, duration: 0}