10 May
Performance Optimization in SPFx solution
The SharePoint Framework (SPFx) is a page and web component paradigm that supports client-side SharePoint development, easy SharePoint data integration, and Microsoft Teams extension. With the SharePoint Framework, you can create responsive and mobile-ready experiences and apps using modern web technologies and tools in your preferred development environment.
Key features of SharePoint framework include:
- SPFx web parts may be used on both classic & modern pages
- SPFx solutions are used to extend Microsoft Teams
- End-users can utilize SPFx client-side solutions that have been approved by tenant administrators on the sites, group, and personal sites as well.
*We need SPFx solutions to create custom web parts.
To enhance the performance, the page load speed needs to be high which will refrain the customers from going away.
1. How to reduce SPFx solution bundle size:
Bundle size is increased when all the components are added in the dropdown.
There are two ways in which we can reduce the bundle size:
- Try to skip importing the packages and using public CDN’s which will increase the performance efficiency.
Example:
- Importing the package method:
npm install slick-carousel
import “slick-carousel/slick/slick.css”;
import “slick-carousel/slick/slick-theme.css”;
- Using CDN approach: it takes the package using API
<link rel=”stylesheet” type=”text/css” charset=”UTF-8″ href=”https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css”/>
<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css”/>
- Import the selective components
Example:
- import { makeStyles, createStyles } from ‘@material-ui/core’;
Importing a parent package for a specific component will take a bit of time to import and render. So, you need to use only specific components to import the required components.
import { makeStyles, createStyles } from ‘@material-ui/core/styles’;
- Build the solution in release mode, where all the bin files are stored in a specified location and you can assess them by the CDN approach.
2. Api’s Management:
Before jumping into API management, let us know what it is.
API expands as Application Programming Interface, it is a collection of rules that describe how applications or devices may connect and communicate with one another. API allows creating applications that access data of other applications and services.
How is API Management done?
- Using filters/ parameters to get the required data to get the reduced response data size in API calls
Example: https://org.sharepoint.com/sites/Sitename/_api/web/lists/getbytitle(‘listname’)
/items?$select=ID,Title &$top=5
- We use API multiple times and to access the data quickly, utilize local storage/ index the database to store the common responses, that are used multiple times to get the data. Caching the local storage/ indexing the database will retrieve the data from the database at a faster rate.
- If you want to access the SharePoint list/libraries, then you can go ahead with “Rest API calls” which work a bit fast than “Graph API calls” to make a transaction in the SharePoint list/libraries.
- For posting bulk data in list/libraries, use pnp batch requests (it will use the rest API internally to work a bit faster). PnP batch is used to automate API batch for faster access.
- Make use of async/await functions which run faster than traditional promises.
3. Rendering Time:
- High-pixel images take time to render. Hence you need to use compressed images to reduce the rendering time.
- Use Cache first approach in service worker to cache required CSS files which helps to render CSS fast.
Ex-
const {CacheFirst, StaleWhileRevalidate} = workbox.strategies;
registerRoute(
new RegExp(/\.(?:css)/),
new CacheFirst({ cacheName: ‘css-cache’ })
);
- Make a separate component if you are using the same script in multiple places.
- Minimize the number of web parts in a single page, SharePoint 20 web parts per page are the actual limit but try not to use more than 5-6 web parts, which may reduce the efficiency and the time of page load.
In majority, users expect web pages to load a couple of seconds earlier. Performance optimization in SPFx solution will increase the page speed load and retain the users in their websites. If ignored, there will be a massive web traffic, and as a result it will lead to revenue loss.
Sareen Madupu is a Product Manager for Mesh at Acuvate. He has around 9 years of experience in Usability and User Experience of Digital Interfaces. He has been with Acuvate for 7 years and worked on concepting UX of 30+ intranets.
Sareen Babu