Tìm hiểu về 3 Core Web Vitals: LCP, FID & CLS

Một thời gian trước, Google đã khuấy động thị trường khi tuyên bố một yếu tố xếp hạng mới trong năm 2021: trải nghiệm trang. Trải nghiệm người dùng luôn là một phần quan trọng để xây dựng nên một trang web tốt nhất. Nhưng giờ đây, yếu tố trải nghiệm trang sẽ đóng vào vai trò lớn hơn khi bạn muốn xây dựng trang web tuyệt vời. Được biết, trải nghiệm trang được vận hành bằng những số liệu mới, trong đó, trung tâm là Core Web Vitals bao gồm LCP, FID và CLS!

Nâng cấp trải nghiệm trang với Web Vitals

Thông thường, số liệu về tốc độ trang thường rất khó hiểu và dễ gây hiểu nhầm. Cộng thêm, nó thường hay thay đổi mỗi khi bạn thử nghiệm lại.

Ngoài ra, Google đã xác định ra ba yếu tố quan trọng được coi Core Web Vitals. Core Web Vitals là tập hợp các chỉ số thiết yếu của website bao gồm các khía cạnh liên quan đến trải nghiệm người dùng trên trang và và sẽ được xuất hiện trong tất cả các công cụ của Google.

Hiện tại, ba trụ cột của trải nghiệm trang là:

• Hiệu suất tải trang (các yếu tố xuất hiện trên màn hình nhanh như thế nào?)
• Phản hồi (phản hồi lại người dùng nhanh như thế nào?)
• Tính ổn định khi hiển thị (Màn hình có bị giật khi đang tải không?)

Để đo lường được những yếu tố quan trọng của trải nghiệm người dùng, Google chọn ra 3 số liệu Core Web Vitals như sau:

• LCP (Largest Contentful Paint): đo lường khoảng thời gian để cho một phần nội dung to nhất xuất hiện trên màn hình. Đây có thể là một tấm hình hoặc một khối văn bản. Nói cách khác là cho người dùng cảm giác trang được tải nhanh. Một trang tải chậm sẽ làm người dùng bất mãn, khó chịu.
• FID (First Input Delay): đo lường khoảng thời gian để cho trang web phản hồi lại với sự tương tác đầu tiên của người dùng. Tức là cho người dùng cảm giác trang web phản ứng chạm tốt.
• CLS (Cumulative Layout Shift): Đo lường độ ổn định hình ảnh của trang. Một cách nói khác, các yếu tố có di chuyển xung quanh trên màn hình khi đang tải không – và nó xảy ra thường xuyên như thế nào? Mọi người đều thấy khó chịu khi đúng lúc click vào một nút bấm  thì một ad quảng cáo xuất hiện.

Ba số liệu quan trọng đánh giá trải nghiệm trang

LCP: Largest Contentful Paint

Largest Contentful Paint đo lường điểm mà yếu tố nội dung lớn nhất xuất hiện trên màn hình. Hãy nhớ nó không đo lường khoảng thời cần thiết cho trang của bạn tải xong toàn bộ, mà chỉ cần những phần quan trọng nhất được tải mà thôi.

Một trang web đơn giản chỉ bao gồm text và hình ảnh. Hình ảnh sẽ được coi là LCP. Vì đây là một phần nội dung lớn nhất cần tải. Nếu tấm hình đó được tải nhanh hơn, website có thể được hiển thị nhanh hơn. Nên, bạn chỉ cần tối ưu hình ảnh đó.

Trước đây, các số liệu như First Meaningful Content, đo lường thời gian mà phần nội dung đầu tiên xuất hiện trên màn hình có ý nghĩa nào đó cho người dùng. Nhưng, số liệu FMC thường không nhận ra được cái gì có giá trị nhất xuất hiện trên màn hình.

Ngược lại, Largest Contentful Paint đánh giá khoảng thời gian cần thiết để một yếu tố lớn nhất xuất hiện trên màn hình. Những yếu tố này có thể là hình ảnh, video hoặc những dạng nội dung khác.

Bạn cần biết điều gì

Theo Google, LCP sẽ diễn ra trong khoảng 2.5 giây đầu tiên khi tải trang web. LCP nằm trong khoảng từ 2,5 – 4 giây cần cải tiến và nếu vượt qua mức đó là website hoạt động rất tệ.

LCP đo lường thời gian nội dung có giá trị lớn nhất của trang xuất hiện trên màn hình, không phải là yếu tố đầu tiên được hiển thị. Xem hình ảnh dưới đây để hiểu rõ hơn về hoạt động của LCP :

