); } // CSS animation // .skeleton-* { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); animation: shimmer 1.5s infinite; } ``` - [ ] **Cẩn thận với Suspense fallback dimensions** > Fallback component phải có cùng kích thước xấp xỉ với actual content để tránh layout shift khi content load. ```jsx // ❌ Sai: Fallback quá nhỏ → CLS khi component load Loading...

}> {/* 800px height */} // ✅ Đúng: Fallback giữ nguyên không gian }> ``` - [ ] **Tránh inject HTML bằng JavaScript vào vị trí above-the-fold** > Nếu bắt buộc inject, dùng `position: absolute/fixed` hoặc inject vào container đã có reserved height. ### 🎭 Animations & Transitions - [ ] **Chỉ animate `transform` và `opacity` (composite properties)** > Animating `top`, `left`, `width`, `height`, `margin` → trigger layout recalculation → CLS. `transform` và `opacity` chạy trên GPU, không ảnh hưởng layout. ```css /* ❌ Gây layout thrashing */ .card:hover { margin-top: -10px; width: 110%; } /* ✅ GPU-accelerated, không ảnh hưởng layout */ .card:hover { transform: translateY(-10px) scale(1.05); } ``` - [ ] **Dùng `will-change: transform` cho elements sẽ animate** > Hint cho browser promote element lên composite layer trước. Không lạm dụng (tốn memory). Chỉ dùng khi animation thực sự xảy ra. ```css .animated-element { will-change: transform; /* Add before animation starts */ } /* Remove sau khi animation kết thúc */ ``` --- ## 4. Checklist Đo Lường > **Nguyên tắc:** Lab data (Lighthouse) để debug, Field data (CrUX) là ground truth cho ranking ### 🔬 Lighthouse CLI - [ ] **Cài đặt và cấu hình Lighthouse CLI** ```bash npm install -g lighthouse # Chạy audit cơ bản lighthouse https://yoursite.com --output html --output-path ./report.html ``` - [ ] **Chạy Lighthouse với throttling để simulate mobile** > Default Lighthouse đã simulate 4G/mid-tier mobile. Dùng `--preset=desktop` cho desktop testing. ```bash # Mobile (default) - quan trọng nhất cho CWV lighthouse https://yoursite.com \ --preset=perf \ --throttling-method=simulate \ --output json \ --output-path ./lh-report.json # Desktop lighthouse https://yoursite.com --preset=desktop # Multiple runs để lấy median lighthouse https://yoursite.com --runs=5 ``` - [ ] **Tích hợp Lighthouse vào CI/CD pipeline** > Dùng `lighthouse-ci` để fail build nếu score giảm. Set assertions cho từng metric. ```yaml # .github/workflows/lighthouse.yml - name: Run Lighthouse CI uses: treosh/lighthouse-ci-action@v10 with: urls: | https://yoursite.com https://yoursite.com/products budgetPath: ./lighthouse-budget.json uploadArtifacts: true ``` ```json // lighthouserc.json { "ci": { "assert": { "assertions": { "categories:performance": ["error", { "minScore": 0.8 }], "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }], "total-blocking-time": ["error", { "maxNumericValue": 200 }], "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }] } } } } ``` - [ ] **Phân tích Lighthouse treemap để tìm unused JavaScript** > Chạy `lighthouse --view` và xem "Unused JavaScript" section. Target: loại bỏ > 20KB unused JS. ```bash lighthouse https://yoursite.com --view # Mở DevTools → Coverage tab để xem unused code percentage ``` ### 📊 web-vitals Library - [ ] **Cài đặt và setup web-vitals library** ```bash npm install web-vitals ``` ```javascript // vitals.js - Collect tất cả CWV import { onLCP, onINP, onCLS, onFCP, onTTFB } from "web-vitals"; function sendToAnalytics({ name, value, rating, id, navigationType }) { const body = JSON.stringify({ name, value, rating, id, navigationType }); // Dùng sendBeacon để không block page unload if (navigator.sendBeacon) { navigator.sendBeacon("/analytics", body); } else { fetch("/analytics", { body, method: "POST", keepalive: true }); } } // Đo tất cả metrics onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics); onFCP(sendToAnalytics); // First Contentful Paint onTTFB(sendToAnalytics); // Time to First Byte ``` - [ ] **Gửi metrics lên Google Analytics 4 (GA4)** ```javascript import { onLCP, onINP, onCLS } from "web-vitals"; function sendToGA4({ name, value, rating, id }) { gtag("event", name, { value: Math.round(name === "CLS" ? value * 1000 : value), metric_id: id, metric_rating: rating, // 'good', 'needs-improvement', 'poor' non_interaction: true, }); } onLCP(sendToGA4, { reportAllChanges: false }); // Chỉ final value onINP(sendToGA4, { reportAllChanges: false }); onCLS(sendToGA4, { reportAllChanges: false }); ``` - [ ] **Setup custom dashboard với BigQuery + Looker Studio** > Export GA4 data sang BigQuery. Tạo Looker Studio dashboard. Query p75 theo URL, device, country. ```sql -- BigQuery query: CWV p75 by page SELECT page_location, APPROX_QUANTILES(lcp_value, 100)[OFFSET(75)] AS lcp_p75, APPROX_QUANTILES(inp_value, 100)[OFFSET(75)] AS inp_p75, APPROX_QUANTILES(cls_value, 100)[OFFSET(75)] AS cls_p75, COUNT(*) AS sample_size FROM your_cwv_table WHERE date >= DATE_SUB(CURRENT_DATE(), INTERVAL 28 DAY) GROUP BY page_location HAVING sample_size >= 100 ORDER BY lcp_p75 DESC; ``` - [ ] **Thêm attribution để debug INP interactions** ```javascript import { onINP } from "web-vitals/attribution"; onINP(({ name, value, attribution }) => { const { interactionTarget, interactionType, processingDuration } = attribution; console.log({ metric: name, value, element: interactionTarget, // CSS selector của element type: interactionType, // 'pointer', 'keyboard' processingTime: processingDuration, }); }); ``` ### 🔍 Google Search Console Setup - [ ] **Verify và kết nối Search Console với website** > Truy cập: search.google.com/search-console. Verify qua HTML tag, DNS record, hoặc Google Analytics. Verify cả www và non-www versions. - [ ] **Kiểm tra báo cáo Core Web Vitals trong Search Console** > Menu: **Search Console → Experience → Core Web Vitals**. Xem riêng Mobile và Desktop reports. Data dựa trên CrUX (real users, 28 ngày). Fix "Poor URLs" trước, sau đó "Needs Improvement". - [ ] **Kết nối Search Console với Google Analytics 4** > Settings → Property Settings → Search Console Links. Unlock "Landing page" report trong GA4 với organic search data. - [ ] **Validate fixes trong Search Console** > Sau khi fix issues, click "Validate Fix" button. Google sẽ re-crawl và re-evaluate. Quá trình mất 28+ ngày để CrUX data update. - [ ] **Setup CrUX API để query programmatically** ```javascript // CrUX API - Free, không cần auth cho public data async function getCrUXData(url) { const response = await fetch( "https://chromeuxreport.googleapis.com/v1/records:queryRecord" + `?key=${API_KEY}`, { method: "POST", body: JSON.stringify({ url, formFactor: "PHONE", metrics: [ "largest_contentful_paint", "interaction_to_next_paint", "cumulative_layout_shift", ], }), } ); return response.json(); } ``` - [ ] **Dùng PageSpeed Insights API cho automated monitoring** ```bash # Quick check via API curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed\ ?url=https://yoursite.com\ &strategy=mobile\ &key=YOUR_API_KEY" | jq '.loadingExperience.metrics' ``` - [ ] **Setup alerts khi CWV score giảm** > Dùng Google Search Console email notifications. Hoặc custom cron job gọi PSI API hàng ngày, alert khi score giảm > 10%. ```javascript // Cron job example (Node.js) const checkCWV = async () => { const data = await callPSIApi(url); const lcp = data.loadingExperience.metrics.LARGEST_CONTENTFUL_PAINT_MS; if (lcp.percentile > 2500) { await sendSlackAlert(`⚠️ LCP degraded: ${lcp.percentile}ms`); } }; // Chạy mỗi ngày lúc 9am cron.schedule("0 9 * * *", checkCWV); ``` --- ## 5. Thứ Tự Ưu Tiên > **Nguyên tắc:** Fix "Poor" trước, "Needs Improvement" sau. Mobile trước Desktop. > **Data-driven:** Ưu tiên pages có traffic cao nhất trong Search Console. ### 🚨 Priority 1 — Impact Cao, Effort Thấp (Làm Ngay) | # | Action | Metric | Effort | Impact | |---|--------|--------|--------|--------| | 1 | [ ] Thêm `width`/`height` cho tất cả `` tags | CLS | ⭐ Thấp | 🔥 Cao | | 2 | [ ] Chuyển LCP image sang WebP + `fetchpriority="high"` | LCP | ⭐ Thấp | 🔥 Cao | | 3 | [ ] Thêm `font-display: swap` cho web fonts | CLS | ⭐ Thấp | 🔥 Cao | | 4 | [ ] Bật server-side HTML caching | LCP/TTFB | ⭐ Thấp | 🔥 Cao | | 5 | [ ] Thêm `defer` cho non-critical scripts | LCP/INP | ⭐ Thấp | 🔥 Cao | | 6 | [ ] Reserve space cho ad slots (`min-height`) | CLS | ⭐ Thấp | 🔥 Cao | ### ⚠️ Priority 2 — Impact Cao, Effort Trung Bình (Sprint này) | # | Action | Metric | Effort | Impact | |---|--------|--------|--------|--------| | 7 | [ ] Implement `` cho LCP image | LCP | ⭐⭐ Vừa | 🔥 Cao | | 8 | [ ] Setup CDN với edge caching | LCP/TTFB | ⭐⭐ Vừa | 🔥 Cao | | 9 | [ ] Inline Critical CSS, defer non-critical | LCP | ⭐⭐ Vừa | 🔥 Cao | | 10 | [ ] Debounce/throttle expensive event handlers | INP | ⭐⭐ Vừa | 🔥 Cao | | 11 | [ ] Tích hợp web-vitals library + gửi về analytics | Đo lường | ⭐⭐ Vừa | 📊 Data | | 12 | [ ] Setup Lighthouse CI trong pipeline | Đo lường | ⭐⭐ Vừa | 📊 Data | ### 🔧 Priority 3 — Impact Trung Bình, Effort Cao (Backlog) | # | Action | Metric | Effort | Impact | |---|--------|--------|--------|--------| | 13 | [ ] Chuyển sang AVIF format | LCP | ⭐⭐⭐ Cao | 🔶 Vừa | | 14 | [ ] Implement Virtual Scrolling cho long lists | INP | ⭐⭐⭐ Cao | 🔶 Vừa | | 15 | [ ] Web Workers cho heavy computation | INP | ⭐⭐⭐ Cao | 🔶 Vừa | | 16 | [ ] Self-host fonts + size-adjust tuning | CLS | ⭐⭐⭐ Cao | 🔶 Vừa | | 17 | [ ] React.memo + useCallback audit toàn bộ app | INP | ⭐⭐⭐ Cao | 🔶 Vừa | | 18 | [ ] Tối ưu database queries + Redis caching | LCP/TTFB | ⭐⭐⭐ Cao | 🔶 Vừa | ### 📈 Priority 4 — Tối Ưu Nâng Cao (Long-term) | # | Action | Metric | Effort | Impact | |---|--------|--------|--------|--------| | 19 | [ ] HTTP/3 (QUIC) deployment | LCP | ⭐⭐⭐⭐ Rất cao | 🔷 Thấp-Vừa | | 20 | [ ] `scheduler.yield()` + `isInputPending()` | INP | ⭐⭐⭐⭐ Rất cao | 🔷 Thấp-Vừa | | 21 | [ ] BigQuery + Looker Studio CWV dashboard | Đo lường | ⭐⭐⭐⭐ Rất cao | 📊 Data | | 22 | [ ] CrUX API automated monitoring + alerts | Đo lường | ⭐⭐⭐⭐ Rất cao | 📊 Data | --- ### 🎯 Checklist Nhanh Theo Metric ``` LCP Quick Wins: [ ] WebP/AVIF conversion cho hero image [ ] fetchpriority="high" + preload [ ] Server cache (TTFB < 800ms) [ ] CDN deployment INP Quick Wins: [ ] Audit Long Tasks > 50ms [ ] Debounce search/input handlers [ ] defer/async tất cả scripts [ ] React.memo cho expensive components CLS Quick Wins: [ ] width + height mọi [ ] font-display: swap [ ] Ad slot reserved space [ ] Suspense fallback sizing ``` --- > **📌 Cập nhật định kỳ:** Kiểm tra CWV scores hàng tháng trong Search Console. > **🔗 Tài liệu tham khảo:** [web.dev/vitals](https://web.dev/vitals) | [CrUX Dashboard](https://lookerstudio.google.com/c/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be) | [web-vitals npm](https://github.com/GoogleChrome/web-vitals)