My problem and Situation
I have two sites with almost equal sizes of the main.dart.js (about 2.8mb), similar assets (each about 300kb), and similar network payloads. The first site has only 2,000ms blocking time according to PageSpeed. In contrast, my main app, with slightly more plugins, has an enormous blocking time of 110,000ms according to the report. I use a similar amount of initial fetching in each main file (sentry, firebase, device init), which for both in total according to console testing does not take longer than 300ms.
I am also using deferred loading for each navigation route (import using deferred as in the routes.dart)
Both sites are rendered with canvas kit,deployed on firebase and therefore served with brotli compression.
My Analysis
Although the initial payload seems to be similar there expect some loading must happen as soon as main.dart is initiated. Therefore I suspect, that certain (icon) plugins enormously influence the initial performance.
I am therefore thinking about converting each page to an individual plugin, to defer load all with the page-associated plugins, rather than having to defer load those plugins within each page.
This appears quite unhandy, but even the showcase of Flutter - Flutter gallery - seems to have outsourced major sub-pages. Is it still reasonable?
My Question
What influences the initial blocking time of a Flutter web page? Plugins, fonts?