Microsoft 365 Community PnP Virtual Conference, 8 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Virtual Conference - 09/2020 - Ways to optimize SharePoint Framework highly custom Intranet

Description

This session will share the development techniques that Velin's teams used to optimize for better performance SharePoint Framework highly customized Intranet homepage used than more than 40 000 users on daily basis.

Speaker: Velin Georgiev (Pramerica) | @VelinGeorgiev

Supporting materials:
• Intelligent Intranet - https://resources.techcommunity.microsoft.com/intelligent-intranet/
• Getting started with SharePoint Framework - https://aka.ms/spfx

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello: everyone in today's sessions we're going to talk about different ways to optimize modern sharepoint pages or team applications that are using custom, sharepoint framework applications.

A

My name is willing your gif and I'm software architect.

A

What I do in my business is that I'm consultant between the business and the development teams, where I identify requirements, and I try to translate those requirements from the business to the development team, so everyone can understand each other, I'm a microsoft mvp, I'm part of the pmp core team and also certified azure solutions. Architect.

A

Anything else is that I've I'm trying to create my own tiny company called icewolf.ie, and I wanted to put it here just to get some additional exposure.

A

Today's agenda is around mix of a real customer case, combined with some demos that are not customer case, because I cannot expose that data there, we'll talk about different ways to analyze a page performance page that has custom sharepoint framework, webparts or app customizers, and also then we'll dig deeper into how to reduce size of packages different ways to cache data on the browser.

A

How you can move logic from the client to the server and also very important part, is how you can change the way you work so upfront. You can bring a better performance and better experience to your customer applications.

A

Why would we do that? Why would we improve the performance? Well, it's it's quite easy.

A

The nowadays customers or users expect fast page load and because they're using public websites like amazon, like google, like the sites of microsoft, they're used to see a fast load times and if the page loads slower it's less likely to be attractive for those users and they're the same users in the corporate world. The same employees are used to that approach and, according to google 47 of the customers expect your page to be fast enough.

A

Now this is a real customer case that I've been working for the past few months and the page the internet page, is being hit between two and two and a half millions per month. That means that it's between mid size and big size uh organization and it's a sharepoint page and before we started optimizing, the page was loading in these time frames. It was loading on average, seven around 70 seconds and we've put a threshold. We said that we need six seconds.

A

Everything above six seconds is not normal for us, because it's too slow- and this is the breaking point here after our pocs- you can see that the page vault in 4.5 seconds and afterwards, we've got a good success with the following pocs, where at times the page were 4.3 seconds, you might say it's still slow. Why? For a second- and this is a good question- it could be four seconds because of various reasons, especially in inside corporate organizations, and many of those reasons might not be the developers or the custom application itself.

A

It could be the corporate proxy intercepting and slowing down the network. It could be too many policies slowing down the the hardware. It could be the hardware itself because the developers are used to work with modern hardware, modern machines, but the average accountant might be using a machine that is 10 years old and it might not keep up in the processing of too much javascript, for example, could be a poor vpn or someone working from a remote connection.

A

We recently we had a case where a lady was working from a rural place where the download speed was 30k per second and she was complaining because the site is low, but this affects the uh the analytics. This affects the metrics. So that's. Why and of course, because of all these reasons, the corporate employees will have a total total some tolerance and they would not expect below two seconds probably now. Another good reason is your custom application.

A

Your custom application might have might be having a blocking code that is slowing down the page, but you might not know it and it might be done by a junior developer or someone else, and we have to investigate and we can actually investigate there. We cannot solve the corporate proxy as a developers, but we can solve.

A

uh We can do some uh optimizations on the customer applications themselves a little bit about the home page. It is a communication site, it is using a modern page, but it has 34 custom features, so the whole page is built around custom web parts and app customizers that isn't a single out-of-the-box web part and it's pulling data from azure. It's pulling data from internal systems; this is how it looks. It has customizer on top. That is a navigation, but it has much more functionality that you're seeing here and we'll talk about that later.

A

It has a curl cell looking uh web part. That is showing news, and then it has another one that is showing users business unit news. That means a personalized content and there is another one: that's showing user subscriptions that it means even more personalized content when the user has saved something in their user profiles or in cosmos db, and we have to serve it from here and then they're the company events, and then there is the footer.

