Core Web Vitals là gì? Cách cải thiện chỉ số LCP, FID, CLS đầy đủ

Ngoài backlink, content, trong quá trình triển khai dịch vụ SEO tại Leading.vn, chúng tôi cũng chú ý rất nhiều đến trải nghiệm trên website. Trong năm 2020 Google cũng đã triển khai một bộ tín hiệu xếp hạng mới được gọi là Core Web Vitals. Và Google cũng đã xác nhận tín hiệu này sẽ chính thức đi vào hoạt động vào tháng 5 năm 2021 và là một phần của thuật toán cốt lõi để đánh giá tín hiệu “trải nghiệm trang” của người dùng.

Những tín hiệu này sẽ đo và tính toán tốc độ tải trang, khả năng phản hồi và độ ổn định trực quan của trang web.

Trong hướng dẫn này, tôi sẽ giải thích Core Web Vitals là gì và giúp bạn tìm ra cách nó có thể ảnh hưởng đến thứ hạng của bạn.

Core Web Vitals là gì?

Core Web Vitals là một tập hợp các yếu tố cụ thể mà Google coi là quan trọng trong trải nghiệm người dùng tổng thể của trang web. Core Web Vitals được tạo thành từ ba phép đo tốc độ trang cụ thể và tương tác của người dùng: largest contentful paint, first input delay và cumulative layout shift.

Nói tóm lại, Core Web Vitals là một tập hợp con các yếu tố góp phần vào cách tính điểm “trải nghiệm trang” của Google (về cơ bản, đây là cách Google xác định mức độ trải nghiệm người dùng UX trên trang của bạn).

Core Web Vitals là một phần trong đánh giá tổng thể của Google về “trải nghiệm trang”.

Bạn có thể tìm thấy dữ liệu Core Web Vitals trên trang web của mình trong phần “enhancements” của tài khoản Google Search Console.

Tại sao Core Web Vitals lại quan trọng?

Google có kế hoạch biến trải nghiệm trang trở thành một yếu tố xếp hạng chính thức.

Trải nghiệm trang sẽ là một tập hợp các yếu tố mà Google cho là quan trọng đối với trải nghiệm người dùng, bao gồm:

• HTTPS
• Tính thân thiện với thiết bị di động
• Hạn chế các pop-up bật lên xen kẽ
• “Duyệt web an toàn” (về cơ bản, không có phần mềm độc hại trên trang của bạn )

Và Core Web Vitals sẽ là một phần siêu quan trọng của điểm số đó.

Thật công bằng khi nói rằng các quan điểm web cốt lõi sẽ chiếm phần lớn nhất trong điểm số trải nghiệm trang của bạn.

Điều quan trọng là chỉ ra rằng điểm trải nghiệm trang tuyệt vời sẽ không đưa bạn lên vị trí số 1 trong Google một cách kỳ diệu. Nhưng trên thực tế, Google đã nhanh chóng chỉ ra rằng trải nghiệm trang là một trong số (khoảng 200) yếu tố mà họ sử dụng để xếp hạng các trang web trong tìm kiếm.

Điều đó nói rằng, không cần phải lo lắng. Google cho biết bạn phải cải thiện điểm số Core Web Vital của trang web cho đến tháng 5 2021.

Google thay đổi xếp hạng vào năm tới

Nhưng nếu bạn muốn cải thiện điểm Core Web Vitals của mình trước đó, thì thật tuyệt.

Bởi vì trong hướng dẫn này, tôi sẽ chia nhỏ 3 chỉ số bạn cần tối ưu cho Core Web Vitals và chỉ cho bạn cách cải thiện từng thứ đó.

Cách tối ưu LCP, FIS CLS trong Core Web Vitals

Hiện tại, ba yếu tố chính của Core Web Vitals là:

Hiệu suất tải (nội dung hiển thị trên màn hình) nhanh như thế nào

Khả năng đáp ứng (trang phản ứng nhanh như thế nào với thông tin nhập của người dùng)

