Skip to content

Commit

Permalink
Add configuration option to disable inlined CSS in SSR HTML
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
ybnd committed Feb 1, 2023
1 parent ca86437 commit 38a058d
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 2 deletions.
1 change: 1 addition & 0 deletions server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export function app() {
server.engine('html', (_, options, callback) =>
ngExpressEngine({
bootstrap: ServerAppModule,
inlineCriticalCss: environment.universal.inlineCriticalCss,
providers: [
{
provide: REQUEST,
Expand Down
9 changes: 9 additions & 0 deletions src/config/universal-config.interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,13 @@ export interface UniversalConfig extends Config {
preboot: boolean;
async: boolean;
time: boolean;

/**
* Whether to inline "critical" styles into the server-side rendered HTML.
*
* Determining which styles are critical is a relatively expensive operation;
* this option can be disabled to boost server performance at the expense of
* loading smoothness.
*/
inlineCriticalCss?;
}
3 changes: 2 additions & 1 deletion src/environments/environment.production.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const environment: Partial<BuildConfig> = {
universal: {
preboot: true,
async: true,
time: false
time: false,
inlineCriticalCss: true,
}
};
3 changes: 2 additions & 1 deletion src/environments/environment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export const environment: Partial<BuildConfig> = {
universal: {
preboot: false,
async: true,
time: false
time: false,
inlineCriticalCss: true,
}
};

Expand Down

0 comments on commit 38a058d

Please sign in to comment.