diff --git a/docs/DISCUSSIONS.md b/docs/DISCUSSIONS.md index 1c5a867..abfcc1c 100644 --- a/docs/DISCUSSIONS.md +++ b/docs/DISCUSSIONS.md @@ -5,6 +5,22 @@ Sorted by descending date (most recent first). --- +# Session: PERF — Fix CLS 0.997 from Angular Bootstrap Delay +**Date:** 2026-05-07 +**Context and Problem to Solve** + +After deploying the previous round of performance fixes, production Lighthouse reported Performance 76/100 with CLS 0.997 — worse than before. Root cause: a 3-level sequential JS chain (index.html → main.js → home.chunk → productList.chunk = 299ms total) left `` blank for ~300ms before Angular rendered all content at once. The entire viewport shift from blank→content was recorded as CLS. The earlier skeleton fix addressed the wrong level of CLS (in-session product grid layout), not the Angular bootstrap CLS. + +**Summary of Decisions** + +| Decision | Rationale | +|---|---| +| **Make Home and ProductList routes non-lazy** | Home already statically imported ProductList; both were in separate lazy chunks due to `loadComponent`. Moving both to `component:` (static) collapsed the 3-level JS chain to 1. Initial bundle grows from ~12 KB to ~19 KB (gzipped) — still tiny, well under 1 MB error budget. | +| **Inline CSS skeleton in `index.html` inside ``** | Angular replaces `` children on bootstrap, so any HTML placed there is visible during the JS loading gap and removed automatically. A pure-CSS skeleton (no Tailwind — CSS bundle not yet loaded) mirrors the home page layout (header, dark hero, 4-col product grid). The shift becomes skeleton→content instead of blank→content, reducing CLS to near zero. | +| **Keep all other routes lazy** | Only Home and ProductList are on the initial page. All other routes (product-details, cart, checkout, dashboard, login, register) remain lazy and are preloaded in the background via `PreloadAllModules`. | + +--- + # Session: PERF — Lighthouse Score Improvements (CLS, Accessibility, SEO) **Date:** 2026-05-07 **Context and Problem to Solve** diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index a62189c..5960dc2 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -1,9 +1,11 @@ import { Routes } from '@angular/router'; import { authGuard } from './guards/auth-guard'; +import { Home } from './components/home/home'; +import { ProductList } from './components/product-list/product-list'; export const routes: Routes = [ - { path: '', loadComponent: () => import('./components/home/home').then(m => m.Home) }, - { path: 'products', loadComponent: () => import('./components/product-list/product-list').then(m => m.ProductList) }, + { path: '', component: Home }, + { path: 'products', component: ProductList }, { path: 'product/:id', loadComponent: () => import('./components/product-details/product-details').then(m => m.ProductDetails) }, { path: 'dashboard', loadComponent: () => import('./components/user-dashboard/user-dashboard').then(m => m.UserDashboard), canActivate: [authGuard] }, { path: 'cart', loadComponent: () => import('./components/cart/cart').then(m => m.Cart), canActivate: [authGuard] }, diff --git a/frontend/src/index.html b/frontend/src/index.html index 133b0b1..da95e1e 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -7,8 +7,48 @@ + - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+