Như hình mình họa, yếu tố đầu tiên xuất hiện trên màn hình là Logo và “Visual Stories”. Ở các hình tiếp theo, các phần text của trang xuất hiện. Hình cuối cùng mới được coi là LCP khi hình ảnh lớn xuất hiện trên trang. Điều bạn cần làm chính là rút ngắn thời gian LCP của trang dưới 2.5 giây

Google cung cấp cho bạn một vài công cụ để giúp bạn tìm ra tất cả các yếu tố này. Chẳng hạn như, PageSpeed Insight cung cấp một nguồn dữ liệu đầy đủ về Web Vitals và một loạt các lời khuyên để cải tiến trang web.

Ví dụ hình ảnh phía dưới khi kiểm tra web yoast.com trên PageSpeed Insights, bạn sẽ thấy LCP ở mức trung bình do có là một hình ảnh lớn. Trong hình chụp màn hình, PageSpeed Insights chỉ ra hình ảnh cần tối ưu là gì

Hình 3: PageSpeed Insights xác định đúng LCP

Theo Google, LCP bị ảnh hưởng bởi một số các nhân tố:

• Thời gian máy chủ phản hồi chậm: cải tiến máy chủ của bạn, dùng một CDN, tài nguyên bộ nhớ đệm, và v.v.
• Chặn kết xuất JavaScript và CSS (render-blocking JavaScript and CSS): thu gọn code CSS, hoãn CSS không quan trọng và CSS quan trọng nội tuyến.
• Tài nguyên tải chậm: tối ưu hình ảnh, nén lại file văn bản, và v.v.
• Vấn đề ở client-side rendering: vì thế nên giảm thiểu JavaScript quan trọng, dùng server-side rendering và pre-rendering.

Google có nhiều tài liệu trên nền của LCP và cách để tối ưu nó.

FID: First Input Delay

First Input Delay đo lường thời gian mà nó cần để cho trình duyệt web phản hồi lại tương tác đầu tiên của người dùng. Trình duyệt càng phản ứng lại nhanh, trang web càng phản hồi tốt.

Trì hoãn xảy ra khi trình duyệt vẫn đang chạy nền. Mặc dù nhìn bề ngoài có vẻ trang đã được tải xong, nhưng khi bạn nhấp vào một nút, không có gì xảy ra cả. Đây là một trải nghiệm không tốt và làm người dùng bất mãn. Cho dù chỉ có một sự chậm trễ nhỏ cũng làm cho trang web của bạn cảm thấy chậm chạp và không phản hồi tốt.

Trình duyệt web phải làm rất nhiều việc nhưng nó không thể làm mọi thứ cùng một lúc. Trong khi chúng ta đang xây dựng nhiều trang web phức tạp hơn (thường bằng JavaScript), điều này đòi hỏi rất nhiều từ trình duyệt. Để tăng tốc quá trình lấy nội dung trên màn hình và làm cho nó tương tác được, chúng ta cần phải tập trung vào tối ưu FID.

FID đo lường tất cả các tương tác xảy ra trong quá trình tải trang web. Đây là những hoạt động input như gõ nhẹ, bấm chuột và bấm phím (không bao gồm phóng to nhỏ và cuộn trang). Số liệu mới của Google yêu cầu FID dưới 100ms, cái gì giữa 100ms và 300ms cần cải tiến và trên 300ms là tệ.

Bạn cần biết điều gì

Bạn không thể đo lường được FID nếu như không có tương tác của người dùng. Có nghĩa là Google không thể đơn giản đoán được FID dựa trên dữ liệu họ có trong phòng lab – họ cần dữ liệu từ người dùng thật, hoặc gọi là trường dữ liệu. Dữ liệu thật ít bị kiểm soát như là dữ liệu phòng lab vì nó thu nhập dữ liệu từ người dùng từ tất cả thiết bị, cách sử dụng và môi trường khác nhau. Đây là một trong những nguyên nhân lý giải tại sao đôi khi bạn thấy dữ liệu thay đổi.

Nếu bạn đang tìm cách cải thiện điểm số của mình, bạn sẽ thường thấy JavaScript chính là “thủ phạm” gây điểm xấu. JavaScript giúp xây dựng tương tác của web, nhưng nó cũng có thể làm chậm trang web với mã code phức tạp. Thường trình duyệt web không thể phản hồi lại trong khi nó đang thi hành JavaScript.

Hãy giảm thiểu thời gian thi hành JavaScript, chia nhỏ ra các công việc phức tạp hoặc lược bỏ JavaScript không sử dụng là một cách hay để cải thiện trải nghiệm trang.