Tính ổn định về hình ảnh (mọi thứ có di chuyển xung quanh trên màn hình trong khi tải)

Để đo lường các khía cạnh thiết yếu này của trải nghiệm người dùng, Google đã chọn ba chỉ số tương ứng – còn gọi là Core Web Vitals:

• LCP, Thời gian tải nội dung lớn nhất: Chỉ số này đo thời gian để phần nội dung lớn nhất xuất hiện trên màn hình. Đây có thể là một hình ảnh hoặc một khối văn bản. Điểm tốt cho người dùng cảm giác rằng trang web tải nhanh. Một trang web hiển thị nội dung chậm có thể gây khó chịu cho người dùng.
• FIS, hoặc Độ trễ đầu vào đầu tiên: Điều này đo lường thời gian để trang web phản ứng với tương tác đầu tiên. Ví dụ, đây có thể là một lần nhấn vào một nút. Điểm tốt ở đây cho người dùng cảm giác rằng một trang web phản ứng nhanh với thông tin đầu vào và đáp ứng nhanh các nhu cầu sử dụng của người dùng.
• CLS, hoặc Dịch chuyển bố cục tích lũy: Điều này đo lường sự ổn định trực quan của trang web của bạn. Nói cách khác, mọi thứ có di chuyển xung quanh màn hình khi đang tải không và điều đó có thường xuyên xảy ra không? Không có gì khó chịu hơn việc bạn nhấp vào một nút trên web nhưng chỗ đó lại xuất hiện một cái quảng cáo và việc nhấp vào quảng cáo đó không phải là chủ đích của bạn.

Largest Contentful Paint (LCP) là gì?

LCP là khoảng thời gian một trang để tải theo quan điểm của người dùng thực tế.

Nói cách khác: đó là thời gian từ việc nhấp vào một liên kết đến khi phần lớn nội dung xuất hiện trên màn hình.

LCP khác với các phép đo tốc độ trang khác. Nhiều chỉ số tốc độ trang khác như TTFB và First Contextual Paint không phải yếu tố tốt nhất để thể hiện cho việc người dùng mở một trang web như thế nào.

Mặt khác, LCP tập trung vào những gì thực sự quan trọng khi nói đến tốc độ trang: khả năng xem và tương tác với trang của bạn.

Bạn có thể kiểm tra điểm LCP của mình bằng Google PageSpeed Insights.

Điểm LCP Rất hữu ích. Đặc biệt là khi nói đến các khu vực cần cải thiện. Điều thú vị khi sử dụng Google Pagespeed Insights so một công cụ kiểm tra tốc độ trang khác như webpagetest.org là bạn có thể xem trang của mình hoạt động như thế nào trong thế giới thực (dựa trên dữ liệu trình duyệt Chrome).

Điều này nói rằng, tôi khuyên bạn nên xem dữ liệu LCP của mình trong GSC.

Tại sao?

Cũng giống như Google PageSpeed Insights, dữ liệu trong Search Console đến từ Báo cáo trải nghiệm người dùng Chrome.

Nhưng không giống như PageSpeed Insights, bạn có thể xem dữ liệu LCP trên toàn bộ trang web của mình. Vì vậy, thay vì phân tích từng trang ngẫu nhiên, bạn sẽ có được danh sách các URL tốt, xấu… hoặc ở đâu đó ở trung bình.

Nói đến, Google có các nguyên tắc LCP cụ thể. Họ chia tốc độ LCP thành ba nhóm: Tốt, Cần cải thiện và Kém.

Tóm lại, bạn sẽ muốn mọi trang trên trang web của mình đạt LCP trong vòng 2,5 giây.

Đây có thể là một thách thức thực sự đối với các trang web lớn. Hoặc các trang có nhiều tính năng.

Ví dụ: trang này từ trang web này có hàng chục hình ảnh độ phân giải cao.

Đó là lý do tại sao LCP trên trang đó là 5,1 giây (được coi là “kém”).

