Repository navigation
inlineCriticalCss is slow #2106
Description
🐞 Bug report
What modules are related to this issue?
- aspnetcore-engine
- builders
- common
- express-engine
- hapi-engine
Is this a regression?
No
Description
Recently I tried to enable inlineCriticalCss on our project. And had to roll it back quickly - SSR times jumped sky high.
styles.css in our project is around 250KB. This includes Angular Material (core + theme) and a number of old-style components that have not been converted to styleUrls yet. However even if I strip it down to bare minumum - it's still ~100KB (majority of that are Material styles).
HTML is also somewhat significant - 200KB (after I stripped it off of transfered state), and contain 1500 DOM nodes.
Profiling shows that most of the css inlining time is spent on findOne call.
My understanding is that critters has complexity roughly O(N * S), where N is number of DOM nodes, and S is number of selectors in the stylesheets. That's because it queries every selector against the DOM. And our stylesheet (the minimal version) has 1000+ selectors. The regular prod version of the stylesheet - 2600 selectors.
I'm wondering if it could be improved by grouping selectors and discarding a whole group if the top-most selector was not found. E.g if we checked .mat-button selector and didn't find any matching node - there is no point in looking for more specific selectors like .mat-button .mat-button-focus-overlay
🔬 Minimal Reproduction
🌍 Your Environment
Angular CLI: 11.2.12
Node: 12.14.1
OS: darwin x64
Angular: 11.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1102.12
@angular-devkit/build-angular 0.1102.12
@angular-devkit/core 11.2.12
@angular-devkit/schematics 11.2.12
@angular/cdk 11.2.12
@angular/cli 11.2.12
@angular/material 11.2.12
@nguniversal/builders 11.2.1
@nguniversal/express-engine 11.2.1
@schematics/angular 11.2.12
@schematics/update 0.1102.12
rxjs 6.6.3
typescript 4.1.5
Activity
alan-agius4 commentedon May 14, 2021
Hi @amakhrov,
Thanks for trying the feedback. I'll pass this to the Chrome SDK team since they are responsible of
critters.alan-agius4 commentedon May 14, 2021
@janicklas-ralph kindly see above.
webcat12345 commentedon May 18, 2021
Thank you very much @alan-agius4 I will watch this issue from now on. :)
webcat12345 commentedon May 18, 2021
Just sharing my case, not just slow, it use the CPU more than 100% and server goes down and it was really critical.
angular/angular#42098
amakhrov commentedon Jun 1, 2021
I did existing tools research and wanted to share some thoughts here.
Most tool work similarly to Critters - they individually test each selector against full dom.
However, PurgeCSS (https://github.com/FullHuman/purgecss) uses a different approach: it extracts all class names, tag names, ids and attributes from html, stores them in sets. And then checks whether all parts of a particular css selector are included in those sets. Since set lookup is constant, it gives a solid CPU boost. The tradeoff is that the result is less precise: some complex CSS rules are incorrectly marked as "used", while they do not match the actual DOM tree shape.
Critters makes a lot of sense with pre-rendering. However, SSR suffers a lot from its CPU-bound computations. Maybe we could use different tools for those two use cases? Less precise but faster - for SSR. And more precise but slower for pre-rendering.
ubaidazad commentedon Jun 11, 2021
Even disabling inlineCritical in angular.json do not solve this problem
also in server block
How can inlineCritical be disabled and not affecting SSR and CPU utilization?
alan-agius4 commentedon Jun 11, 2021
You need to disable it in your
server.ts.angular/angular#42098 (comment)
ubaidazad commentedon Jun 11, 2021
Thanks @alan-agius4 this actually helped
in server.ts
kalebdf commentedon Jul 16, 2021
Thank you @alan-agius4 & @ubaidazad. 💯 👍 Temporarily disabling the feature in
server.tswithinlineCriticalCss: falseworked for us. We await future speed improvements.At FloSports, we have a content-rich web app and several news articles with chunky HTML tables (~150KB) of athlete/team data (imagine an Excel dumps worth). Those articles really magnified the speed issue with +20s renders. In addition to these articles, in general, we saw an increase in SSR latency of 2.1x to 3.2x across all of our pages.
We didn't notice the issue until it deployed to production. Below you can see when we were alerted via Datadog of an anomaly and debugged a bit before manually rolling back the deployment.
peturh commentedon Nov 18, 2021
Same happens for us. We've seen insane response time peaks and not inlining css is not an option for us. Is only option downgrade or is this fixed in 13?
alan-agius4 commentedon Nov 18, 2021
@peturh, by downgrading you will be disabling critical css inlining. It is also unclear which version you are using, there were some changes in critters recently and are available in v13+ and the latest patch version of v12, which is 12.1.3.
peturh commentedon Nov 18, 2021
We've used: Angular
~12.2.13and nguniversal12.1.3alan-agius4 commentedon Nov 18, 2021
That cannot be right, because
@nguniversalpackages were not released as12.2.x.peturh commentedon Nov 18, 2021
Sorry, updated my post with my current package.json
46 remaining items
CarlosTorrecillas commentedon Aug 31, 2023
Hi @alan-agius4 ,
If what you mean is the performance monitor that Chrome DevTools provide, I can provide the following screenshot that has the spike when the app loads then it lasts a short while and resource consumption goes back down again. I have seen the CPU going from 0 to 32-40% on my laptop (12th Gen Intel(R) Core(TM) i7-1270P 2.20 GHz) but on my mobile the app also loads pretty fast (iPhone XS).
I have two performance profiles (one in dev mode, running locally and one in prod which I can share with you over email if you provide me one - if that is of any use.
Now, looking back at the results I provided from the Lighthouse, I saw something interesting which maybe impacting the overall load time which again, may or may not be related to the CLS issue - I think it is worth checking it because it could have a side effect:
I was running DEV:SSR locally and, with CACHE DISABLED I paid close attention to the JS files that were loaded. I could clearly see the list of dependencies that are loaded which perfectly match all the standalone components I have on the route to be rendered:
Then I looked at the Lighthouse results which was telling me that I could reduce the unused JS. That, I thought could have an impact in the performance hence it could also impact somehow in the CLS score. So I opened the PROD version of the page (https://www.micarburante.com/gasolineras-en-granada/granada/shell-avenida-del-conocimiento-1-12355 - in order to perform the same test, please do not accept the cookies because other components are loaded once you have accepted them. The safest is to open in Incognito window) and looked at all the JS files beign loaded:
Then I matched them all against the chunks that were produced by Angular when running
ng buildin PROD mode:And there were two things that I could not understand. If you take a look, the chunks
7680.XXX.js,4567.XXX.jsand9329.XXX.jscorrespond to thegas-stations-provinces-gas-stations-province-gas-stations-province-component(a different component rendered on a different route so in my view that should not be loaded) and thehome-home-home-component(last 2 chunks) which obviously is the home page and should not be loaded either.I am sure I have no dependencies to those modules and I searched for them in the code that could cause Angular to pull the modules:
So to me it seems that the final PROD bundle, somehow, is including JS from other pages and it shouldn't. Note that I have FontAwesome installed and I think that is also causing us a performance hit from what we have investigated, but in any case we are applying many strategies to get the best performance possible: using OnPush change detection where possible (and reviewed change detection cycles using Angular Profiler), using interesection observers to hide elements under the fold, using track-by functions, removing the unused CSS using PurgeCSS...My believe is that somehow the FontAwesome code is being spread across those modules and therefore they get referenced instead of having a separate chunk just for that. We are using a few icons here and there and for now we are referencing the module in the standalone component in question and import the icon using deep paths so that the minimum code gets referenced - as suggested by FA.
Finally, to give a bit more visibility about the infrastructure, the set up is a full standalone component SSR solution, running on a
node:18.10-alpineDocker container on a 16GB machine with 8 virtual CPUs. The performance monitor of the server is pretty good and stable so I don't expect to be that the root cause. The APP is behind a NGINX acting as reverse proxy to send traffic to that particular container.I have deployed a new version of the site with
inlineCriticalCss: trueso that all optimizations are enabled to see if there is any difference and run a CPU monitoring - again I am not sure if that's what you mean, otherwise let me know and we can test:Also we considered looking at this dependency mistery, what I can say, and there is no doubt about it, is that at the very moment I enable inlineCriticalCss the overall performance of the application gets reduced and I also have a worse CLS score. That happens toggling that flag instantly in the Lighthouse score so there is definitely something ELSE that is ALSO going on that is affecting it.
I'm happy to discuss that further on a call if needed
alan-agius4 commentedon Aug 31, 2023
Hi @CarlosTorrecillas, thanks for the detailed information but it feels like we are diverging from the original issue which is that critical css inlining is slow, which needs to be benchmarked and profiled on the server.
I did mean a CPU profile (of the server) which can be captured by Chrome devtools. There is a good explanation angular/angular-cli#8259 (comment) on how to capture this, although in your case you need to replace
ng buildwith the script that spawns the node server.This CPU profile is needed to see part of the code is the bottleneck of critical css inlining which does not happen on the browser. To why CLS has deteriorated with critical css inlining, is completely unrelated to this issue, but again without a minimal reproduction it's hard to tell what is happening. Although I did notice that some elements like
cookies-banner-containeronly get generated on the client, this can impact CWV negatively especially when critical css inlining is enabled as certain CSS classes might be missing.Overall, I think your issue is completely unrelated to issue reported here, which is about critical css inlining is slow on the server.
CarlosTorrecillas commentedon Aug 31, 2023
OK cool, I am able to get the debugger attached but in my case, as we want to debug the server I am doing:
"debug": "node --max-old-space-size=8192 --inspect --inspect-brk dist/server/main.js"because we want to debug the server. Then I get the debugger attached and it breaks at the very top line of the first file and I hit play so that I get the node server running.
After that I am not able to see the Profilter tab in Chrome DevTools. I only see a Performance tab which seems to be capturing only Memory but not CPU.
Any ideas?
CarlosTorrecillas commentedon Aug 31, 2023
@alan-agius4 , I have managed to run a node CPU profiler using another command so I can share some results and hopefully they can be of some use.
SETTING INLINE CRITICAL CSS TO TRUE
`Statistical profiling result from isolate-000001F0AEA656E0-4000-v8.log, (574 ticks, 0 unaccounted, 0 excluded).
[Shared libraries]:
ticks total nonlib name
507 88.3% C:\Windows\SYSTEM32\ntdll.dll
66 11.5% C:\Program Files\nodejs\node.exe
[JavaScript]:
ticks total nonlib name
1 0.2% 100.0% LazyCompile: *assertTNodeForTView C:\git\jq.micarburante.website\dist\server\main.js:64991:29
[C++]:
ticks total nonlib name
[Summary]:
ticks total nonlib name
1 0.2% 100.0% JavaScript
0 0.0% 0.0% C++
1 0.2% 100.0% GC
573 99.8% Shared libraries
[C++ entry points]:
ticks cpp total name
[Bottom up (heavy) profile]:
Note: percentage shows a share of a particular caller in the total
amount of its parent calls.
Callers occupying less than 1.0% are not shown.
ticks parent name
507 88.3% C:\Windows\SYSTEM32\ntdll.dll
9 1.8% C:\Program Files\nodejs\node.exe
1 11.1% LazyCompile: ~provideZoneChangeDetection C:\git\jq.micarburante.website\dist\server\main.js:91200:36
1 100.0% LazyCompile: ~internalCreateApplication C:\git\jq.micarburante.website\dist\server\main.js:90382:35
1 100.0% LazyCompile: ~bootstrapApplication C:\git\jq.micarburante.website\dist\server\main.js:95694:30
1 100.0% LazyCompile: ~bootstrap C:\git\jq.micarburante.website\dist\server\main.js:778:19
1 11.1% LazyCompile: ~handle C:\git\jq.micarburante.website\dist\server\main.js:11872:49
1 100.0% LazyCompile: ~next C:\git\jq.micarburante.website\dist\server\main.js:12073:16
1 100.0% LazyCompile: ~dispatch C:\git\jq.micarburante.website\dist\server\main.js:12060:45
1 100.0% LazyCompile: ~handle C:\git\jq.micarburante.website\dist\server\main.js:11872:49
1 11.1% LazyCompile: ~findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 100.0% LazyCompile: ~findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 100.0% LazyCompile: ~findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 100.0% LazyCompile: ~findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 11.1% LazyCompile: ~executeViewQueryFn C:\git\jq.micarburante.website\dist\server\main.js:75005:28
1 100.0% LazyCompile: ~renderView C:\git\jq.micarburante.website\dist\server\main.js:75165:20
1 100.0% LazyCompile: ~renderComponent C:\git\jq.micarburante.website\dist\server\main.js:75114:25
1 100.0% LazyCompile: ~renderChildComponents C:\git\jq.micarburante.website\dist\server\main.js:75218:31
1 11.1% LazyCompile: ~__require C:\git\jq.micarburante.website\dist\server\main.js:96895:49
1 100.0% LazyCompile: ~external/npm/node_modules/domino/lib/Node.js C:\git\jq.micarburante.website\dist\server\main.js:97619:49
1 100.0% LazyCompile: ~__require C:\git\jq.micarburante.website\dist\server\main.js:96895:49
1 100.0% LazyCompile: ~external/npm/node_modules/domino/lib/Document.js C:\git\jq.micarburante.website\dist\server\main.js:104145:53
1 11.1% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\6649.js:22945:28
1 100.0% C:\Program Files\nodejs\node.exe
1 100.0% LazyCompile: ~callHooks C:\git\jq.micarburante.website\dist\server\6649.js:22940:19
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\6649.js:23802:32
1 11.1% Function: ^get node:internal/streams/duplex:103:8
1 100.0% LazyCompile: ~processCallback node:zlib:542:25
1 11.1% Function: ^exports.createElement C:\git\jq.micarburante.website\dist\server\main.js:102434:38
1 100.0% Function: ^value C:\git\jq.micarburante.website\dist\server\main.js:104327:25
1 100.0% Function: ^createElement C:\git\jq.micarburante.website\dist\server\main.js:95195:16
1 100.0% Function: ^createElement C:\git\jq.micarburante.website\dist\server\main.js:95411:16
1 11.1% C:\Program Files\nodejs\node.exe
1 100.0% LazyCompile: ~constructTimingAst C:\git\jq.micarburante.website\dist\server\main.js:49459:28
1 100.0% LazyCompile: ~visitAnimate C:\git\jq.micarburante.website\dist\server\main.js:49174:15
1 100.0% LazyCompile: ~visitDslNode C:\git\jq.micarburante.website\dist\server\main.js:48881:22
66 11.5% C:\Program Files\nodejs\node.exe
50 75.8% C:\Program Files\nodejs\node.exe
15 30.0% LazyCompile: ~compileFunction node:vm:316:25
15 100.0% LazyCompile: ~wrapSafe node:internal/modules/cjs/loader:1063:18
15 100.0% LazyCompile: ~Module._compile node:internal/modules/cjs/loader:1103:37
15 100.0% LazyCompile: ~Module._extensions..js node:internal/modules/cjs/loader:1158:37
2 4.0% LazyCompile: ~webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 50.0% LazyCompile: ~34228 C:\git\jq.micarburante.website\dist\server\main.js:52582:8
1 100.0% LazyCompile: ~webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~97014 C:\git\jq.micarburante.website\dist\server\main.js:96848:8
1 50.0% Function: ~85028 C:\git\jq.micarburante.website\dist\server\main.js:27649:16
1 100.0% LazyCompile: ~webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~59936 C:\git\jq.micarburante.website\dist\server\main.js:62493:8
2 4.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 50.0% LazyCompile: ~82605 C:\git\jq.micarburante.website\dist\server\6649.js:7810:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~11162 C:\git\jq.micarburante.website\dist\server\6649.js:4601:8
1 50.0% LazyCompile: ~69838 C:\git\jq.micarburante.website\dist\server\main.js:9347:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~35162 C:\git\jq.micarburante.website\dist\server\main.js:8694:8
2 4.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:46132:23
1 50.0% LazyCompile: ~onResponseHeaders C:\git\jq.micarburante.website\dist\server\main.js:3381:46
1 100.0% Function: ^writeHead C:\git\jq.micarburante.website\dist\server\main.js:21688:28
1 100.0% Function: ^_implicitHeader node:_http_server:303:68
1 50.0% Function: ^Readable.on node:internal/streams/readable:886:33
1 100.0% Function: ^clearIncoming node:_http_server:863:23
1 100.0% Function: ^resOnFinish node:_http_server:876:21
1 2.0% LazyCompile: ~slice node:buffer:599:12
1 100.0% LazyCompile: ~toString node:buffer:789:46
1 100.0% LazyCompile: ~readFileSync node:fs:460:22
1 100.0% LazyCompile: ~Module._extensions..js node:internal/modules/cjs/loader:1158:37
1 2.0% LazyCompile: ~recognize$1 C:\git\jq.micarburante.website\dist\server\main.js:117575:21
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:117930:67
1 100.0% LazyCompile: ~doInnerSub C:\git\jq.micarburante.website\dist\server\main.js:34095:29
1 100.0% LazyCompile: ~outerNext C:\git\jq.micarburante.website\dist\server\main.js:34092:28
1 2.0% LazyCompile: ~readSync node:fs:700:18
1 100.0% LazyCompile: ~tryReadSync node:fs:439:21
1 100.0% LazyCompile: ~readFileSync node:fs:460:22
1 100.0% LazyCompile: ~Module._extensions..js node:internal/modules/cjs/loader:1158:37
1 2.0% LazyCompile: ~prepareMainThreadExecution node:internal/process/pre_execution:36:36
1 100.0% Function: ~ node:internal/main/run_main_module:1:1
1 2.0% LazyCompile: ~module.exports C:\git\jq.micarburante.website\dist\server\main.js:26685:27
1 100.0% LazyCompile: ~parseExtendedQueryString C:\git\jq.micarburante.website\dist\server\main.js:12461:34
1 100.0% LazyCompile: ~query C:\git\jq.micarburante.website\dist\server\main.js:9546:24
1 100.0% LazyCompile: ~handle C:\git\jq.micarburante.website\dist\server\main.js:11872:49
1 2.0% LazyCompile: ~merge C:\git\jq.micarburante.website\dist\server\main.js:70964:15
1 100.0% LazyCompile: ~59936 C:\git\jq.micarburante.website\dist\server\main.js:62493:8
1 100.0% LazyCompile: ~webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~34228 C:\git\jq.micarburante.website\dist\server\main.js:52582:8
1 2.0% LazyCompile: ~mark node:internal/perf/usertiming:97:14
1 100.0% LazyCompile: ~mark C:\git\jq.micarburante.website\dist\server\main.js:44418:16
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:44416:11
1 100.0% LazyCompile: ~20650 C:\git\jq.micarburante.website\dist\server\main.js:44406:8
1 2.0% LazyCompile: ~isatty node:tty:42:16
1 100.0% LazyCompile: ~76709 C:\git\jq.micarburante.website\dist\server\main.js:7078:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~14581 C:\git\jq.micarburante.website\dist\server\main.js:5603:8
1 2.0% LazyCompile: ~invokeDirectivesHostBindings C:\git\jq.micarburante.website\dist\server\main.js:74647:38
1 100.0% LazyCompile: ~createDirectivesInstances C:\git\jq.micarburante.website\dist\server\main.js:74070:35
1 100.0% LazyCompile: ~╔Á╔ÁelementStart C:\git\jq.micarburante.website\dist\server\main.js:78148:24
1 100.0% LazyCompile: ~╔Á╔Áelement C:\git\jq.micarburante.website\dist\server\main.js:78233:19
1 2.0% LazyCompile: ~filterSelectors C:\git\jq.micarburante.website\dist\server\main.js:122426:25
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:122867:36
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:122343:10
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:122377:34
1 2.0% LazyCompile: ~factory C:\git\jq.micarburante.website\dist\server\main.js:72166:19
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:72063:51
1 100.0% Function: ^runInInjectorProfilerContext C:\git\jq.micarburante.website\dist\server\main.js:63563:38
1 100.0% Function: ^hydrate C:\git\jq.micarburante.website\dist\server\main.js:72057:10
1 2.0% LazyCompile: ~createUrlTreeFromSegmentGroup C:\git\jq.micarburante.website\dist\server\main.js:114848:39
1 100.0% LazyCompile: ~createUrlTree C:\git\jq.micarburante.website\dist\server\main.js:119254:18
1 100.0% Function: ^get urlTree C:\git\jq.micarburante.website\dist\server\main.js:119804:16
1 100.0% LazyCompile: ~updateHref C:\git\jq.micarburante.website\dist\server\main.js:119779:15
1 2.0% LazyCompile: ~createResolverClass node:internal/dns/utils:223:29
1 100.0% Function: ~ node:internal/dns/callback_resolver:1:1
1 100.0% Function: ^compileForInternalLoader node:internal/bootstrap/loaders:316:27
1 100.0% Function: ^nativeModuleRequire node:internal/bootstrap/loaders:353:29
1 2.0% LazyCompile: ~_class14_Factory C:\git\jq.micarburante.website\dist\server\main.js:119543:44
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:72063:51
1 100.0% Function: ^runInInjectorProfilerContext C:\git\jq.micarburante.website\dist\server\main.js:63563:38
1 100.0% Function: ^hydrate C:\git\jq.micarburante.website\dist\server\main.js:72057:10
1 2.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:129106:33
1 100.0% Function: ^ZoneAwarePromise C:\git\jq.micarburante.website\dist\server\main.js:45694:16
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:129103:19
1 100.0% LazyCompile: ~ngOnInit C:\git\jq.micarburante.website\dist\server\3405.js:221:13
1 2.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\6649.js:4413:23
1 100.0% Function: ^ConsumerObserver.next C:\git\jq.micarburante.website\dist\server\main.js:29756:46
1 100.0% Function: ^Subscriber._next C:\git\jq.micarburante.website\dist\server\main.js:29728:41
1 100.0% Function: ^Subscriber.next C:\git\jq.micarburante.website\dist\server\main.js:29698:40
1 2.0% LazyCompile: ~66675 C:\git\jq.micarburante.website\dist\server\main.js:663:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~49174 C:\git\jq.micarburante.website\dist\server\main.js:759:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 2.0% LazyCompile: ~62782 C:\git\jq.micarburante.website\dist\server\main.js:20910:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~65547 C:\git\jq.micarburante.website\dist\server\main.js:40522:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 2.0% LazyCompile: ~14033 C:\git\jq.micarburante.website\dist\server\main.js:126905:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~6426 C:\git\jq.micarburante.website\dist\server\main.js:126135:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 2.0% Function: ~ node:internal/modules/esm/loader:1:1
1 100.0% Function: ~ node:internal/process/esm_loader:1:1
1 100.0% Function: ~ node:internal/modules/cjs/loader:1:1
1 100.0% LazyCompile: ~initializeCJSLoader node:internal/process/pre_execution:535:29
1 2.0% Function: ^stat node:fs:1508:14
1 100.0% Function: ^scheduleTask C:\git\jq.micarburante.website\dist\server\main.js:45286:24
1 100.0% LazyCompile: *scheduleTask C:\git\jq.micarburante.website\dist\server\main.js:44600:19
1 100.0% Function: ^scheduleMacroTask C:\git\jq.micarburante.website\dist\server\main.js:44638:24
1 2.0% Function: ^decodeid C:\git\jq.micarburante.website\dist\server\main.js:98898:29
1 100.0% LazyCompile: ~tok C:\git\jq.micarburante.website\dist\server\main.js:99433:24
1 100.0% Function: ^compile C:\git\jq.micarburante.website\dist\server\main.js:99359:28
1 100.0% Function: ^find C:\git\jq.micarburante.website\dist\server\main.js:99515:25
1 2.0% Function: ^compileForInternalLoader node:internal/bootstrap/loaders:316:27
1 100.0% Function: ^nativeModuleRequire node:internal/bootstrap/loaders:353:29
1 100.0% Function: ~ node:internal/cluster/primary:1:1
1 100.0% Function: ^compileForInternalLoader node:internal/bootstrap/loaders:316:27
1 2.0% Function: ^adjustSVGAttributes C:\git\jq.micarburante.website\dist\server\main.js:107699:33
1 100.0% LazyCompile: ~in_body_mode C:\git\jq.micarburante.website\dist\server\main.js:111484:28
1 100.0% Function: ^insertToken2 C:\git\jq.micarburante.website\dist\server\main.js:108317:71
1 100.0% Function: ^emitTag C:\git\jq.micarburante.website\dist\server\main.js:108276:23
1 2.0% Function: ^_objectSpread2 C:\git\jq.micarburante.website\dist\server\6649.js:21860:24
1 100.0% Function: ^makeInlineSvgAbstract C:\git\jq.micarburante.website\dist\server\6649.js:23117:31
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\6649.js:23802:32
1 100.0% Function: ^get C:\git\jq.micarburante.website\dist\server\6649.js:23056:22
1 2.0% Function: ^_addListener node:events:541:22
1 100.0% Function: ^addListener node:events:604:58
1 100.0% Function: ^customScheduleNonGlobal C:\git\jq.micarburante.website\dist\server\main.js:46113:46
1 100.0% LazyCompile: *scheduleTask C:\git\jq.micarburante.website\dist\server\main.js:44600:19
1 2.0% Function: ^ZoneTask C:\git\jq.micarburante.website\dist\server\main.js:44822:16
1 100.0% Function: ^scheduleEventTask C:\git\jq.micarburante.website\dist\server\main.js:44641:24
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:46132:23
1 100.0% Function: ^serveStatic C:\git\jq.micarburante.website\dist\server\main.js:15137:30
1 2.0% Function: ^OperatorSubscriber.unsubscribe C:\git\jq.micarburante.website\dist\server\main.js:32015:55
1 100.0% Function: ^execFinalizer C:\git\jq.micarburante.website\dist\server\main.js:30036:23
1 100.0% Function: ^Subscription.unsubscribe C:\git\jq.micarburante.website\dist\server\main.js:29913:49
1 100.0% Function: ^Subscriber.unsubscribe C:\git\jq.micarburante.website\dist\server\main.js:29721:47
1 2.0% C:\Program Files\nodejs\node.exe
1 100.0% LazyCompile: ~named_character_reference_state C:\git\jq.micarburante.website\dist\server\main.js:110990:47
1 100.0% Function: ^scanChars C:\git\jq.micarburante.website\dist\server\main.js:108075:25
1 100.0% LazyCompile: ~parse C:\git\jq.micarburante.website\dist\server\main.js:107987:25
1 1.5% LazyCompile: ~Rule C:\git\jq.micarburante.website\dist\server\main.js:25333:14
1 100.0% LazyCompile: ~rule C:\git\jq.micarburante.website\dist\server\main.js:24844:7
1 100.0% Function: ^other C:\git\jq.micarburante.website\dist\server\main.js:24717:8
1 100.0% Function: ^parse C:\git\jq.micarburante.website\dist\server\main.js:24774:8
1 100.0% LazyCompile: ~parse C:\git\jq.micarburante.website\dist\server\main.js:24358:15
1 1.5% LazyCompile: ~ElementVisibleDirective_Factory C:\git\jq.micarburante.website\dist\server\6649.js:5919:57
1 100.0% Function: ^getNodeInjectable C:\git\jq.micarburante.website\dist\server\main.js:67518:27
1 100.0% Function: ^instantiateAllDirectives C:\git\jq.micarburante.website\dist\server\main.js:74620:34
1 100.0% Function: ^createDirectivesInstances C:\git\jq.micarburante.website\dist\server\main.js:74070:35
1 100.0% Function: ^╔Á╔ÁelementStart C:\git\jq.micarburante.website\dist\server\main.js:78148:24
1 1.5% LazyCompile: ~2302 C:\git\jq.micarburante.website\dist\server\main.js:8715:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~69838 C:\git\jq.micarburante.website\dist\server\main.js:9347:8
1 100.0% Function: ^webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~35162 C:\git\jq.micarburante.website\dist\server\main.js:8694:8
1 1.5% LazyCompile: *scheduleTask C:\git\jq.micarburante.website\dist\server\main.js:44600:19
1 100.0% Function: ^scheduleMicroTask C:\git\jq.micarburante.website\dist\server\main.js:44635:24
1 100.0% Function: ^ C:\git\jq.micarburante.website\dist\server\main.js:45314:63
1 100.0% Function: ^proto. C:\git\jq.micarburante.website\dist\server\main.js:45272:30
1 100.0% Function: ^emitReadable node:internal/streams/readable:575:22
1 1.5% LazyCompile: *findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 100.0% LazyCompile: *findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 100.0% LazyCompile: *findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 100.0% LazyCompile: *findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 100.0% LazyCompile: *findOne C:\git\jq.micarburante.website\dist\server\main.js:125835:17
1 1.5% Function: ^writeHead C:\git\jq.micarburante.website\dist\server\main.js:21688:28
1 100.0% Function: ^_implicitHeader node:_http_server:303:68
1 100.0% Function: ^write C:\git\jq.micarburante.website\dist\server\main.js:3334:31
1 100.0% Function: ^ondata node:internal/streams/readable:764:18
1 100.0% LazyCompile: *runTask C:\git\jq.micarburante.website\dist\server\main.js:44554:14
1 1.5% Function: ^isEndOfTagSection C:\git\jq.micarburante.website\dist\server\main.js:127824:27
1 100.0% Function: ^stateInAttributeName C:\git\jq.micarburante.website\dist\server\main.js:128161:23
1 100.0% Function: ^parse C:\git\jq.micarburante.website\dist\server\main.js:128431:8
1 100.0% LazyCompile: ~write C:\git\jq.micarburante.website\dist\server\main.js:127901:8
1 100.0% LazyCompile: ~write C:\git\jq.micarburante.website\dist\server\main.js:127674:8
1 1.5% Function: ^_implicitHeader node:_http_server:303:68
1 100.0% Function: ^write C:\git\jq.micarburante.website\dist\server\main.js:3334:31
1 100.0% Function: ^ondata node:internal/streams/readable:764:18
1 100.0% LazyCompile: *runTask C:\git\jq.micarburante.website\dist\server\main.js:44554:14
1 100.0% Function: ^invokeTask C:\git\jq.micarburante.website\dist\server\main.js:44849:22
1 1.5% Function: ^EventEmitter node:events:212:22
1 100.0% Function: ^Stream node:internal/streams/legacy:10:16
1 100.0% Function: ^Readable node:internal/streams/readable:186:18
1 100.0% Function: ^Duplex node:internal/streams/duplex:54:16
1 100.0% LazyCompile: ~Transform node:internal/streams/transform:82:19`
SETTING INLINE CRITICAL CSS TO FALSE
`Statistical profiling result from isolate-000002C4FD1A5E40-29108-v8.log, (696 ticks, 0 unaccounted, 0 excluded).
[Shared libraries]:
ticks total nonlib name
512 73.6% C:\Windows\SYSTEM32\ntdll.dll
175 25.1% C:\Program Files\nodejs\node.exe
2 0.3% C:\Windows\System32\KERNELBASE.dll
[JavaScript]:
ticks total nonlib name
1 0.1% 14.3% Function: ^scanChars C:\git\jq.micarburante.website\dist\server\main.js:108075:25
1 0.1% 14.3% Function: ^runTask C:\git\jq.micarburante.website\dist\server\main.js:44554:14
1 0.1% 14.3% Function: ^nextTick node:internal/process/task_queues:103:18
1 0.1% 14.3% Function: ^insertBefore C:\git\jq.micarburante.website\dist\server\main.js:97450:30
1 0.1% 14.3% Function: ^drainMicroTaskQueue C:\git\jq.micarburante.website\dist\server\main.js:44941:31
1 0.1% 14.3% Function: ^createRenderer C:\git\jq.micarburante.website\dist\server\main.js:95123:19
1 0.1% 14.3% Function: ^ZoneTask C:\git\jq.micarburante.website\dist\server\main.js:44822:16
[C++]:
ticks total nonlib name
[Summary]:
ticks total nonlib name
7 1.0% 100.0% JavaScript
0 0.0% 0.0% C++
4 0.6% 57.1% GC
689 99.0% Shared libraries
[C++ entry points]:
ticks cpp total name
[Bottom up (heavy) profile]:
Note: percentage shows a share of a particular caller in the total
amount of its parent calls.
Callers occupying less than 1.0% are not shown.
ticks parent name
512 73.6% C:\Windows\SYSTEM32\ntdll.dll
32 6.3% C:\Program Files\nodejs\node.exe
1 3.1% LazyCompile: ~╔ÁLocaleDataIndex C:\git\jq.micarburante.website\dist\server\main.js:62634:44
1 100.0% LazyCompile: ~getLocaleNumberSymbol C:\git\jq.micarburante.website\dist\server\main.js:53973:31
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:54433:19
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:54306:17
1 3.1% LazyCompile: ~send C:\git\jq.micarburante.website\dist\server\main.js:14405:42
1 100.0% LazyCompile: ~onstat C:\git\jq.micarburante.website\dist\server\main.js:14517:32
1 100.0% Function: ^invokeTask C:\git\jq.micarburante.website\dist\server\main.js:44778:15
1 100.0% Function: ^runTask C:\git\jq.micarburante.website\dist\server\main.js:44554:14
1 3.1% LazyCompile: ~scheduleNavigation C:\git\jq.micarburante.website\dist\server\main.js:119419:23
1 100.0% LazyCompile: ~navigateToSyncWithBrowser C:\git\jq.micarburante.website\dist\server\main.js:119125:30
1 100.0% LazyCompile: ~initialNavigation C:\git\jq.micarburante.website\dist\server\main.js:119089:22
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:120495:10
1 3.1% LazyCompile: ~proto. C:\git\jq.micarburante.website\dist\server\main.js:46264:45
1 100.0% LazyCompile: ~Readable.removeListener node:internal/streams/readable:916:45
1 100.0% LazyCompile: ~responseKeepAlive node:_http_client:708:27
1 100.0% LazyCompile: ~responseOnEnd node:_http_client:739:23
1 3.1% LazyCompile: ~pipe C:\git\jq.micarburante.website\dist\server\main.js:14314:42
1 100.0% Function: ^serveStatic C:\git\jq.micarburante.website\dist\server\main.js:15137:30
1 100.0% Function: ^handle C:\git\jq.micarburante.website\dist\server\main.js:11872:49
1 100.0% Function: ^next C:\git\jq.micarburante.website\dist\server\main.js:12073:16
1 3.1% LazyCompile: ~percolateUp node:internal/priority_queue:65:14
1 100.0% LazyCompile: ~insert node:internal/priority_queue:26:9
1 100.0% LazyCompile: ~insert node:internal/timers:355:16
1 100.0% LazyCompile: ~setTimeout node:timers:140:20
1 3.1% LazyCompile: ~parseStyles C:\git\jq.micarburante.website\dist\server\main.js:101969:25
1 100.0% LazyCompile: ~value C:\git\jq.micarburante.website\dist\server\main.js:102055:25
1 100.0% LazyCompile: ~setStyle C:\git\jq.micarburante.website\dist\server\main.js:95278:11
1 100.0% LazyCompile: ~setStyle C:\git\jq.micarburante.website\dist\server\main.js:94324:11
1 3.1% LazyCompile: ~parse C:\git\jq.micarburante.website\dist\server\main.js:44346:15
1 100.0% LazyCompile: ~append C:\git\jq.micarburante.website\dist\server\main.js:44295:16
1 100.0% LazyCompile: ~vary C:\git\jq.micarburante.website\dist\server\main.js:44384:14
1 100.0% LazyCompile: ~onResponseHeaders C:\git\jq.micarburante.website\dist\server\main.js:3381:46
1 3.1% LazyCompile: ~insertToken2 C:\git\jq.micarburante.website\dist\server\main.js:108317:71
1 100.0% LazyCompile: ~emitCharString C:\git\jq.micarburante.website\dist\server\main.js:108267:30
1 100.0% LazyCompile: ~emitCharsWhile C:\git\jq.micarburante.website\dist\server\main.js:108259:30
1 100.0% LazyCompile: ~data_state C:\git\jq.micarburante.website\dist\server\main.js:108675:26
1 3.1% LazyCompile: ~insert node:internal/timers:355:16
1 100.0% Function: ^setUnrefTimeout node:internal/timers:377:25
1 100.0% LazyCompile: ~setStreamTimeout node:internal/stream_base_commons:237:26
1 100.0% LazyCompile: ~resOnFinish node:_http_server:876:21
1 3.1% LazyCompile: ~getFuelTypeStringsFormatted C:\git\jq.micarburante.website\dist\server\6649.js:6109:39
1 100.0% LazyCompile: ~ngOnInit C:\git\jq.micarburante.website\dist\server\6649.js:2319:13
1 100.0% Function: ^callHookInternal C:\git\jq.micarburante.website\dist\server\main.js:66725:26
1 100.0% Function: ^callHook C:\git\jq.micarburante.website\dist\server\main.js:66743:18
1 3.1% LazyCompile: ~getFuelTypeAsEnum C:\git\jq.micarburante.website\dist\server\6649.js:6097:29
1 100.0% LazyCompile: ~getFuelTypeNameFromString C:\git\jq.micarburante.website\dist\server\6649.js:6093:37
1 100.0% LazyCompile: ~ngOnInit C:\git\jq.micarburante.website\dist\server\6649.js:1642:13
1 100.0% Function: ^callHookInternal C:\git\jq.micarburante.website\dist\server\main.js:66725:26
1 3.1% LazyCompile: ~getDefaultResolver node:internal/dns/utils:174:28
1 100.0% LazyCompile: ~bindDefaultResolver node:internal/dns/utils:187:29
1 100.0% Function: ~ node:dns:1:1
1 100.0% Function: ^compileForInternalLoader node:internal/bootstrap/loaders:316:27
1 3.1% LazyCompile: ~exports.property C:\git\jq.micarburante.website\dist\server\main.js:98440:33
1 100.0% LazyCompile: ~module.exports C:\git\jq.micarburante.website\dist\server\main.js:102359:31
1 100.0% LazyCompile: ~define C:\git\jq.micarburante.website\dist\server\main.js:102438:20
1 100.0% LazyCompile: ~external/npm/node_modules/domino/lib/htmlelts.js C:\git\jq.micarburante.website\dist\server\main.js:102423:53
1 3.1% LazyCompile: ~detachView C:\git\jq.micarburante.website\dist\server\main.js:90983:15
1 100.0% LazyCompile: ~destroy C:\git\jq.micarburante.website\dist\server\main.js:75674:10
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:91008:37
1 100.0% C:\Program Files\nodejs\node.exe
1 3.1% LazyCompile: ~destroy C:\git\jq.micarburante.website\dist\server\main.js:94271:10
1 100.0% LazyCompile: ~cleanUpView C:\git\jq.micarburante.website\dist\server\main.js:69864:21
1 100.0% LazyCompile: ~destroyViewTree C:\git\jq.micarburante.website\dist\server\main.js:69685:25
1 100.0% LazyCompile: ~destroyLView C:\git\jq.micarburante.website\dist\server\main.js:69845:22
1 3.1% LazyCompile: ~bindingUpdated C:\git\jq.micarburante.website\dist\server\main.js:76746:24
1 100.0% LazyCompile: ~╔Á╔Áattribute C:\git\jq.micarburante.website\dist\server\main.js:76800:21
1 100.0% Function: ^_class15_HostBindings C:\git\jq.micarburante.website\dist\server\main.js:119827:49
1 100.0% Function: ^runInContext C:\git\jq.micarburante.website\dist\server\main.js:73733:15
1 3.1% LazyCompile: ~annotateHostElementForHydration C:\git\jq.micarburante.website\dist\server\main.js:93410:41
1 100.0% LazyCompile: ~annotateComponentLViewForHydration C:\git\jq.micarburante.website\dist\server\main.js:93077:44
1 100.0% LazyCompile: ~annotateForHydration C:\git\jq.micarburante.website\dist\server\main.js:93121:30
1 100.0% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:113778:157
1 3.1% LazyCompile: ~adjustForeignAttributes C:\git\jq.micarburante.website\dist\server\main.js:107714:37
1 100.0% LazyCompile: ~in_body_mode C:\git\jq.micarburante.website\dist\server\main.js:111484:28
1 100.0% Function: ^insertToken2 C:\git\jq.micarburante.website\dist\server\main.js:108317:71
1 100.0% Function: ^emitTag C:\git\jq.micarburante.website\dist\server\main.js:108276:23
1 3.1% LazyCompile: ~_flushAnimations C:\git\jq.micarburante.website\dist\server\main.js:51441:19
1 100.0% Function: ^flush C:\git\jq.micarburante.website\dist\server\main.js:51391:8
1 100.0% Function: ^flush C:\git\jq.micarburante.website\dist\server\main.js:52217:8
1 100.0% LazyCompile: ~ngOnDestroy C:\git\jq.micarburante.website\dist\server\main.js:94410:16
1 3.1% LazyCompile: ~_class5_Factory C:\git\jq.micarburante.website\dist\server\6649.js:21455:42
1 100.0% Function: ^getNodeInjectable C:\git\jq.micarburante.website\dist\server\main.js:67518:27
1 100.0% Function: ^instantiateAllDirectives C:\git\jq.micarburante.website\dist\server\main.js:74620:34
1 100.0% Function: ^createDirectivesInstances C:\git\jq.micarburante.website\dist\server\main.js:74070:35
1 3.1% LazyCompile: ~webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~34228 C:\git\jq.micarburante.website\dist\server\main.js:52582:8
1 100.0% LazyCompile: ~webpack_require C:\git\jq.micarburante.website\dist\server\main.js:129248:39
1 100.0% LazyCompile: ~97014 C:\git\jq.micarburante.website\dist\server\main.js:96848:8
1 3.1% LazyCompile: ~__require C:\git\jq.micarburante.website\dist\server\main.js:96895:49
1 100.0% LazyCompile: ~external/npm/node_modules/domino/lib/index.js C:\git\jq.micarburante.website\dist\server\main.js:113192:50
1 100.0% LazyCompile: ~__require C:\git\jq.micarburante.website\dist\server\main.js:96895:49
1 100.0% LazyCompile: ~97014 C:\git\jq.micarburante.website\dist\server\main.js:96848:8
1 3.1% LazyCompile: ~WritableState node:internal/streams/writable:77:23
1 100.0% LazyCompile: ~Writable node:internal/streams/writable:220:18
1 100.0% LazyCompile: ~Duplex node:internal/streams/duplex:54:16
1 100.0% LazyCompile: ~Socket node:net:329:16
1 3.1% LazyCompile: ~NavbarComponent_div_0_Template C:\git\jq.micarburante.website\dist\server\3405.js:177:40
1 100.0% Function: ^runInContext C:\git\jq.micarburante.website\dist\server\main.js:73733:15
1 100.0% Function: ^executeTemplate C:\git\jq.micarburante.website\dist\server\main.js:74015:25
1 100.0% Function: ^refreshView C:\git\jq.micarburante.website\dist\server\main.js:75443:21
1 3.1% LazyCompile: ~FilteredElementList C:\git\jq.micarburante.website\dist\server\main.js:98576:33
1 100.0% LazyCompile: ~getElementsByTagName C:\git\jq.micarburante.website\dist\server\main.js:100022:45
1 100.0% LazyCompile: ~find C:\git\jq.micarburante.website\dist\server\main.js:99515:25
1 100.0% LazyCompile: ~exports C:\git\jq.micarburante.website\dist\server\main.js:99539:41
1 3.1% LazyCompile: ~ C:\git\jq.micarburante.website\dist\server\main.js:72063:51
1 100.0% Function: ^runInInjectorProfilerContext C:\git\jq.micarburante.website\dist\server\main.js:63563:38
1 100.0% LazyCompile: ~hydrate C:\git\jq.micarburante.website\dist\server\main.js:72057:10
1 100.0% LazyCompile: ~get C:\git\jq.micarburante.website\dist\server\main.js:71907:6
1 3.1% Function: ^remove C:\git\jq.micarburante.website\dist\server\main.js:97470:24
1 100.0% Function: ^_remove C:\git\jq.micarburante.website\dist\server\main.js:99640:32
1 100.0% Function: ^remove C:\git\jq.micarburante.website\dist\server\main.js:99627:31
1 100.0% Function: ^removeChild C:\git\jq.micarburante.website\dist\server\main.js:97839:36
1 3.1% Function: ^getNodeInjectable C:\git\jq.micarburante.website\dist\server\main.js:67518:27
1 100.0% Function: ^instantiateAllDirectives C:\git\jq.micarburante.website\dist\server\main.js:74620:34
1 100.0% Function: ^createDirectivesInstances C:\git\jq.micarburante.website\dist\server\main.js:74070:35
1 100.0% Function: ^╔Á╔ÁelementStart C:\git\jq.micarburante.website\dist\server\main.js:78148:24
1 3.1% Function: ^executeOnDestroys C:\git\jq.micarburante.website\dist\server\main.js:69941:27
1 100.0% Function: ^cleanUpView C:\git\jq.micarburante.website\dist\server\main.js:69864:21
1 100.0% Function: ^destroyViewTree C:\git\jq.micarburante.website\dist\server\main.js:69685:25
1 100.0% LazyCompile: ~destroyLView C:\git\jq.micarburante.website\dist\server\main.js:69845:22
1 3.1% Function: ^adjustForeignAttributes C:\git\jq.micarburante.website\dist\server\main.js:107714:37
1 100.0% Function: ^in_body_mode C:\git\jq.micarburante.website\dist\server\main.js:111484:28
1 100.0% Function: ^insertToken2 C:\git\jq.micarburante.website\dist\server\main.js:108317:71
1 100.0% Function: ^emitTag C:\git\jq.micarburante.website\dist\server\main.js:108276:23
1 3.1% Function: ^Socket._writeGeneric node:net:891:42
1 100.0% LazyCompile: ~connect node:net:898:42
1 100.0% Function: ^onceWrapper node:events:622:21
1 100.0% Function: ^invokeTask C:\git\jq.micarburante.website\dist\server\main.js:44778:15
`
alan-agius4 commentedon Aug 31, 2023
The performance tab captures CPO profile by default as far as I recall. I am not quite sure on how can I interprit the above sent profiles as there is no timing information.
CarlosTorrecillas commentedon Aug 31, 2023
@alan-agius4 , I have tried again and did a "Performance" recording.
INLINE CRITICAL CSS FALSE
INLINE CRITICAL CSS TRUE
I have both profile files which I can send if needed via email.
Let me know if that is of any use.
alan-agius4 commentedon Aug 31, 2023
Please do send them via email or you can zip them and upload them here.
CarlosTorrecillas commentedon Aug 31, 2023
There you go.
profile_dev.zip
alan-agius4 commentedon Sep 1, 2023
Hi @CarlosTorrecillas,
Thanks for the profiles.
I checked the profiles and critical css inlining is actually pretty fast in your case considering the large amount of nodes the DOM has. In total it takes around 78ms to perform the CSS inlining. It starts at around 1580ms in the profile.
Summary
The increase in CWV, (Which again is not related to this issue), is likely due some styles not being properly extracted. There can be multiple reasons for this, the main once being;
Finding the cause of an Increased CLS, should be straight forward in this case with Chrome devtools. If indeed you find that the root cause is a bug please file a new issue with a minimal reproduction
Closing as it does not seem that we had further reports that critical css inlining is slow. If you do encounter an issue were critical css inlining process is slow, please file a new issue with a minimal reproduction or at the very least a CPU profile of the server during request handling.
hiepxanh commentedon Sep 1, 2023
if so, it will be better if critters of chromelabs have some warning or notice about this. anyway, I have inlineCriticalCss work as expect without problem. Mostly project fail on this because it have issue on DOM or CSS extract, I can confirm that
CarlosTorrecillas commentedon Sep 3, 2023
Thanks for the feedback. Definitely will look at that. I only wonder how do you guys know the CSS extractor has a bug? How can you see that? Are you talking about the actual PurgeCSS itself? If so, do you recommend another extractor that won’t have that issue?
in terms of the CLS process and overall CWV I won’t be loading in the browser the components to see the difference…I will to run the DevTools to see the CLS problem yet I could not see previously by looking at the timeline/charts with the code run…
hiepxanh commentedon Sep 3, 2023
mostly, css death because component render process is delay, check your settimeout + observable, document.[anything] which cause the system try to render and... hanging. Yes hard to debug, use binary check. Turn off half off your module. Then test, then test the half other, one by one.
Isolate your supicious page, check 404, about-us and anything simple page first, the one only render component and finish. If it work, it mean other have problem. Then one by one...
It will take your time, about few week, maybe few month. Just try to check with your debug devtool with nodejs.
Good luck sir. I know it is the hard way.
BTW, only check in morning after a cup of coffee and about few hours only. Or you will accident punch your screen because don't know why :)
if you want private join to check I can take a hand. Contact hiepxanh@gmail.com for more detail if you prefer my help.
angular-automatic-lock-bot commentedon Oct 4, 2023
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.