Bạn đã biết đến Web-Vital ?😣

Web Vitals là gì và tại sao bạn nên quan tâm?

Là một lập trình viên, bạn đã từng nghe đến Web Vitals chưa?

Nếu chưa, đây là một bài viết ngắn gọn mà mình sẽ chia sẻ lại cho bạn trên vai trò là một lập trình viên Frontend có chút kiến thức về tối ưu hoá nhé.

Let’s go!

Web Vitals là gì?

Web Vitals là một tập hợp các chỉ số của ông kẹ Google dùng để đo lường trải nghiệm người dùng (UX) trên các trang web. Các chỉ số này được thiết kế để phản ánh các yếu tố quan trọng của trải nghiệm người dùng chẳng hạn như tốc độ tải trang, sự tương tác và tính ổn định của giao diện.

Việc tối ưu các chỉ số này trên trang web của bạn sẽ giúp cải thiện trải nghiệm người dùng và khả năng hiển thị trang web của bạn trên Google.

Các chỉ số trên Web Vitals sẽ giúp các lập trình viên, đặc biệt là các lập trình viên frontend, đánh giá hiệu suất trang web của mình và đảm bảo rằng nó đáp ứng nhu cầu về tốc độ và trải nghiệm người dùng mượt mà.

Các chỉ số nào là quan trọng?

1. Largest Contentful Paint (LCP)

Định nghĩa: Đây là chỉ số đo lường thời gian mà phần tử có nội dung lớn nhất trên trang web được tải và hiển thị cho người dùng.

Mục tiêu: Thời gian LCP nên dưới 2.5s.

Các cách làm giảm chỉ số LCP:

• Nén ảnh, nén video.
• Lazy loading cho các hình ảnh và tài nguyên không quan trọng.
• Tải các tài nguyên quan trọng (CSS, JS) ngay lập tức.
• Tránh các chuyển hướng trang không cần thiết.

2. First Input Delay (FID)

Định nghĩa: Đây là chỉ số đo lường độ trễ giữa việc người dùng lần đầu tiên tương tác (chẳng hạn như nhấp chuột hoặc ấn phím) và trang web phản hồi lại hành động đó.

Mục tiêu: Dưới 100ms.

Các cách làm giảm chỉ số FID:

• Chia nhỏ đoạn mã JS, tránh một hàm JS quá nặng làm chậm quá trình xử lý sự kiện.
• Sử dụng kỹ thuật defer hoặc async cho các script không quan trọng để làm giảm thời gian xử lý.
• Dùng Web Worker và tách các tác vụ nặng ra khỏi luồng chính để không làm chậm phản hồi của trang.

3. Cumulative Layout Shift (CLS)

Định nghĩa: CLS đo lường sự thay đổi vị trí các phần tử trên trang web trong quá trình tải. Nó phản ánh sự không ổn định bố cục của trang. Ví dụ khi người dùng nhấp chuột vào một phần tử và phần tử đó di chuyển đột ngột.

Mục tiêu: Điểm CLS nên dưới 0.1.

Các cách tối ưu:

• Đặt kích thước cho hình ảnh hoặc video.
• Áp dụng Skeleton Screens (màn hình xương sống) để giảm sự thay đổi bố cục khi trang tải.

Đo các chỉ số trên như thế nào?

Công cụ mình sử dụng chính để đo là DevTools trên tab Performance hoặc trên tab Lighthouse trong Google Chrome.

Tóm lại

Các chỉ số Web Vitals (LCP, FID, CLS) giúp bạn đánh giá chất lượng trải nghiệm người dùng và là yếu tố quan trọng trong SEO. Để đảm bảo trang web của bạn không chỉ nhanh mà còn mang lại trải nghiệm mượt mà cho người dùng, bạn cần liên tục tối ưu hóa các chỉ số này. Việc cải thiện LCP, FID và CLS sẽ giúp tăng cường khả năng tương tác của người dùng và nâng cao điểm số SEO của bạn, từ đó giúp website của bạn đạt hiệu suất tốt hơn và dễ dàng được Google xếp hạng cao hơn.