Nó cho thấy rằng cải thiện LCP không đơn giản như cài đặt một CDN. Trong trường hợp này, họ có thể phải thực sự xóa một số hình ảnh khỏi trang. Và làm gọn lại source code của mình.

Cùng với đó, đây là một số điều bạn có thể làm để cải thiện LCP của trang web của mình:

• Xóa mọi scripts của bên thứ ba không cần thiết: nghiên cứu tốc độ trang gần đây của chúng tôi cho thấy mỗi tập lệnh của bên thứ ba làm chậm một trang 34 mili giây.
• Nâng cấp máy chủ lưu trữ web của bạn: Lưu trữ tốt hơn = tổng thời gian tải nhanh hơn (bao gồm cả LCP).
• Thiết lập tải chậm: Thiết lập Lazy load giúp hình ảnh chỉ tải khi ai đó cuộn xuống trang của bạn. Có nghĩa là bạn có thể đạt được LCP nhanh hơn đáng kể.
• Loại bỏ các phần tử lớn của trang: Google PageSpeed Insights sẽ cho bạn biết liệu trang của bạn có phần tử làm chậm LCP của trang hay không.

• Nén file CSS của bạn: CSS cồng kềnh có thể trì hoãn đáng kể thời gian LCP.

First Input Delay (FID) là gì?

Tiếp theo, chúng ta hãy xem xét Core Web Vital thứ hai của Google: Độ trễ đầu vào đầu tiên.

Như vậy tại thời điểm này, trang của bạn đã đạt được FCP. Nhưng câu hỏi đặt ra là: người dùng có thể tương tác với trang của bạn không?

Đó chính xác là những gì FID đo lường: thời gian người dùng thực sự tương tác với trang của bạn.

Ví dụ về các tương tác bao gồm:

• Chọn một tùy chọn từ menu
• Nhấp vào liên kết trong điều hướng của trang web
• Nhập email của bạn vào một trường
• Mở “văn bản accordion” trên thiết bị di động

Google coi FID là quan trọng vì nó tính đến cách người dùng thực tế tương tác với các trang web.

Và giống như FCP, Google có các tiêu chí đánh giá cụ thể về những gì tạo thành FID có thể chấp nhận được.

FID đo lường về mặt kỹ thuật thời gian mà điều gì đó xảy ra trên một trang. Vì vậy, theo nghĩa đó, đó là điểm tốc độ trang. Nhưng nó vượt xa hơn một bước và đo thời gian người dùng thực sự làm điều gì đó trên trang của bạn.

Đối với một trang có 100% nội dung (như một bài đăng trên blog hoặc các bài báo), FID có lẽ không phải là vấn đề lớn. “Tương tác” thực sự duy nhất là cuộn xuống trang. Hoặc chụm tay lại để phóng to và thu nhỏ.

Trên thực tế, Search Console của tôi thậm chí không báo cáo FID cho trang web của tôi.

Tôi đoán là do tôi không thực sự có bất kỳ trang đăng nhập nào. Hoặc các trang khác mà ai đó sẽ cần nhập nội dung nào đó ngay lập tức.

Nhưng đối với trang đăng nhập, trang đăng ký hoặc trang khác mà người dùng cần nhanh chóng nhấp vào một thứ gì đó, FID sẽ lớn.

Ví dụ: hãy nghĩ về trải nghiệm tải cho một trang như sau:

Với một trang đăng nhập như vậy, thời gian tải nội dung không phải là điều quan trọng. Điều quan trọng là bạn có thể bắt đầu nhập chi tiết đăng nhập của mình nhanh như thế nào.

Cùng với đó, đây là một số điều bạn có thể làm để cải thiện điểm FID của trang web của mình.

