Development: Resolve css selector warning on prod build

[JohannesWt]

Checklist

General

• This is a small issue that I tested locally and was confirmed by another developer on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• I strictly followed the client coding and design guidelines.

Motivation and Context

When running npm run webapp:prod the following warning appeared:

Description

By changing the optimisation inlineCrictical to false in the angular.json file the warning is resolved. But it should be noted that this warning is a known issue in Angular 17 and should be resolved in the future. See the following GitHub (external) issues #4306 & #153

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

unchanged

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

[Strohgelaender]

What exactly does this option regulate? I don't think we should turn off some optimization just to silence a warning message.

[JohannesWt]

What exactly does this option regulate? I don't think we should turn off some optimization just to silence a warning message.

I investigated this issue on @krusche's behalf. What the optimisation does is explained well here css-inlining
But independent of the issue there are also voices against this optimisation in general. E.g. Disable Inline critical CSS

@Strohgelaender what is your view on that?

[krusche]

Let's test how the First Contentful Paint changes when setting inlineCritical to false.
We should also investigate how much css is actually inlined and whether we can remove unsafe-inline from the SecurityConfiguration without getting any other issues. Then, we can decide better how we want to move forward with this change

[krusche]

A quick test on production shows that the index.html is 8.5kB large and takes 48ms to load from the server. It includes around 680 lines of inline CSS, mostly colors, but also a few other styles

[JohannesWt]

A quick test on production shows that the index.html is 8.5kB large and takes 48ms to load from the server. It includes around 680 lines of inline CSS, mostly colors, but also a few other styles

Testing it with inline-critical=true and inline-critical=false we get the following results for FCP, DC time and total time

	First Contentful Paint	Document complete time	Total time
Run 1 (inline=true)	3.067 s	3.340 s	3.597 s
Run 2 (inline=true)	3.101 s	3.376 s	5.197 s
Run 3 (inline=true)	3.085 s	3.463 s	3.656 s
Run 1 (inline=false)	3.068 s	3.433 s	3.433 s
Run 2 (inline=false)	3.085 s	3.395 s	3.395 s
Run 3 (inline=false)	3.135 s	3.398 s	3.398 s

We also get the following further results for HTML and CSS download size and times:

inline=true

HTML bytes	7.7 kB
HTML time	15 ms
CSS bytes	63.8 KB
CSS time	659 ms

inline=false

HTML bytes	1.7 KB
HTML time	2 ms
CSS bytes	63.8 KB
CSS time	162 ms