Web Vitals là chuyện của Frontend? Backend liệu có vai trò gì?

Công nghệ - 13/03/2025 04:00:00

Nhiều người nghĩ Web Vitals chỉ là chuyện của frontend, nhưng backend mới là "người giấu mặt" ảnh hưởng trực tiếp đến LCP, INP! TTFB, độ trễ API, 103 Early Hints… nghe quen không? Khám phá ngay những bí mật ít ai nhắc đến!

🚀LCP và INP không chỉ là bài toán frontend. Backend tác động lớn qua TTFB, caching, database query optimization.

🎯CLS vẫn chủ yếu là frontend game, nhưng backend có thể hỗ trợ bằng SSR và preloading.

💡Fethpriority và 103 Early Hints từ backend giúp cải thiện LCP – chiêu thức ít ai nhắc đến.

🎯Tác động Web Vitals tới kinh doanh

Cải thiện Web Vitals không chỉ nâng cao trải nghiệm người dùng mà còn có tác động kinh doanh rõ ràng:

Cdiscount cải thiện cả 3 chỉ số, góp phần tăng 6% doanh thu trong đợt giảm giá Black Friday.
Wix tăng số lượng trang web trên di động đạt chuẩn Core Web Vitals lên hơn 250% so với năm trước.
Nykaa nhận thấy rằng cải thiện 40% chỉ số LCP giúp tăng 28% lượng truy cập tự nhiên từ các thành phố hạng T2/T3.
Agrofy Market cải thiện 70% chỉ số LCP, giúp giảm 76% tỷ lệ người dùng rời khỏi trang do tải chậm.
AliExpress cải thiện chỉ số CLS gấp 10 lần và LCP gấp đôi, giúp giảm 15% tỷ lệ thoát trang.

và còn nhiều ví dụ khác nữa

Nguồn (web.dev)

🎯 Web Vitals là gì và tại sao Backend cần quan tâm?

Web Vitals, sáng kiến của Google từ năm 2020, đo lường trải nghiệm người dùng qua ba chỉ số cốt lõi:

✅ LCP (Largest Contentful Paint):Mốc thời gian nội dung chính tải xong (≤ 2.5s).

✅ INP (Interaction to Next Paint):Phản hồi khi người dùng tương tác (≤ 200ms).

✅ CLS (Cumulative Layout Shift): Độ ổn định bố cục (≤ 0.1).

Những Key Points để BE hỗ trợ FE tối ưu Web Vitals:

- Backend ảnh hưởng lớn đến LCP qua TTFB và INP qua tốc độ API, nhưng cần phối hợp với frontend để giảm CLS.
- Các kỹ thuật mới cho 2025, như Speculation Rules API và HTTP/3, có thể cải thiện LCP và INP đáng kể từ phía backend.

Cải thiện Web Vitals không chỉ nâng cao trải nghiệm người dùng mà còn tăng tỷ lệ chuyển đổi, như "giảm LCP 1 giây tăng chuyển đổi 7%" (nguồn web.dev).

🎯 Các bước tối ưu hóa Web Vitals và Backend tối ưu Web Vitals như thế nào?

Bước 1: Đo lường và phân tích hiện trạng

Công cụ: Sử dụng PageSpeed Insights (PageSpeed Insights) và web-vitals library (GitHub) để đo LCP, INP, CLS.
Hành động từ backend: Kiểm tra TTFB trong Chrome DevTools (Network tab) và tốc độ API trong các yêu cầu tương tác (INP).
Ví dụ thực tế: Shopify báo cáo LCP trung bình 3,2 giây, với TTFB chiếm 40% (Shopify Engineering Blog).

Bước 2: Tối ưu hóa LCP từ backend

LCP phụ thuộc vào TTFB và tốc độ tải tài nguyên quan trọng. Backend có thể hỗ trợ frontend qua:

