Hiệu năng
4 bài viết gắn thẻ #web-vitals trên DiCodeWeb, từ nền tảng đến production, mới nhất trước.
4 bàiCập nhật 14 thg 9, 2026
Cài Sentry mới là bước đầu. Bài này đi qua cách mình dựng frontend observability thật sự: lab và field data, thu RUM bằng web-vitals attribution, gửi beacon không mất, sampling, source map riêng tư, nhóm lỗi nhiễu, nối trace với backend qua traceparent, lọc PII, dashboard p75 và deploy marker.
Ba chỉ số Google dùng để đo trải nghiệm thật của người dùng — đo thế nào, được tính ra sao, vì sao ảnh hưởng SEO, và quy trình cụ thể để tìm đúng nguyên nhân rồi sửa.
Font ảnh hưởng LCP và CLS ra sao, chọn font-display thế nào, preload font quan trọng, subset với unicode-range cho tiếng Việt, variable font, tự host hay dùng CDN, chỉnh metric font fallback và next/font trong Next.js.
Chọn định dạng nào, srcset và sizes giúp trình duyệt chọn ảnh ra sao, khi nào lazy và khi nào eager, giữ chỗ để tránh CLS, CDN ảnh, art direction với picture và cách dùng next/image trong Next.js 16.