Skip to content

Commit 38a058d

Browse files
committed
Add configuration option to disable inlined CSS in SSR HTML
When inlining CSS, Angular Universal needs to extract critical styles. This seems to take up a significant chunk of processing time. However, loading may appear less smooth when this feature is disabled. Added to the configuration to make it easier to A/B test this without a full re-build.
1 parent ca86437 commit 38a058d

4 files changed

Lines changed: 14 additions & 2 deletions

File tree

server.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ export function app() {
116116
server.engine('html', (_, options, callback) =>
117117
ngExpressEngine({
118118
bootstrap: ServerAppModule,
119+
inlineCriticalCss: environment.universal.inlineCriticalCss,
119120
providers: [
120121
{
121122
provide: REQUEST,

src/config/universal-config.interface.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,13 @@ export interface UniversalConfig extends Config {
44
preboot: boolean;
55
async: boolean;
66
time: boolean;
7+
8+
/**
9+
* Whether to inline "critical" styles into the server-side rendered HTML.
10+
*
11+
* Determining which styles are critical is a relatively expensive operation;
12+
* this option can be disabled to boost server performance at the expense of
13+
* loading smoothness.
14+
*/
15+
inlineCriticalCss?;
716
}

src/environments/environment.production.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const environment: Partial<BuildConfig> = {
77
universal: {
88
preboot: true,
99
async: true,
10-
time: false
10+
time: false,
11+
inlineCriticalCss: true,
1112
}
1213
};

src/environments/environment.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ export const environment: Partial<BuildConfig> = {
1212
universal: {
1313
preboot: false,
1414
async: true,
15-
time: false
15+
time: false,
16+
inlineCriticalCss: true,
1617
}
1718
};
1819

0 commit comments

Comments
 (0)