A

So nothing really uh fancy here, but all these different web parts are highly customized and you have you might have pinning in the front, which is additional logic. You have rules for localization. That means if the user is in a different location, a different type of news has to be pulled and rules for a user belongs to a business unit on different segment. Different rules supply.

A

So there is a lot of logic happening here, highly personalized page and we have to, and we had to analyze it and see how we can improve it, because it was loading slow, and this is the process we've taken.

A

We had to do the our analysis first and then we have to we had to identify areas of improvements, make some proof of concepts and then see if that is going to work now there is the first thing analyze.

A

So one way to analyze your page performances simply by opening a developer tools on any chromium browser like edge and see what is there? Let me try to demo that I have a sharepoint page here with a custom web part over here.

A

I will hit f12 and this is the edge the new edge browser or you can go from. I suppose here somewhere more to more tools, developer tools or just f12, and the developer tools will open.

A

They have different tabs here, but there is one that I'm interested and you would be interested and it's called the performance, one, the performance tab, and here there is an instruction to say if you want to reload that page click ctrl shift and e- and this is exactly what I'm going to do- control shift and e and it's doing some profiling and then it will give us a a nice screen with different information that we can look at and see if we can quickly find out something from here.

A

So this is the top ten uh timeline where we can control and we can select different timelines. You can see that the whole page loaded in 4.6 seconds or something like that and here is the network. So the network is really important and then we'll have a look at the main main javascript thread. These are the two things I usually look at and I don't look at the rest of these um tracks here.

A

So we'll keep it simple and we'll try to explain the network first and as on the network, you can see that this is the server and the server responded in that time and then it's starting to download different things, and there is a lot of happening in a sharepoint page. I would just select the whole team line timeline and we can see that there is a lot happening.

A

There is a lot of things here happening and we have a pages assembly that is taking sp pages assembly that is taking a fair amount of time loading, but we also have our hello world web part that is taking even more and the criteria here is. These are loading in parallel and if your web part is loading more than the pages assembly and the pages assembly is a fairly big file, then you have an issue. This is my criteria.

A

This web part is loading in 700 milliseconds, which is not acceptable because it's blocking for from that time. Here to that time, here it's blocking that is like 300 milliseconds, it's blocking and your browser is not doing anything, and this is scary and we have to take a look at the web part and see why it's so big and why it's loading so slow.

A

One way to do that is to use. uh Where is it? Yes, you use the the webpack bundle analyzer and it will show you what you have in your bundle.

A

I've added some useful links here, but I use the pnp spfx generator, because when I create a new web part, the bundle analyzer is coming with uh with the options there and I don't have to do anything done just to start using it, and I have one web part over here and then I'll try to investigate. What's going on.

A

This is my web part and because I scaffolded it with the analyzer. I have a handy option here that it's saying analyze.

A

Okay, that will generate an html file with all the dependencies in my solution, and I will explore what's happening and why that file uh is a potentially threat to my performance. So this will done here and it will generate a file.

A

Now, uh because I'm using the command line, I have typed just explorer dot to take me to the solution folder and here under temp. We have stats because the stats are being generated. So if I click on that html file, I will see all the dependencies are inside my gs web part, and you can see that the file is 3.82.

A

Megabytes, which is even a gzip size, will be one megabyte which is not quite acceptable because it will take long time, especially if you're on on mobile or remote space, and I'm sure we can get rid of some of those uh modules here because, as you can see, we've bundled the whole fluid ui and the whole material ui. And perhaps we don't need the full libraries.

A

If I go to my code, I'll have a I'll have to take a look and see what I'm actually using. My code is using my button from one button from material and one button from fluent. So perhaps I don't need all these libraries. I need just the buttons that are here from the libraries and probably I'm using the wrong import mechanism.

A

I'm importing the whole fluent.

A

Library- and this is the don'ts and the syntax that we shouldn't be using, and these are the do's and the syntax that you should be using now.

A