• Giảm thiểu (hoặc trì hoãn) JavaScript: Người dùng gần như không thể tương tác với một trang trong khi trình duyệt đang tải JS lên. Vì vậy, giảm thiểu hoặc trì hoãn JS trên trang của bạn là chìa khóa cho FID.
• Xóa mọi tập lệnh của bên thứ ba không quan trọng: Cũng giống như với FCP, các tập lệnh của bên thứ ba (như Google Analytics, bản đồ nhiệt, v.v.) có thể tác động tiêu cực đến FID.
• Sử dụng bộ nhớ cache của trình duyệt: Điều này giúp tải nội dung trên trang của bạn nhanh hơn. Điều này giúp trình duyệt của người dùng của bạn vượt qua các tác vụ tải JS nhanh hơn.

Cumulative Layout Shift (CLS) là gì?

CLS là mức độ ổn định của một trang khi nó tải hay còn gọi là “độ ổn định trực quan”.

Nói dễ hiểu hơn: nếu các phần tử trên trang của bạn bị di chuyển quá nhiều từ lúc bắt đầu cho đến khi trang tải hoàn tất, thì bạn đã có CLS cao. Điều này là một tín hiệu xấu.

Thay vào đó, bạn muốn các phần tử trên trang của mình tương đối ổn định khi tải. Bằng cách đó, người dùng không phải tìm lại vị trí của các liên kết, hình ảnh và ô đăng ký thông tin khi trang được tải đầy đủ hoặc vô tình bấm nhầm vào một cái gì đó như một cái quảng cáo chẳng hạn.

Dưới đây là các tiêu chí cụ thể mà Google đưa ra cho CLS:

Như bạn có thể thấy, đây là điều mà tôi cần phải làm. Đặc biệt là trên điện thoại di động.

Exploding Topic – Core web vitals

Dưới đây là một số điều đơn giản bạn có thể làm để giảm thiểu CLS.

• Sử dụng size attribute dimensions để đặt cho tất cả các tệp đa phương tiện phương tiện(video, hình ảnh, GIF, infographics, v.v.): Bằng cách đó, trình duyệt của người dùng biết chính xác phần tử đó sẽ chiếm bao nhiêu dung lượng trên trang đó. Và sẽ không thay đổi nó ngay lập tức khi trang tải đầy đủ.
• Đảm bảo các phần tử quảng cáo có không gian riêng: Nếu không, chúng có thể đột ngột xuất hiện trên trang, đẩy nội dung xuống dưới, lên trên hoặc sang một bên.
• Thêm các phần tử giao diện người dùng (UI elements) mới dưới màn hình đầu tiên: Bằng cách đó, chúng không đẩy nội dung xuống mà người dùng “mong đợi” ở nguyên vị trí của nó.

Các công cụ để đo lường Core Web Vitals

Có rất nhiều công cụ để giúp bạn theo dõi Web Vitals và cải thiện hiệu suất của trang web của bạn. Bạn có thể xem thử các công cụ nổi bật dưới đây, chúng hoàn toàn miễn phí:

• PageSpeed Insights: PageSpeed Insights đã trở thành một công cụ đo lường đầy đủ nhất từ dữ liệu thử nghiệm cho đến dữ liệu thực. Bên cạnh đó, bạn nhận được lời khuyên về những gì cần cải thiện.
• Lighthouse: Google đã xây dựng Lighthouse như một công cụ để kiểm tra PWA, nhưng giờ đây nó là một công cụ tuyệt vời để theo dõi hiệu suất. Nó có một số kiểm tra mà PageSpeed Insights không có và thậm chí nó còn có một số kiểm tra SEO.
• Báo cáo Core Web Vitals của Search Console : Giờ đây, bạn có thể nhận thông tin chi tiết về trang web của mình ngay từ Search Console! Thật tuyệt khi có được cảm giác về trang web của bạn đang hoạt động như thế nào.
• Chrome đi kèm với một số công cụ dành cho nhà phát triển: báo cáo Core Web Vitals (từ Chrome 88) và Core Web Vitals overlay (từ Chrome 90), cùng với đó là nhiều hơn thế nữa.