Đọc thêm: tài liệu về FID của Google và cách tối ưu hoá FID

CLS: Cumulative Layout Shift

Core Web Vital thứ ba là một cái mới: Cumulative Layout Shift. Số liệu này xác định nội dung tải lên trang web của bạn ‘ổn định’ ra sao. Nó quan sát mọi thứ có nhảy xung quanh thường xuyên không trong khi website đang tải và bao nhiêu lần như vậy. Ví dụ, một nút được tải đầu tiên, bạn thấy và định bấm vào, nhưng sau khi trang được tải hoàn chỉnh thì nút đó lại không nằm ở vị trí bạn định bấm. Điều này rất dễ gây khó chịu cho người dùng.

Lấy CNN.com làm ví dụ. Trang web tin tức thường rất phức tạp, tải chậm, và CNN cũng không là ngoại lệ. Nó ghi điểm rất tệ trên bài thử nghiệm PageSpeed Insights. Nếu bạn nhìn vào vấn đề và các mẹo phân tích tương ứng bên dưới, không ít hơn 5 yếu tố được tìm thấy. Thực tế, khi tải trang này, một loạt các yếu tố nhảy xung quanh, và nó cần một lúc để có thể ổn định lại.

Bạn cần biết điều gì

Cumulative Layout Shift là khung so sánh để xác định mức độ chuyển động của yếu tố. Nó lấy tất cả các điểm mà layout shift xảy ra và tính toán mức độ nghiêm trọng của những chuyển động đó. Google đánh giá dưới 0.1 là tốt, từ 0.1 tới 0.25 cần hoàn thiện và trên 0.25 là tệ.

Tất nhiên, điểm số này chỉ nhìn vào thay đổi không ngờ tới. Nếu người dùng click vào nút menu và một menu xuất hiện, nó không được tính là layout shift. Nhưng nếu nút đó có thể dẫn đến một sự thay đổi lớn trong thiết kế thì có thể tính là layout shift.

Quảng cáo là một trong những “thủ phạm” chính của việc này. Nó thường trong JavaScript và không được tối ưu hoá tốt, cộng thêm là nó được phục vụ bởi một máy chủ bên ngoài. Nhưng có một yếu tố khác nữa ảnh hưởng đến điểm CLS là hình ảnh.

Developer luôn không nêu rõ chiều cao và rộng của một hình ảnh trong code và để cho trình duyệt web tự tìm ra hình ảnh sẽ xuất hiện trên màn hình như thế nào. Trong một trang với vài văn bản và hình ảnh, văn bản sẽ xuất hiện trên màn hình trước, theo sau là hình. Nếu developer không để dành không gian cho các hình ảnh này, phần trên đầu của trang đang tải sẽ bị lấp bởi văn bản, bắt người dùng phải bắt đầu đọc. Tuy nhiên, hình ảnh tải sau lại chèn vào nơi mà văn bản đã hiện trước đó. Việc đẩy văn bản xuống như vậy sẽ khiến cho người dùng cảm thấy khó chịu. Vì vậy, hãy luôn xác định chiều cao và chiều rộng của hình ảnh trong CSS để dành cho một vị trí cố định cho hình ảnh.

Đọc thêm: tài liệu nền về CLS, tối ưu hoá cho CLS.

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

Có rất nhiều công cụ để giúp cho bạn theo dõi Web Vitals và cải tiến hiệu năng của trang web bạn như sau:

• PageSpeed Insights: PageSpeed Insights đã trở thành một công cụ đầy đủ dịch vụ đo lường tốc độ tải trang.
• Lighthouse: Google xây dựng nên Lighthouse như là một công cụ để kiểm tra PWAs, nhưng giờ nó là một công cụ tuyệt vời để đo lường hiệu năng. Nó có một vài phần kiểm tra mà PageSpeed Insights không có và nó có sẵn một số phần kiểm tra SEO nữa.
• Search Console Core Web Vitals report: giúp lấy insight từ trang web của bạn.

Kết luận

Tháng 05/ 2021, Google sẽ cập nhật thuật toán của họ để phối hợp với nhân tố xếp hạng mới là trải nghiệm trang. Để đo lường nhân tố này, Google phát triển một bộ số liệu gọi là Web Vitals. Trong những Web Vitals này, bạn có thể tìm thấy 3 số liệu cốt lõi: Largest Contentful Paint, First Input Delay và Cumulative Layout Shift. Nó có nghĩa là hiệu năng, phản hồi và độ ổn định trực quan. Hãy lấy người dùng làm trung tâm và xây dựng nên một trang web tuyệt vời nhé!