Sp-dev-docs: Internet Explorer 11 performance with SPFx

[emadaliny]

Internet Explorer 11 is still the standard operating environment for many companies which makes the pages with multiple SPFx webparts really slow.

Each SPFx webpart by design adds at least 4 cached http requests ( webpart bundle JS file + few other JS libraries like jQuery, Angular & PnP JS ) + Rest/CSOM API for the webpart logic.

While all modern browsers can handle that peacefully, IE 11 can't!

For a page with 6 SPFx webparts ( ideal home page with multiple tiles ) the resulting number of requests is around 40 ( mostly from browser cache ), again for all modern browsers this loads in less than 2 seconds but for IE11, it takes around 5 seconds, which is not acceptable.

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

An easy way to improve SPFx page load in IE 11.

Observed Behavior

1 - It is not possible to bundle SPFx js files for v1.1 ( on premise SharePoint 2016 ).
2 - While it's possible to bundle Vendor JS files, but how to configure SPFx to load vendors JS files from common bundle rather than doing separate cached http request for each library.

[lucaband]

Thank you for your feedbacks.
Bundling multiple web part in the same JS file is supported in SPO but not in 2016 onPremises. We are considering adding that capability in the next version of SharePoint onPremises.

for the Internet Explorer issue, can you please add an Network (F12) trace here? we would need to understand more what's going on here before providing some assumptions

[emadaliny]

Hi @lucaband
Kindly find the attached trace file..
SPFx_Page_IE11_Windows10_Trace.zip

Few observations:

• The page contains 9 SPFx webparts and it produces 115 ajax calls and 163.73 page payload ( cached )

• I can see that all dependencies loaded multiple times in IE 11 dev tools while they are loaded once in Chrome dev tools
  

• All JS dependencies for SPFx are included as externals
  "externals": { "jquery": "node_modules/jquery/dist/jquery.min.js", "knockout": "node_modules/knockout/build/output/knockout-latest.js", "moment": "node_modules/moment/min/moment-with-locales.min.js", "pubsub-js": "node_modules/pubsub-js/src/pubsub.js", "sp-pnp-js": "node_modules/sp-pnp-js/dist/pnp.min.js" },

• Performance is worst in IE 11 on windows 7 compared to IE 11 on windows 10. Unfortunately IE 11/Win 7 is the standard operating environment for my case and instructing users to use Chrome or Edge is not an option.

• I have tried loading dependencies by master page and taking them out of SPFx project ( package.json & config.json ) while only leaving devDependencies ( to get TS to compile peacefully ) although the dependencies were either bundles with SPFx JS file or I was hit by this issue

[waldekmastykarz]

@emadaliny you trace shows that you're loading files from SharePoint. Since it's a static asset, have you properly configured the Blob Cache in your farm? Alternatively, have you considered hosting your files on a different server, where you would have a full control of the response headers and could set far-future expiration headers?

I suspect, that the reason you're seeing cache hits has to do with the configuration of your Farm rather than with SPFx.

[emadaliny]

Thanks @waldekmastykarz .. Yes, Blob Cache is configured in the farm.
I have tried using Azure CDN even before creating the issue but I was getting same behaviour on IE 11. Check below trace for same page deployed to Azure VM & files are served from Azure CDN

[waldekmastykarz]

Could it be that this is how IE11 dev tools show files loaded from cache? Have you tried using Fiddler to see which requests exactly are sent over the wire?

[emadaliny]

In Fiddler, there is no traffic send through for the cached JS files. IE 11 is caching as expected but the slowness resulted by too many cached requests for JS dependencies.

[waldekmastykarz]

Would it be fair to rephrase it to: you experience a slow page because IE is loading too many JavaScript scripts (cached or not)?

[emadaliny]

I am trying to improve performance of SPFx webparts in IE 11, I am suspecting that having too many cached JavaScript script is contributing to the issue ( not sure though if this is the root cause of the slowness ).
Ideally I would love to have the below as per original issue description:
1 - Bundle SPFx js files for v1.1 ( on premise SharePoint 2016 ).
2 - Bundle Vendor JS files into a single file rather than doing separate cached request for each library.

