https://github.com/push-based/angular-movies-audits
🕵️♀️ Performance audits and improvements in a real life application
https://github.com/push-based/angular-movies-audits
Last synced: about 2 months ago
JSON representation
🕵️♀️ Performance audits and improvements in a real life application
- Host: GitHub
- URL: https://github.com/push-based/angular-movies-audits
- Owner: push-based
- License: mit
- Created: 2022-04-22T15:36:31.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-24T13:36:30.000Z (about 4 years ago)
- Last Synced: 2025-12-30T08:57:10.165Z (5 months ago)
- Homepage:
- Size: 13.3 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Audit on Angular movies project to improve performance with `contain` and `content-visibility`
## TL;DR
PR: https://github.com/tastejs/angular-movies/pull/107
## Description
URL
**https://angular-movies-a12d3.web.app/**
**Desktop view:**
To start I just opened up the application and started browsing. I randomli clicked links and refreshed the page in multiple different stages.
What I am looking for is interactoins or load cases where one of the following is true:
- paint heavy on/offscreen content
- layout heavy parts of the page
- lot of offscreen content
- static content
- a page layout with fixed dimensions in some sections (header, footer, sidebar)
- animations/effects triggeres on UI interaction or loading spinner
I spotted some areas where i immediately could apply changes and test, but before I start I try to get a good understanding of the pages loading behaviour and see if there are any special things to consider.
It also helps me to structure the page into their layouting areas.
Let's start with the general bootstrapping and page rendering process.
The bage it self is in a really good state. the total rendering and paint togeather is under 200ms which is really fast, but still we can improve.
After the initial page render different HTTP requests bounce in and apply visual updates to the page. The sidemenu and the pages content is updating with remote content.
Those updates trgger all the paint work after the initial rendering.
A good first step would be to shield the different areas and their updates form other areas.
Here I identified 3 different main sreas:
- header
- sidebar
- content
## Improvements
### Sidebar
Lets start with the sidebar as it is the easier part.
A first step would be to apply `contain: strict` (`contain: layout paint size`) to the sidebar. I pick content as there are no visual overflows needed for userinteraction or so. At the end of this section I realized the whole sidebar is hidden on mobile but all the elements are rendered and layouted, so I added a `content-visibility: auto` here too.
```css
.side-drawer {
contain: strict;
content-visibility: auto;
}
```
Next I could also contain the scroll area and apply `content-visibility:auto` as it could improve potential offscreen menu elements.
I use a `contain-intrinsic-size` as i konw the item size `20px` and it will never change.
```css
.navigation {
contain:content;
}
a {
content-visibility: auto;
contain-intrinsic-size: 20px;
}
```
The biggest impact is on mobile for the sidebar, but also on desktop we have small improvements at bootstrap time.
The initial rendering of the sidebar if not nearly invisible and updates over all are slightly (but irrelevent) faster.
### Toolbar
The toolbar is the next small area we can focus on.
The interesting part here is the searchbox that has a animation on `width` focus. The first thing i did to isolate the animation was to set `contain:layout` on the toolbar area (I did not use `contain:content` includes `paint` as we have important visible overflow, the account menu).
```css
.ui-toolbar {
contain: layout;
}
There was a problem when i applied it, the stacking-index changed due to `contain:layout` and i had to apply z-index manually to fix the uverlap ov content area and the dropdown inside the toolbar area.
The form it self can get `contain:strict` to shield the focus style of the input.
```css
.form {
contain: strict;
}
```
As this showed only slight improvements I pushed the width animation into the composition layer with translatez and I applied will-chnage:width to optimize the animation furter.
```css
.form {
transform: translateZ(0px);
will-change: width;
}
```
With this change we get a nice improvement for the input interaction.
We can also have a look into the layers panel and we would see that the inputbox is now a new layer.
### Content area
As the content area is dynamic the content is from page to page different.
We will focus on the Main list and the detail view only to limit the scope of the audit.
#### Main List
The main list has 2 areas:
- Headline
- List
The headline is a good candidate for the `content` value as it can change it's height if the text changes.
Here we can use `contain:content`.
```css
header {
contain: content;
}
```
The list is a good cast for `content-visibility: auto` but also some containent is possible:
```css
ui-grid {
contain: layout;
}
```
```css/*
.ui-movie-list {
contain: content;
}
.ui-grid-list-item {
content-visibility: auto;
contain-intrinsic-size: 450px;
}
```
The desktop view got improved a little bit.
A really nice impact is visible for mobile.
#### Detail Page
The main list has 2 areas:
- Headline
- Movieinfos
- Cast list
- Reccomendaton list
The heading and the list already got improved in the list page.
The cast list is also of fixed height. here we can apply `strict`. As it has a fixed height and is not visible in mobile we can add `content-visibility:auto;` and contain its intrinsic size.
```css
.movie-detail--cast-list {
contain: strict;
content-visibility: auto;
contain-itrinsic-size: 50px;
}
```
We also can contain the layout of the reccommendatin section.
## Comparisom
# Resources
- [slides:](https://docs.google.com/presentation/d/1fMxIl1hL8WN2oUbQmnsUTci0LmOJaz3iKy0OjWq7Cvk/edit?usp=sharing)