Giảm TTFB: Sử dụng HTTP/3 để giảm độ trễ, như được đề cập trong Nitropack. Bật 103 Early Hints trên Cloudflare để gửi gợi ý tài nguyên trước phản hồi đầy đủ, giảm thời gian tải LCP. Ví dụ: Cloudflare báo cáo 103 Early Hints giảm LCP 30% (Cloudflare Blog).
Server-Side Rendering (SSR): Sử dụng SSR để tạo HTML đã render đầy đủ, giảm thời gian tải nội dung chính. Ví dụ: Next.js với SSR giảm LCP từ 4 giây xuống 2,1 giây (Vercel Case Study).
Fetchpriority: Đặt thuộc tính fetchpriority="high" trong HTML cho hình ảnh LCP từ backend, ưu tiên tải sớm hơn. Ví dụ: Google áp dụng fetchpriority giảm LCP từ 3 giây xuống 2,4 giây (web.dev).

Bước 3: Hỗ trợ INP từ backend

INP đo lường thời gian phản hồi tương tác, thường bị ảnh hưởng bởi JavaScript nặng và API chậm. Backend có thể hỗ trợ:

Tối ưu hóa API: Sử dụng bộ nhớ cache (Redis, Memcached) cho dữ liệu truy cập thường xuyên, giảm thời gian phản hồi API. Ví dụ: Airbnb giảm thời gian API từ 500ms xuống 150ms, cải thiện INP (Airbnb Engineering Blog).
Xử lý bất đồng bộ: Chuyển các tác vụ nặng sang hàng đợi (RabbitMQ, SQS) để không chặn luồng chính. Ví dụ: Etsy áp dụng xử lý bất đồng bộ, giảm INP từ 300ms xuống 180ms (Etsy Engineering Blog).
Hỗ trợ bfcache: Đảm bảo backend không gửi header no-cache, cho phép trình duyệt sử dụng bfcache, cải thiện INP khi quay lại trang. Ví dụ: Google báo cáo bfcache giảm INP 20% (web.dev).

Bước 4: Hỗ trợ giảm CLS từ backend

CLS phụ thuộc vào frontend, nhưng backend có thể hỗ trợ:

Cung cấp kích thước hình ảnh từ API: Đảm bảo API trả về chiều rộng và chiều cao hình ảnh, giúp frontend đặt không gian dự trữ chính xác. Ví dụ: Instant Domain Search giảm CLS từ 0,23 xuống 0,08 bằng cách thêm kích thước hình ảnh từ API (Smashing Magazine).
Tối ưu hóa quảng cáo: Nếu quảng cáo được phục vụ từ backend, đảm bảo chúng có kích thước cố định và không chèn động. Ví dụ: The Guardian giảm CLS từ 0,15 xuống 0,05 bằng cách cố định quảng cáo (The Guardian Engineering Blog).

Bước 5: Tối ưu hóa hạ tầng

Hạ tầng ảnh hưởng đến tất cả chỉ số Web Vitals. Backend có thể hỗ trợ:

Sử dụng CDN: Cấu hình CDN (Cloudflare, Akamai) để bỏ qua UTM parameters, cải thiện caching. Ví dụ: Shopify áp dụng CDN, giảm TTFB từ 800ms xuống 300ms (Shopify Engineering Blog).
HTTP/3 và QUIC: Bật HTTP/3 trên máy chủ để giảm độ trễ, cải thiện LCP và INP. Ví dụ: Cloudflare báo cáo HTTP/3 giảm độ trễ 15% (Cloudflare Blog).

Tối ưu hóa hiệu suất backend là cần thiết, nhưng bài toán hiệu suất là toàn diện, đòi hỏi sự phối hợp giữa backend, frontend, và hạ tầng. Là nhà phát triển backend, tôi nhận thấy các kỹ thuật như 103 Early Hints, fetchpriority, và HTTP/3 có thể hỗ trợ frontend cải thiện LCP và INP đáng kể. Hãy sử dụng các công cụ như PageSpeed Insights (PageSpeed Insights) để đo lường, triển khai các bước trên, và hợp tác với đội frontend để đạt trải nghiệm người dùng tốt nhất, đồng thời tăng hiệu quả kinh doanh.

Nguồn tham khảo: