search

tastejs / angular-movies

A Angular Movies App Optimized for Performance
https://angular-movies-a12d3.web.app/list/category/popular
MIT License
373 stars 78 forks source link

fix(): define srcset in adapter #258

Closed Karnaukhov-kh closed 1 year ago

Karnaukhov-kh commented 1 year ago

When user navigates from lists to specific list movie.imgSrcset works as expected, but in case of reload it is empty and falls back to default x2,x3,x4.

Don't know the exact reason of the bug, but decent fix will be to have srcset property definied on adapter level since all images on the page should have same set.

github-actions[bot] commented 1 year ago

Cloudflare Worker Emulation

Date/Time: 2023-07-19 08:40

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
🧭 Initial navigation navigation 76 100 83 92 90
github-actions[bot] commented 1 year ago

Firebase Function Emulation

Date/Time: 2023-07-19 08:40

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
🧭 Initial navigation navigation 99 100 83 100 40
github-actions[bot] commented 1 year ago

Visit the preview URL for this PR (updated for commit 60db97d):

https://angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app

(expires Fri, 18 Aug 2023 08:40:23 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: f5e1819659ee450e0b7241d53391169f76c6f1d4

github-actions[bot] commented 1 year ago

Ng Universal Express - HTML is already rendered (SSR + Pre-render)

Date/Time: 2023-07-19 08:41

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
🧭 Initial navigation navigation 81 100 92 100 100
github-actions[bot] commented 1 year ago

Basic user flow to ensure basic functionality

Date/Time: 2023-07-19 08:42

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
🧭 Initial navigation navigation 🔒 96 100 92 92 100
✔ Initial navigation done snapshot Ø 3/4 17/17 5/5 9/9 -
🧭 Navigate to popular timespan 13/13 - 6/7 - -
✔ Navigation to popular done snapshot Ø 3/4 17/17 5/5 9/9 -
🧭 Navigate to detail page timespan 12/13 - 7/7 - -
✔ Navigation to detail done snapshot Ø 3/4 19/19 4/5 9/9 -
🔒 Budgets ### 🧭 Initial navigation **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 1.66 KB | - | | Image | 57.29 KB | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 105.71 KB | - | | Document | 21.22 KB | - | | Other | 0 Bytes | - | | Third-party | 57.29 KB | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 4 | - | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 0 | - | | Third-party | 4 | 4 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | First Contentful Paint | 1018 ms | - | | Speed Index | 1374 ms | - | | Largest Contentful Paint | 2325 ms | - | | Cumulative Layout Shift | 0.00 | - | | Total Blocking Time | 175 ms | - |

Initial Navigation of the Main Pages

Date/Time: 2023-07-19 08:43

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/category/popular) navigation 🔒 95 100 92 92 100
Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/category/top_rated) navigation 🔒 89 100 92 92 100
Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/category/upcoming) navigation 🔒 94 100 92 92 100
Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/genre/28) navigation 🔒 97 100 92 92 100
Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/detail/movie/594767) navigation 🔒 97 100 100 92 100
Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/detail/person/1023139) navigation 🔒 82 100 100 92 100
🔒 Budgets ### Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/category/popular) **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 1.66 KB | - | | Image | 57.3 KB | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 105.71 KB | - | | Document | 21.2 KB | - | | Other | 0 Bytes | - | | Third-party | 57.3 KB | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 4 | - | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 0 | - | | Third-party | 4 | 4 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | First Contentful Paint | 1043 ms | - | | Speed Index | 1306 ms | - | | Largest Contentful Paint | 2374 ms | - | | Cumulative Layout Shift | 0.00 | - | | Total Blocking Time | 188 ms | - | ### Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/category/top_rated) **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 0 Bytes | - | | Image | 0 Bytes | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 0 Bytes | - | | Document | 0 Bytes | - | | Other | 0 Bytes | - | | Third-party | 0 Bytes | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 7 | - | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 5 | 5 requests | | Third-party | 6 | 6 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | Total Blocking Time | 353 ms | 153 ms | | Cumulative Layout Shift | 0.11 | NaN | | First Contentful Paint | 824 ms | - | | Speed Index | 1187 ms | - | | Largest Contentful Paint | 2185 ms | - | ### Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/category/upcoming) **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 0 Bytes | - | | Image | 0 Bytes | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 0 Bytes | - | | Document | 0 Bytes | - | | Other | 0 Bytes | - | | Third-party | 0 Bytes | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 7 | - | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 5 | 5 requests | | Third-party | 6 | 6 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | Total Blocking Time | 297 ms | 97 ms | | First Contentful Paint | 118 ms | - | | Speed Index | 697 ms | - | | Largest Contentful Paint | 1235 ms | - | | Cumulative Layout Shift | 0.05 | - | ### Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/list/genre/28) **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 0 Bytes | - | | Image | 0 Bytes | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 0 Bytes | - | | Document | 0 Bytes | - | | Other | 0 Bytes | - | | Third-party | 0 Bytes | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 8 | - | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 6 | 6 requests | | Third-party | 6 | 6 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | First Contentful Paint | 104 ms | - | | Speed Index | 607 ms | - | | Largest Contentful Paint | 1267 ms | - | | Cumulative Layout Shift | 0.00 | - | | Total Blocking Time | 195 ms | - | ### Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/detail/movie/594767) **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 0 Bytes | - | | Image | 0 Bytes | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 0 Bytes | - | | Document | 0 Bytes | - | | Other | 0 Bytes | - | | Third-party | 0 Bytes | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 9 | 3 requests | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 12 | 12 requests | | Third-party | 5 | 5 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | First Contentful Paint | 133 ms | - | | Speed Index | 699 ms | - | | Largest Contentful Paint | 1614 ms | - | | Cumulative Layout Shift | 0.05 | - | | Total Blocking Time | 189 ms | - | ### Navigation report (angular-movies-a12d3--fix-src-sets-qppwbcoo.web.app/detail/person/1023139) **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 0 Bytes | - | | Image | 0 Bytes | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 0 Bytes | - | | Document | 0 Bytes | - | | Other | 0 Bytes | - | | Third-party | 0 Bytes | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 9 | 3 requests | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 9 | 9 requests | | Third-party | 6 | 6 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | Total Blocking Time | 218 ms | 18 ms | | Cumulative Layout Shift | 0.67 | NaN | | First Contentful Paint | 149 ms | - | | Speed Index | 742 ms | - | | Largest Contentful Paint | 1790 ms | - |

Login And Logout User Flow

Date/Time: 2023-07-19 08:41

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
🧭 Initial navigation navigation 🔒 94 100 92 92 100
✔ Initial navigation done snapshot Ø 3/4 17/17 5/5 9/9 -
🧭 Start Login timespan 18/26 - 5/7 - -
✔ Login Done snapshot Ø 3/4 17/17 5/5 9/9 -
🧭 Start Logout timespan 13/13 - 4/7 - -
✔ Logout Done snapshot Ø 2/4 17/17 4/5 9/9 -
🔒 Budgets ### 🧭 Initial navigation **Resource Size Budget** | Resource Type | Transfer Size | Over Budget | | :-----------: | :-----------: | :---------: | | Stylesheet | 1.66 KB | - | | Image | 57.14 KB | - | | Media | 0 Bytes | - | | Font | 0 Bytes | - | | Script | 105.71 KB | - | | Document | 21.2 KB | - | | Other | 0 Bytes | - | | Third-party | 57.14 KB | - | **Resource Count Budget** | Resource Type | Requests | Over Budget | | :-----------: | :------: | :---------: | | Stylesheet | 1 | - | | Image | 4 | - | | Media | 0 | - | | Font | 0 | - | | Script | 6 | 4 requests | | Document | 1 | - | | Other | 0 | - | | Third-party | 4 | 4 requests | **Timing Budget** | Metric | Measurement | Over Budget | | :----------------------: | :---------: | :---------: | | Total Blocking Time | 207 ms | 7 ms | | First Contentful Paint | 1156 ms | - | | Speed Index | 3844 ms | - | | Largest Contentful Paint | 1929 ms | - | | Cumulative Layout Shift | 0.00 | - |