[waldekmastykarz]

What I'm not sure about is if it would help. I've never heard of a case where a cache hit would cause a noticeable performance hit. I'd suspect the amount of script you're loading to be the culprit.
Looking at your original message, you say it takes IE11 long time to load the page/scripts. The cache hit requests all show 0s. Have you tried to analyze what part of the page loading and rendering process takes the most time?

[emadaliny]

Thanks @waldekmastykarz
There is no single point of slowness but just too many small requests, it's like adding to a pile of hay. which is clear in the trace file.
Technically speaking, cached requests shouldn't be an issue, although the duplication of cached requests is the only difference I could see in Dev tool between IE 11 & Chrome

I have tested the following but didn't have much better performance in IE 11.
1 - Reducing the number of external dependencies ( taking out JQuery & moment JS and leaving PnPJS & Knockout ). While jQuery and moment JS can be replaced with some work, PnPJS & Knockout have to stay.
2 - Bundling some of the small vendor JS files ( pubsub ) by taking them out from external.
3 - Loading dependencies once by master page and taking them out of SPFx project ( package.json & config.json ) while only leaving devDependencies ( to get TS to compile peacefully ) although the dependencies were either bundles with SPFx JS file or I was hit by this issue.

Reducing the number of SPFx webparts in the page is the only way to make it load faster in IE 11 ( it's a pile of hay :) ) .. but that would be lots of re-development.

[waldekmastykarz]

So it could be a difference between how IE and Chrome show cache requests after all. It's no secret that IE has difficulties with running script-heavy pages. As you said: reducing the number of scripts would potentially help you improve the performance of your page, but it might not even be viable, depending on what you want to achieve.

[cslecours]

I found that whenever there is a SPFX WebPart in a page, there is telemetry from AppInsights (requests to "https://dc.services.visualstudio.com/v2/track" and "https://browser.pipe.aria.microsoft.com/Collector/3.0/") and some calls are really slow in my environments. Could it hinder the performance in IE and is there a way to disable it?

Edit : A part of this was caused by our usage of an old version of pnp properties term picker (1.3 specifically)

[tdwhite0]

I have found that IE11 especially with Windows 7 is basically unusable with spfx. Even if you micromanage your bundle sizes it’s still just too much js for it to handle.

[russgove]

I'm using IE11 on windows 7 with spfx regularly with now issues. could it
be your network?

On Wed, Jun 6, 2018 at 6:41 PM, Thomas White [e-mail]
wrote:

I have found that IE11 especially with Windows 7 is basically unusable
with spfx. Even if you micromanage your bundle sizes it’s still just too
much js for it to handle.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/SharePoint/sp-dev-docs/issues/1438#issuecomment-395236517,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACTRnBW_zQ_cx6LgaP8YcHtHxX_bgSfQks5t6FqHgaJpZM4SeL2x
.

[cslecours]

For IE11, since we are using publishing sites, we ended up externalizing our CSS in a separate file and went from 6 webparts in a page to 2 (we merge 3 webparts into 1 and moved a webpart code out of spfx) and it made a huge difference.

[emadaliny]

@russgove This issue with spfx is slowness, the webparts are working as expected total page load time is much slower compared to Edge or Chrome.
@cslecours we ended up doing the same for new development .. I am still hoping that Microsoft releases an update for SPFx version on SP2016.

[evobis]

I have the same issue with a solution i just developed for a customer. This is running on SharePoint Online.

This is a very news heavy intranet with a lot of pictures and custom SPFX webparts and when loaded in IE 11 it takes about 6 seconds to load whereas chrome loads it in 2 seconds.

I believe a lot this could be mitigated, if it was possible to specify some sort of order in which the webparts was loaded. Mostly all the webparts and pictures in the bottom of the page waaaaay down are loaded first.