Both of these should work, and these will include the whole library which will add additional load on your page and imagine if you're using multiple libraries, then that file will grow enormously big, so I'll comment out those and I'll leave just the top one to show you how we will reduce the bundle and I'll comment out this button. As.

A

A

uh Now I will rebuild- or I don't even have to rebuild- I will just analyze the solution again and we'll see if that has reduced the size of it. It's three megabytes a nearly four megabytes, a reload, and now we have 360 kilobytes, which is a huge saving and I'm, including only just button related stuff. Here, I'm not seeing any more lists in the full library. Another way to improve performance and experience is by caching some stuff on the browser and there are different ways to cache on the browser.

A

What do I mean here is the our scenario and our scenario was very simple: we had to load content based on user profile data, but before we load the content, we have to get the user profile data, so we had to go to the user profiles using the user profile service grab the data and after we have all that data, make decisions and and based on those decisions, fetch data or fetch the content that could be news, articles or list items or whatever for that time of 200 or 300 milliseconds.

A

We cannot do anything because we are waiting to get the user data, and that means that we are delaying the content with additional 200 milliseconds. To avoid that we can use the browser cache. So how does it work?

A

Browser has some storage mechanisms and the first time when we, when the user is accessed the browsers, we will have to do those two milliseconds delay to get the user profile data, but once we do it, we can store it on the browser within the browser, storage and then next time, when the user visits the page instead of 200 milliseconds delay, we'll get a two milliseconds delay and we can process the content faster.

A

Different mechanisms are there and we have session storage, local storage index db and web db, and most of those are supported by older, browsers.

A

Okay, how can you find these storage mechanisms well they're in your browser and if we use the developer tools again and if we go to the application tab, you will see on the left all these storage options here and, as you can see, even microsoft is storing data there just just to serve it faster than um than making a web request.

A

I will do a quick demo where I'll show you how I've stored that data into my session storage display name and we can see how we can do it from the code. So this plan name is stored here, just and displayed below, and it's connecting the user profiles apis.

A

So it's a basic fetch query here that is saying, get user profile and I've collapsed. Those because we don't need to look at those at the moment and it's just doing a query against the user profile service and it's getting the user profile display name here and it's displaying it within the web part, but there is no catching at all at the moment. It's just a plain web request. Every time when you open the page, the way to do it with cache is adding a little bit more code.

A

So here we have get user profile, which is just a rest call, and here I've changed it, where we've renamed, that function from user profile to user profile server, and it's pretty much the same with one difference and our current user profile now is slightly different. It says session storage, get item display name. That means that if the item is within the storage, the browser storage, we will use it instead of going to the server, but if it's not there, if it's null we'll still execute the server call.

A

And finally, when we get the data here, we will store it into the local storage. So, as you can see, it's a simple few lines here and down there and the way we get items from the station store is just get item. The key- and here it's just set item the key and the value and the value has to be streamed.

A

The next way to improve your app is to move some logic from the client to the server, and this is maybe where the biggest improvement will come. If you have really really customized pages- and uh let me show you what I mean, this is what we had. We had aid web requests for the navigation three for that webpart four, four, two: four in general, we had 23 web requests, and these web requests have to come back and pre-process the data.

A

That means that you're merging data on the client and you might have a big data sets that have to be merged. Then the client will have to do all that on the cpu of the user, and sometimes it's really really slow, especially with hardware. That's that that's not prepared for that. um Now we reduced 20 requests from 23 by moving them to a web job.

A

So what we were doing is, instead of loading all these search. Api queries against sharepoint search on the browser. While the user is waiting, we moved them in a web job, or this can be done in an azure function. It's a little bit.

A

Extreme but it works every nine minutes. We update the content and this content is not mission critical, so it it. We can afford making it a little bit offline with 10 minutes, delay every 9 minutes. We execute those 20 web requests on a web job in azure.

A

We do the data merge there, and then we move the the data. That's been uh organized in a way, so we can quickly render it to sharepoint again into a document library. It could be a sharepoint cdn, but the cnn cache is one hour, so people will experience delays.

A

What we do is we just move it there in a document library and we fetch the json file from there from our web.

A

That data is 49 kb and it's loaded really really quickly on the page and it's organized in a way that the time for rendering it's fast. That means it's organized in a dictionaries where we, where you, where you don't waste time in 4-h, loops, to find out the data, and you just render it so it's another way to aggregate the data through a web job, and this is where we gained most, because it was highly customized simply and in a cases where you can't use anything other than sharepoint.

A

We still have to minimize the work there by minimizing the queries we execute also try to reduce as much as we can the expensive methods within our business logic that's executed on the client uh one way to have a look at your expensive methods in javascript is I'll. Go back to that page again, I'll open the developer tools here, just to show you how you can easily find functions that are really expensive and they might impact the performance and down below. We have a summary bar, but also we have bottom ups.

A

The way I usually track. The methods that don't behave within my code is when I sort by self time- and I purposely did that here and in self time. That is something that executes for more than two seconds and it's a t component will mount and it is inside the hello world webpages.

A

Okay, uh the more of your web parts you are seeing here on top the better. The situation is so bear in mind if you see on top more of hp pages assembly now that means you're in a good situation. If you see more of your web parts here very bad and let's let's go into that and and see why I'll, just jump to my code and I'll go to component will mount here and I'll show you. What I did where is it here and in a component will mount.

A

I just said: block for ten thousand iterations. Okay, let's go back to here. um There is the next one.

A

Over the course of three years we identified a few interesting things in our process that helped improving the overall quality of the applications. That means the overall user experience.

A

Three years ago, when I started with working with that team, is we've created, simple manifest and then lately we started using pull requests where we were demanding on those pull requests to be more off and small, and then we've um elected some seniors to review the pull requests and they had to review them closely and help the other users to provide a better, better code base.

A

Then we've we've included unit tests and it proved that the unit tests are forcing specific rules on the developers and they don't blow up the code because they have to catch up on coverage.

A

So they try to reduce the amount of code and the amount of um unnecessary functions and actions that are being there just to meet the unit test coverage, which proved to be a really good move. And then we started using a devops pipeline where we were checking for failures, and this basically will fail tests.

A

Then it's not necessary for anyone to review it and to waste time until those tests are fixed.

A

And then we somehow managed to work with vendors, where the vendors were supposed to bring their code to our source code repositories, where we could check them and they had to follow the same process as follow the manifest, create pull requests, etc, etc. A very very good example of that way of working is the office 365 cli.

A

Now just go there very quickly to show you the office. 365 cli has a really really small, manifest that everyone should follow, but that greatly improves the the way something is being submitted. A piece of code is being submitted.

A

Everyone should follow that and then the pull request itself contains just the fair amount of code that supposed to be here for every command and it passes check on a automated pipeline. And if you don't, if you don't pass that check, no one will bother reviewing that. So it's it's like another quality gate and down below. There is a detailed review of uh what we are supposed to do, and it's really really nice uh explained by whoever is doing the review and then the developer will have to do those necessary fixes.

A

So in general, this is improving the quality and we saw that with the office deceiver cli. I also saw that on my current role, where I'm working with with different teams in the corporation, so it is of a great benefit. Don't underestimate that and don't let vendors deliver code after six months and you have no idea what is in in that package.

A

These are some uh interesting things that we did over the years and first one is. We were using a rgs in in that scenario, with the internet home page, we removed the adobe gs and we started using the uh out of the box features of the sharepoint framework that has built-in mechanism to connect to third-party apis and that improved as well the page load times, because we didn't have to load that as an external dependency anymore.

A

External dependencies in the sharepoint framework is something you should have a look at and try to reduce down to minimum, because it's additional files that the page has to download before your apps are visible.

A

Then use your own cdn if possible, because the office 365 cdn cache is one hour and they're definitely files that we could cache for more than one hour. Then the commission internet explorer. I won't even talk about that.

A

If your organization is using it just do it if you're using long or short polling mechanisms in your javascript to poll uh api that could also destroy the page performance. Please avoid those and I've wrote a blog post, maybe two years ago, and it's still relevant. You can visit it if you'd like with that.

A

There is a quick link for feedback. Please please, please leave your feedback there, because this will improve our service and it will improve your experience and thanks for being part of a session. I hope that you've learned something new and.

A