Google rất quan tâm đến khía cạnh trải nghiệm trên trang. Bằng chứng là trong những năm trở lại đây, Google liên tục cập nhật thêm các tín hiệu trải nghiệm trang mới vào quy trình xếp hạng tìm kiếm.
Trong đó, Core Web Vitals là một trong những chỉ số quan trọng để Google xác định trang web chất lượng và phù hợp nhất đối với người dùng trên SERP. Vậy thì Core web vitals là gì? Nó ảnh hưởng như thế nào đến thứ hạng trang? Và làm cách nào để bạn tối ưu hóa trang web cho Core Web Vitals? Tất cả sẽ được UptopZ Media tiết lộ ngay bên trong hướng dẫn này!
Core Web Vitals là gì?
Core Web Vitals là tập hợp các chỉ số đo lường hiệu suất URL đại diện cho các khía cạnh về trải nghiệm người dùng trên một trang được phát triển bởi Chrome UX Report và Google Search Console bao gồm: Tốc độ tải trang (Loading) – Khả năng tương tác (Interactivity) – Tính ổn định (Visual Stability).
Các chỉ số quan trọng về trang web lành mạnh của Google
Tiếp tục nâng độ khó lên một chút, bây giờ UptopZ Media sẽ giúp bạn tăng cường trải nghiệm người dùng trên trang bằng cách phân tích và tối ưu ba chỉ số cốt lõi của Core Web Vitals:
- LCP
- FID
- CLS
Largest Contentful Paint (LCP) – Chỉ số đo lường hiệu suất tải trang
LCP viết tắt từ Largest Contentful Paint, là một trong ba trọng số của Core Web Vital. LCP đại diện cho thời gian từ khi người dùng bắt đầu tải trang cho đến khi các phần nội dung chính trên trang (hình ảnh hoặc khối văn bản lớn nhất) được hiển thị hoàn toàn trên màn hình.
Các phần tử của LCP
Các phần tử thuộc chỉ số LCP bao gồm:
- <img>.
- <image> bên trong phần tử <svg>.
- <video>.
- Phần tử với ảnh nền được tải thông qua chức năng URL (thay vì CSS gradient).
- Phần tử cấp độ khối (Block-level elements) trong HTML chứa nút văn bản (text nodes).
- Phần tử nội tuyến (Inline Element).
Đánh giá chỉ số LCP
Có ba mức độ tương ứng với ba khoảng thời gian khác nhau để đánh giá chỉ số này:
- LCP (Thời gian hiển thị nội dung lớn nhất) tốt: ≤ 2,5 giây.
- LCP (Thời gian hiển thị nội dung lớn nhất) cần được cải thiện: ≤ 4 giây.
- LCP (Thời gian hiển thị nội dung lớn nhất) kém: > 4 giây.
Tối ưu LCP
Để cải thiện LCP, bạn có thể thực hiện một số cách sau đây:
- Xóa những tập lệnh không cần thiết từ bên thứ ba: Theo một nghiên cứu tốc độ tải trang gần đây của Backlinko, trang web sẽ tốn 34 mili giây cho mỗi lần tải một tập lệnh từ bên thứ ba. Do đó, hãy cố gắng phát hiện và xóa bỏ những tập lệnh đó để tối ưu thời gian tải trang.
- Nâng cấp máy chủ lưu trữ của trang web: Khi website của doanh nghiệp bạn sở hữu một máy chủ có khả năng lưu trữ tốt hơn sẽ đồng nghĩa với việc tốc độ tải trang được cải thiện, vì trang web sẽ không mất thời gian để tải lại toàn bộ những gì vẫn còn lưu được trong bộ nhớ của máy chủ. Nhờ đó, chỉ số LCP được cải thiện một cách đáng kể.
- Thiết lập tính năng ‘lazy-load’ trên trang: Chỉ số LCP chú trọng vào việc làm sao để có thể tải được một phần nội dung sẽ được hiển thị trước mắt người xem khi họ chưa cuộn trang. Chính vì thế, để tối ưu hóa thời gian này, bạn có thể cài đặt tính năng lazy-load cho các hình ảnh trên website. Khi trang web không mất thời gian để tải những phần hình ảnh mà người dùng chưa quan sát tới, nó sẽ có thể tập trung vào phần nội dung hiển thị trước mắt họ (LCP) và khiến cho thời gian tải các nội dung này được rút ngắn hết mức có thể.
- Xóa các tệp có dung lượng lớn: Để kiểm tra xem liệu trang web có chứa các tệp chiếm dung lượng lớn hay không, bạn có thể truy cập vào Google PageSpeed Insights. Báo cáo PSI sẽ giúp bạn chỉ ra chính xác các yếu tố chiếm nhiều dung lượng trên trang web. Khi bạn đã xem xét loại bỏ những tệp lớn không thực sự cần thiết, website sẽ tiết kiệm được thời gian tải và từ đó hiệu suất LCP được nâng lên đáng kể.
- Tối ưu CSS trên trang: Cascading Style Sheets (CSS) có thể hiểu đơn giản là hình thức bạn sử dụng để trình bày các văn bản trên trang. Càng sử dụng nhiều CSS để tạo bố cục, hiệu ứng cho văn bản, thì những nội dung văn bản này càng mất nhiều thời gian để có thể hiển thị trên trang. Chính vì vậy, hãy loại bỏ tất cả những CSS không cần thiết để đưa chỉ số LCP lên mức lý tưởng nhất. >> Tham khảo thêm: Tối ưu Largest Contentful Paint – web.dev
First Input Delay (FID) – Chỉ số đo lường mức độ tương tác
FID viết tắt từ First Input Delay, là một trong 3 chỉ số quan trọng của Core Web Vitals. FID thể hiện khoảng thời gian người dùng thực hiện tương tác đầu tiên trên trang web của bạn (nhấp vào menu, liên kết bất kỳ, sử dụng một tùy chỉnh hay điều khiển bằng JavaScript…) cho đến thời điểm trình duyệt phản hồi lại hành động đó.
Chính vì vậy, chỉ số FID là một trong 3 trọng số được Google đặc biệt quan tâm vì nó phản ánh quá trình người dùng thực sự tương tác với trang web.
Đánh giá chỉ số FID
Có 3 mức độ để đánh giá mức độ tương tác FID như sau:
- FID (Thời gian phản hồi tương tác lớn nhất) tốt: ≤ 100 mili giây.
- FID (Thời gian phản hồi tương tác lớn nhất) cần được cải thiện: ≤ 300 mili giây.
- FID (Thời gian phản hồi tương tác lớn nhất) kém: > 300 mili giây.
Tuy nhiên thang đánh giá được đưa ra ở trên cũng chỉ dừng lại ở mức tương đối. Bởi còn phụ thuộc vào loại website của bạn:
- Nếu trang web thuần văn bản và người dùng chỉ truy cập để đọc thông tin: chỉ số FID không nhất thiết phải quá cao vì tất cả những tương tác mà người dùng có thể thực hiện với trang của bạn chỉ là thao tác kéo, cuộn hay phóng to, thu nhỏ văn bản.
- Nếu trang web cần độ tương tác cao từ người dùng (điển hình như trang web đăng nhập): việc tối ưu chỉ số FID ở ngưỡng thấp nhất, tức cần ít thời gian cho tương tác đầu tiên của người dùng là điều rất cần thiết.
Tối ưu FID
Để cải thiện chỉ số FID trên trang web của mình, bạn có thể thực hiện các phương pháp sau đây:
- Hạn chế việc tải lên JavaScript trên trang web: bởi người dùng sẽ không thể tương tác với trang nếu như trang web của bạn vẫn đang “bận rộn” trong việc tải JavaScript lên. Vì vậy, hãy chú ý đến yếu tố này nếu bạn muốn tối ưu hóa chỉ số FID cho trang web của mình.
- Xóa tất cả các tập lệnh không quan trọng từ bên thứ ba: bạn cần loại bỏ các tập lệnh không cần thiết từ bên thứ ba cho chỉ số FID nhằm tránh ảnh hưởng tiêu cực đến tốc độ tải trang (FID).
- Sử dụng tính năng bộ nhớ Cache của trình duyệt: việc gợi ý cho người dùng sử dụng tính năng cache của trang web giúp lưu lại tất cả dữ liệu từ lần truy cập trước đó vào bộ nhớ, tối ưu hóa thời gian tải trang cho những dữ liệu đó và rút ngắn thời gian cần để người dùng thực hiện tương tác đầu tiên với trang. >> Xem thêm: Tối ưu First Input Delay – web.dev
Cumulative Layout Shift (CLS) – Chỉ số đo độ ổn định của hình ảnh
CLS viết tắt từ Cumulative Layout Shift, là một chỉ số quan trọng của Core Web Vitals. CLS phản ánh thời gian ổn định hình ảnh của trang web và không bị thay đổi trong suốt quá trình tải. Chẳng hạn, first paint mất 1.5s để tải nội dung, trong khi đó font load có thời gian tải lên đến 2s. Lúc này, bố cục của page đã bị dịch lên.
Một trang web không đảm bảo được độ ổn định của các phần tử hình ảnh trên trang chắc chắn sẽ ảnh hưởng trực tiếp đến trải nghiệm người dùng vì họ có thể cảm thấy bị gián đoạn hay có thể vô tình bấm vào những vị trí không mong muốn. Điều này thường xuyên xảy ra với các phiên bản giao diện trang web trên điện thoại di động.
Nguyên nhân xảy ra sự cố CLS
5 nguyên nhân chính dẫn đến lỗi CLS:
- Hình ảnh không có kích thước.
- Mã nhúng, quảng cáo và khung nội tuyến (Inline Frame) không có kích thước.
- Chứa văn bản ẩn, tức nội dung được chèn sau khi tải trang đầu tiên.
- Cách tải phông chữ gây ra lỗi FOIT (Flash of Invisible Text) hoặc FOUT.
- Các hành động chờ phản hồi từ mạng trước khi cập nhật DOM.
Đánh giá chỉ số CLS
Có 3 mức độ để đánh giá mức độ tương tác CLS như sau:
- CLS (Thời gian bố cục trang ổn định lớn nhất) tốt: <= 0.1 giây.
- CLS (Thời gian bố cục trang ổn định lớn nhất) cần được cải thiện: 0.25 giây.
- CLS (Thời gian bố cục trang ổn định lớn nhất) kém: >0.25 giây.
Cách cải thiện CLS
Bạn có thể tham khảo các phương pháp dưới đây để tối ưu điểm số CLS cho trang web của mình:
- Đảm bảo việc giữ nguyên kích thước của các tệp đa phương tiện trên trang: giữ nguyên kích thước của các tệp đa phương tiện (hình ảnh, video, tệp gif, file âm thanh…) để trình duyệt tự động tính toán chính xác dung lượng các tệp này trên trang web, giúp tránh bị thay đổi hay xáo trộn trong quá trình tải trang.
- Đảm bảo quảng cáo trên trang được sắp xếp ở vị trí riêng biệt: tối ưu điều này sẽ giúp trang web tránh các quảng cáo xuất hiện đột ngột, làm gián đoạn phần nội dung của trang web, dẫn đến một điểm số CLS không mong muốn.
- Cài đặt giao diện ổn định tại vị trí của người dùng: bằng cách này, trang web của bạn sẽ không đột ngột dịch chuyển vị trí hình ảnh/nội dung mà người dùng đang xem, đem lại trải nghiệm tốt cho người dùng, từ đó cải thiện được điểm CLS. >> Xem thêm: Tối ưu Cumulative Layout Shift – web.dev
Đo lường chỉ số LCP, FID và CLS
Các công cụ được UptopZ Media giới thiệu bên dưới chính là chìa khóa để giải quyết những vấn đề về Core web Vitals nằm tại 2 nhóm dữ liệu thực tế và thử nghiệm từ cơ bản đến nâng cao, giúp bạn lựa chọn công cụ phù hợp nhất.
- Dữ liệu thực tế: xem xét người dùng thực, điều kiện mạng, bộ nhớ đệm, thiết bị,… được Google sử dụng cho thuật toán xếp hạng.
- Dữ liệu thử nghiệm: kiểm tra dựa trên sự nhất quán của các điều kiện tương tự như dữ liệu thực tế. Mục tiêu là cung cấp cho bạn các kết quả thử nghiệm có thể phản hồi đúng với thực tế. Dữ liệu thử nghiệm không thể thay thế cho dữ liệu thực tế nhưng sẽ giúp bạn đẩy nhanh quá trình thử nghiệm.
Những công cụ để đo lường Core Web Vitals bao gồm:
- Web.dev
- Core SERP Vitals
- Google PageSpeed Insights
- Lighthouse
- Google Search Console
- Chrome UX Report
- Chrome DevTools
|
Công cụ |
Nhóm dữ liệu |
Thông tin |
Cấp độ |
Chỉ số Core Web Vitals |
|||
|
Thực tế |
Thử nghiệm |
LCP |
FID |
CLS |
|||
| Web.dev (Web Vitals Extension) |
✓ |
web.dev cho phép đo lường hiệu suất của trang theo thời gian. Dữ liệu của công cụ này giống với PSI. |
Bắt đầu |
✓ | ✓ |
✓ |
|
| Core SERP Vitals |
✓ |
✓ |
Cho phép xem các chỉ số Core Web Vitals trực tiếp tại trang kết quả tìm kiếm. |
Đơn giản |
✓ | ✓ |
✓ |
| Google PageSpeed Insight (PSI) |
✓ |
✓ |
PSI hoạt động dựa trên cơ sở của mỗi trang và cung cấp thông tin về tốc độ tải của một trang web: tổng quan về dữ liệu thực tế từ CrUX và dữ liệu thử nghiệm từ Lighthouse. |
Cơ bản |
✓ | ✓ |
✓ |
| Lighthouse |
✓ |
Công cụ mã nguồn mở (open-source) tự động của Google nhằm thực hiện phân tích, đo lường và cải thiện chất lượng website. |
Cơ bản |
✓ | TBT |
✓ |
|
| Google Search Console (GSC) |
✓ |
Cho phép theo dõi hiệu suất toàn bộ website, giúp xác định chính xác những vấn đề tồn tại trong từng nhóm URL (GSC sẽ nhóm các trang tương tự lại với nhau dựa trên điểm tương đồng) |
Cơ bản |
✓ | ✓ |
✓ |
|
| Chrome UX Report (CrUX) | CrUX chứa dữ liệu về trải nghiệm của người dùng từ nhiều trang web. Có thể sử dụng CrUX API hoặc Google BigQuery để truy cập vào trường dữ liệu CrUX. |
Nâng cao |
✓ | ✓ |
✓ |
||
| Chrome DevTools |
✓ |
Công cụ được xây dựng trực tiếp vào trình duyệt Chrome sẽ cho phép bạn phân tích CLS tại Experience. |
Nâng cao |
✓ | TBT |
✓ |
|
*NOTE: TBT (Total Blocking Time) dùng để đo khả năng đáp ứng tải và tương ứng với chỉ số FID.
Kết luận
Trên đây là những đặc trưng cơ bản, tầm ảnh hưởng cũng như phương pháp đo lường hiệu suất Core Web Vitals cho website mà bạn cần nắm rõ để có thể xây dựng trang web của doanh nghiệp mình một cách tối ưu và hiệu quả nhất. Cảm ơn các bạn đã đón đọc và hẹn gặp lại các bạn trong những bài viết tiếp theo của UptopZ Media.
