Styling

The categories component includes empty styles.scss file. This causes extra overhead in the build time and increases the bundle size.

Solution:

Remove the styles file and import in the component

Aligne UI and features with https://github.com/tastejs/next-movies

Optimize rendering, style recalculation and paint v1

To optimize style recalculation layout and paint we can apply the contain styling rule

TL;DR

Content section: from 513ms to 251 ms (262ms improvement)
Sidebar section: from 53ms to 32 ms (21ms improvement)
Toolbar section: marginal animation improvement

Total improvement 283ms

Movies section

When navigating to a movie list the whole document is rendered

<div _ngcontent-hub-movies-c24="" class="content">
 <!-- movie list -->
</div>

the stylings for the content section are:

.content[_ngcontent-hub-movies-c24] {
    min-height: calc(100vh - 72px);
    width: 100%;
}

Measures Before:

0 ms Scripting
415 ms Rendering
56 ms Painting
40 ms System
1 ms Idle
513 ms Total

To improve the render cost we can apply some styling rules.

.content[_ngcontent-hub-movies-c24] {
  ...
  contain: strict;
}

This scopes the area that gets rerendered to the div.

Measures After:

1 ms Scripting
232 ms Rendering
11 ms Painting
8 ms System
0 ms Idle
251 ms Total

The overall improvement is minus 262ms 😎

Side drawer

The side drawer gets an update of fetched menu items. These causes rerender of the whole page.

Again we apply contain: strict;.

<div class="side-drawer">
 <!-- menu items -->
</div>

Measures Before:

0 ms Scripting
3 ms System (self)
44 ms Rendering
6 ms Painting
0 ms Idle
53 ms Total

Measures After:

0 ms Scripting
25 ms Rendering
4 ms Painting
2 ms System
0 ms Idle
32 ms Total

The overall improvement is minus 31ms 🙂

Toolbar and input animation

This is a small one but the approach is the same.

Here we apply contain: strict; to the app-toolbar component:

<div _ngcontent-hub-movies-c24="" class="app-toolbar">
 <!-- header toolbar -->
</div>

Measures Before:

Measures After:

The impact is marginal but still fewer items processed.

Fix inconsistencies and bugs through rewrite

login logout state is not reflected in the menu
Movie hover styling misses gray background in the description area
login success shows infinite loading spinner
click on movie does not navigate to details page

Setup Lighthouse audits in CI

To have a way of measuring progress we need to set up continuous measures.

We use lighthouse-ci github action.

Todos:

Cache build artefacts from Build & Test action
setup lighthouse-ci action
save artefacts
serve panel

Image lazy code is slow

The popular page gets loaded and HTTP request updates the list.

The longest time is spent in the list rendering:

to be more specific in the initialisation time of the lazy image directive.

One obvious reason is the forces reflow visible at the end of the flames

Stats:
List rendering 412ms

Styling

The categories component includes empty styles.scss file. This causes extra overhead in the build time and increases the bundle size.

Solution:

Remove the styles file and import in the component

Organize for better bundling

To get smaller bundle sizes the Angular Module and lib structure need to get refactored.

Refactorings:

Refactored to SCAMs
Get rid of SharedMaterialModule and organize in SCAMs
Introduce app shell which only provides the minimum and the rest can be preloaded

Images

The avatar image has no dimensions set. This causes CLS and can be avoided by providing an aspect ratio to the IMG tag.
Furthermore, we can use native lazy loading to give the Browser time to process more important tasks.

  <img *ngIf="photoURL" src="{{photoURL}}" alt="profile">

Expected Impact:
The Browser can process more important tasks first. When the image gets rendered no CLS will occur.

Solution:

  <img *ngIf="photoURL" src="{{photoURL}}" alt="profile" loading="lazy" width="50" height="50">

Styling

In the account page the username is used to fill the image if no avatar is given. This value is used in the template.
The drawback here is Angular will need to reevaluate the template to apply the character to the DOM which is expensive.

I suggest moving the logic which adds a character to the DOM to JS only. In addition, I added a small enrichment for the case no avatar is given. I use the first letter of the username to derive a random color for the background of the avatar image to make it look a little nicer.

Expected Impact:
Both things are done by using CSS variables. In this way, we can avoid change detection.

Solution:

@Component({
  template: `
    <!-- Template not needed to accomplish style adoption -->
  `,
  styles: `
    :root {
      --avatarColor: #cccccc;
    }
   .avatar {
      background-color: var(--avatarColor);
   }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Component {
  change() {
    document.documentElement.style.setProperty('--avatarColor', '#cccccc');
  }
}

Third party libs

As dayjs is used only once to get the proper date format we can remove it and use vanilla JS.

Usage:

this.creationTime = dayjs(authData.metadata.creationTime).format('YYYY-MM-D');

Expected Impact:
Checking bundlephobia dayjs has a total of:

6.3kB MINIFIED
2.8kB MINIFIED + GZIPPED
Solution

Where I would question the format, in particular, the last single "D" as correct the value is never used anywhere so I would drop it completely.

State Management

At the moment the component maintains a subscription to the user data stream. This leads to cluttery code and usage of a lot of workarounds like the need for markForCheck.

A refactor to template-based subscription handling will reduce the code base and enable future performance optimizations with @rx-angular/template

Expected Impact:
We can reduce LOC, the number of injected services which will reduce bootstrap time and prepare for further render improvements.

Solution:
use the ngIf hack as the first quick win before introducing rx-angular.

routing and change detection (introduced helper service)
refactor async pipe to rxLet (or push pipe)
helper to check if we run zoneless or not

Before:

Bootstrap Time Before

Bundlesize Before

Bootstrap Time Before 425ms
Polyfills Before es5 132.32 KB, es2015 36.12 KB

After:

Bootstrap Time After

_Bundlesize After

_

Bootstrap Time After 66ms
Polyfills After es5 126 B

Implement global state to cache results

Introduce global state to cache results between routes.
Furthermore, it introduces a new layer so subscriptions are not owned by the components, but rather in a central place.