Tối ưu Core Web Vitals: case study tăng PageSpeed từ 62 lên 96
Câu chuyện thực tế: chúng tôi đã đưa điểm PageSpeed mobile của một website e-commerce 12.000 SKU từ 62 lên 96/100, và conversion rate tăng 18% chỉ sau 4 tuần.
Bối cảnh: vì sao một website 12.000 SKU đột nhiên mất 28% conversion?
Tháng 11/2025, khách hàng — một thương hiệu điện tử Việt với hơn 12.000 SKU và doanh thu online 80 tỉ/năm — liên hệ chúng tôi sau khi báo cáo Google Analytics cho thấy tỉ lệ thoát mobile tăng 47%, conversion rate giảm 28% chỉ trong 6 tuần. Điều kỳ lạ: không có thay đổi lớn nào về sản phẩm, giá, hay chiến dịch ads.
Audit đầu tiên cho ra ba con số đau lòng: - LCP: 4.8s trên 4G (chuẩn Google: < 2.5s) - INP: 540ms (chuẩn: < 200ms) - CLS: 0.23 (chuẩn: < 0.1)
Thủ phạm không nằm ở sản phẩm — nằm ở thước đo. INP đã thay thế FID làm Core Web Vital chính thức từ tháng 3/2024, nhưng giống phần lớn website Việt, chỉ số này chưa từng được theo dõi: dashboard nội bộ của khách hàng vẫn báo "FID đạt chuẩn", trong khi dữ liệu CrUX mà Google thực sự dùng để xếp hạng đã ghi nhận INP trên 500ms suốt nhiều tháng. Website không đổi, nhưng tiêu chí đã đổi — và họ rớt khỏi nhóm "Good" đúng lúc đối thủ vừa tối ưu xong.
Nghiên cứu Google/SOASTA trên 900.000 landing page mobile: xác suất người dùng rời trang tăng 32% khi thời gian tải tăng từ 1 giây lên 3 giây. Tốc độ không phải chuyện kỹ thuật riêng của dev — nó là chỉ số kinh doanh.
Chiến lược: chia nhỏ thành 3 chiến dịch
Chiến dịch 1 — Hạ LCP từ 4.8s xuống dưới 2.5s
LCP (Largest Contentful Paint) đo thời gian phần tử lớn nhất (thường là hero image hoặc product image) hiển thị trên màn hình. Trên trang chi tiết sản phẩm, LCP element là ảnh sản phẩm chính.
Vấn đề phát hiện:
- Ảnh sản phẩm dùng format PNG, trung bình 850KB/ảnh.
- Font Be Vietnam Pro load qua @import trong CSS (waterfall chậm).
- Critical CSS không inline, render-blocking 1.2s.
- Hero image không có fetchpriority="high".
fetchpriority="high" cho LCP image, loading="eager".
5. Dùng element với responsive srcset.
Kết quả: LCP từ 4.8s → 1.9s trên 4G.
Chiến dịch 2 — Hạ INP từ 540ms về dưới 200ms
INP (Interaction to Next Paint) đo thời gian từ khi user tương tác (click, type, tap) đến khi browser vẽ frame tiếp theo. Trên trang danh sách 12.000 SKU, mỗi lần user filter là frontend re-render 200+ card → main thread block.
Cách fix:
1. Code split theo route với React.lazy + Suspense — giảm initial bundle từ 480KB xuống 145KB.
2. Debounce search input 250ms, dùng useDeferredValue cho danh sách lớn.
3. Chuyển logic sort/filter sang Web Worker — main thread không bị block khi user filter.
4. Virtual scrolling với @tanstack/react-virtual — chỉ render 20 card hiển thị trong viewport.
5. Loại bỏ 3 third-party script (chat widget, analytics cũ) — tiết kiệm 180ms blocking.
Kết quả: INP từ 540ms → 88ms.
Chiến dịch 3 — Hạ CLS từ 0.23 về gần 0
CLS (Cumulative Layout Shift) đo mức độ "nhảy" layout khi trang load. Nguyên nhân chính: ảnh, banner, ad không khai báo kích thước trước.
Cách fix:
1. Khai báo width và height (hoặc aspect-ratio) cho mọi container ảnh, banner, video.
2. Reserve space cho banner ads bằng min-height.
3. Font fallback có size-adjust để khớp metric với webfont — tránh FOUT shift.
4. Chuyển modal/popup từ "push content xuống" sang overlay tuyệt đối.
5. Sticky header có height cố định.
Kết quả: CLS từ 0.23 → 0.03.
Bảng tổng kết trước/sau
| Chỉ số | Trước | Sau | Cải thiện |
|---|---|---|---|
| LCP (mobile) | 4.8s | 1.9s | -60% |
| INP | 540ms | 88ms | -84% |
| CLS | 0.23 | 0.03 | -87% |
| PageSpeed score | 62 | 96 | +55% |
| Bounce rate mobile | 71% | 49% | -31% |
| Conversion rate | 1.8% | 2.4% | +33% |
| Doanh thu/tháng | Baseline | +18% | — |
Bài học cho doanh nghiệp khác
- Performance là chỉ số kinh doanh, không phải vấn đề kỹ thuật riêng. Khi ROAS giảm, hỏi đội dev xem PageSpeed có thay đổi không.
- Lighthouse CI trong pipeline là phòng tuyến cuối — fail build nếu vi phạm ngưỡng.
- Đo trên thiết bị thật, không chỉ Lighthouse Lab. CrUX và Real User Monitoring (RUM) qua
web-vitalslibrary mới phản ánh đúng trải nghiệm. - Refactor từng phase, không "đại tu một lần". Mỗi sprint fix 1 chỉ số, đo lường, rồi mới qua chỉ số tiếp theo.
Kết luận
Tăng PageSpeed từ 62 lên 96 không phải phép màu — đó là quy trình kỹ thuật có thể lặp lại. Trong 4 tuần đầu tiên doanh nghiệp thường thấy bounce rate giảm và session duration tăng. Tăng trưởng conversion và doanh thu sẽ đến trong tháng thứ 2–3 khi Google index lại và đẩy thứ hạng.
Nếu website của bạn đang trong vùng "Needs Improvement", hãy bắt đầu bằng audit miễn phí. Đọc thêm checklist SEO on-page 2026 hoặc xem dịch vụ SEO & tối ưu hiệu năng của DebugMyApp.
Sẵn sàng nâng cấp Website & hệ thống cùng DebugMyApp?
Đặt lịch tư vấn miễn phí — nhận báo giá chi tiết và roadmap triển khai trong 24 giờ.
