Core Web Vitals là gì? Cách cải thiện chúng cho trang website

Thời gian cần thiết: 5 phút

Để cải thiện Core Web Vitals cho trang web, bạn cần phải hiểu rõ từng phép đo của nó và các yếu tố ảnh hưởng đến chúng. Sau đây là một số cách cụ thể để bạn có thể áp dụng:

1. Cải thiện LCP

   LCP là chỉ số đo lường thời gian tải của nội dung lớn nhất trên màn hình khi người dùng truy cập trang web. Nội dung lớn nhất có thể là một ảnh, một video, một khối văn bản hay một phần tử khác. LCP ảnh hưởng đến ấn tượng đầu tiên của người dùng về trang web và cho biết mức độ hấp dẫn của nó.
   Theo Google, một trang web có LCP tốt nếu thời gian tải của nội dung lớn nhất dưới 2.5 giây. Nếu thời gian tải từ 2.5 đến 4 giây, trang web cần cải thiện. Nếu thời gian tải trên 4 giây, trang web kém và cần khắc phục ngay.
   Một số yếu tố ảnh hưởng đến LCP là:
   – Tốc độ máy chủ: máy chủ càng nhanh, thời gian phản hồi càng ngắn, nội dung càng được gửi đến trình duyệt nhanh hơn. Bạn có thể cải thiện tốc độ máy chủ bằng cách sử dụng một nhà cung cấp hosting uy tín, nâng cấp gói hosting, sử dụng một mạng phân phối nội dung (CDN) hay tối ưu hóa cơ sở dữ liệu.
   – Tài nguyên bị chặn: các tài nguyên như CSS, JavaScript hay font chữ có thể bị chặn khiến cho trình duyệt không thể hiển thị nội dung cho đến khi tải xong chúng. Bạn có thể giảm thiểu các tài nguyên bị chặn bằng cách loại bỏ hoặc hoãn tải những tài nguyên không cần thiết, nén và gộp các tài nguyên lại với nhau hay sử dụng kỹ thuật lazy loading cho các ảnh và video.
   – Kích thước và định dạng của hình ảnh: hình ảnh là một trong những yếu tố chiếm nhiều dung lượng và thời gian tải nhất trên trang web. Bạn có thể cải thiện hiệu suất của hình ảnh bằng cách chọn kích thước phù hợp với kích thước hiển thị, sử dụng định dạng hiệu quả như WebP hay JPEG 2000, nén hình ảnh để giảm dung lượng và sử dụng kỹ thuật responsive images để hiển thị hình ảnh khác nhau cho các thiết bị khác nhau.

2. Cải thiện FID

   FID là chỉ số đo lường thời gian phản hồi của trang web khi người dùng thực hiện hành động đầu tiên như nhấp vào nút, nhập liệu hay cuộn trang. FID ảnh hưởng đến khả năng tương tác của người dùng với trang web và cho biết mức độ linh hoạt của nó.
   Theo Google, một trang web có FID tốt nếu thời gian phản hồi dưới 100 mili giây. Nếu thời gian phản hồi từ 100 đến 300 mili giây, trang web cần cải thiện. Nếu thời gian phản hồi trên 300 mili giây, trang web kém và cần khắc phục ngay.
   Một số yếu tố ảnh hưởng đến FID là:
   – JavaScript là một ngôn ngữ lập trình phổ biến để tạo ra các tính năng động và tương tác cho trang web. Tuy nhiên, JavaScript cũng có thể làm chậm quá trình phản hồi của trang web nếu không được sử dụng đúng cách. Bạn có thể cải thiện hiệu suất của JavaScript bằng cách loại bỏ hoặc hoãn tải những mã JavaScript không cần thiết, chia nhỏ các mã JavaScript lớn thành các phần nhỏ hơn để trình duyệt có thể xử lý nhanh hơn, sử dụng kỹ thuật web worker để chạy các mã JavaScript nặng trên một luồng riêng biệt và sử dụng kỹ thuật code splitting để chỉ tải những mã JavaScript cần thiết cho từng trang.

3. Cải thiện CLS

   CLS là chỉ số đo lường sự thay đổi vị trí của các phần tử trên trang web khi nó tải xong, gây khó chịu cho người dùng. Ví dụ, khi bạn đang đọc một bài viết và bất ngờ một quảng cáo hay một ảnh xuất hiện ở giữa, làm cho văn bản bị dịch chuyển lên hoặc xuống. CLS ảnh hưởng đến sự ổn định của trang web và cho biết mức độ thoải mái của người dùng.
   Theo Google, một trang web có CLS tốt nếu điểm số dưới 0.1 cho 75% số lượt tải trang. Nếu điểm số từ 0.1 đến 0.25, trang web cần cải thiện. Nếu điểm số trên 0.25, trang web kém và cần khắc phục ngay.
   Một số yếu tố ảnh hưởng đến CLS là:
   – Kích thước và vị trí của hình ảnh: hình ảnh có thể gây ra sự thay đổi bố cục nếu không được xác định kích thước và vị trí rõ ràng trong mã HTML hoặc CSS. Bạn có thể cải thiện điều này bằng cách sử dụng thuộc tính width và height cho các thẻ img, sử dụng kỹ thuật aspect ratio box để giữ nguyên tỷ lệ của hình ảnh khi thay đổi kích thước và sử dụng kỹ thuật responsive images để hiển thị hình ảnh phù hợp với kích thước màn hình.
   – Kích thước và vị trí của quảng cáo: quảng cáo có thể gây ra sự thay đổi bố cục nếu không được xác định kích thước và vị trí rõ ràng trong mã HTML hoặc CSS. Bạn có thể cải thiện điều này bằng cách sử dụng kỹ thuật reserved space để dành ra một khoảng trống cố định cho quảng cáo, sử dụng kỹ thuật sticky ads để giữ quảng cáo luôn ở một vị trí nhất định khi cuộn trang và sử dụng kỹ thuật responsive ads để hiển thị quảng cáo phù hợp với kích thước màn hình.
   – Kích thước và vị trí của các phần tử động: các phần tử động như menu, nút, biểu mẫu hay video có thể gây ra sự thay đổi bố cục nếu không được xác định kích thước và vị trí rõ ràng trong mã HTML hoặc CSS. Bạn có thể cải thiện điều này bằng cách sử dụng kỹ thuật transform hoặc animation để thay đổi vị trí của các phần tử mà không ảnh hưởng đến bố cục, sử dụng kỹ thuật user-initiated để chỉ hiển thị các phần tử động khi người dùng yêu cầu và sử dụng kỹ thuật responsive design để hiển thị các phần tử động phù hợp với kích thước màn hình.