Core Web Vitals: 3 chỉ số “mới mẻ” cần biết trong SEO

Core Web Vitals là một trong những chỉ số đo lường trải nghiệm người dùng. Thông số này có liên quan đến nhiều vấn đề kỹ thuật và các chỉ số như (LCP), (CLS), (FID)… Để tìm hiểu rõ ràng và cụ thể hơn về các chỉ số ở trên, mọi người có thể tham khảo ngay bài viết dưới đây của dịch vụ SEO uy tín SEODO nhé.

1. Core Web Vitals là gì?

Core Web Vitals là chỉ số thiết yếu về trang web ảnh hưởng đến SEO website như thế nào khi Google thông báo có những cập nhật ảnh hưởng đến xếp hạng từ khóa. Core Web Vitals là một trong những chỉ sổ để đo lường trải nghiệm người dùng, thông số này liên quan rất nhiều đến vấn đề kỹ thuật của một trang website.

Trải nghiệm trang trên thiết bị di động và các chỉ số Core Web Vital đã chính thức được sử dụng để xếp hạng các trang kể từ tháng 5 năm 2021. Các tín hiệu trên máy tính để bàn cũng đã được sử dụng kể từ tháng 2 năm 2022.

Cách dễ nhất để xem các chỉ số cho trang web của bạn là sử dụng báo cáo Core Web Vitals trong Google Search Console. Với báo cáo này, bạn có thể dễ dàng xem được các trang của mình có được phân loại là “URL kém”, “URL cần cải thiện” hay “URL tốt”.

>>> Tìm hiểu thêm về thuật toán Rankbrain – thuật toán được xem là “bộ não” xếp hạng của Google

2. Tìm hiểu 3 thành phần “cốt lõi” của Core Web Vitals

Dưới đây là ba thành phần hiện tại của Core Web Vitals và những gì mà 3 phần tử này đo lường:

2.1. Largest Contentful Paint – Chỉ số đầu tiên trong Core Web Vitals

LCP là thành phần hiển thị lớn duy nhất được tải trong chế độ xem. Phần tử lớn nhất thường là một hình ảnh nổi bật hoặc có thể là thẻ <h1>. Nhưng phần này cũng có thể là bất kỳ cái nào trong số này:

• Phần tử <img>.
• Phần tử <image> bên trong phần tử <svg>.
• Hình ảnh bên trong phần tử <video>.
• Hình nền được tải bằng hàm url () Các khối  văn bản <svg> và <video> có thể được thêm vào trong tương lai.

2.1.1. Cách kiểm tra LCP như thế nào?

Thông tin chi tiết về tốc độ trang, phần tử LCP sẽ được chỉ định trong phần “Chẩn đoán”. Ngoài ra, hãy lưu ý rằng chỉ có một tab để chọn LCP và sẽ chỉ hiển thị các vấn đề liên quan. Để kiểm tra LCP, trong Chrome DevTools, bạn sẽ làm theo các bước sau:

• Ở phần hiệu suất, bạn chọn “Ảnh chụp màn hình”.
• Bạn nhấp vào “Bắt đầu lập hồ sơ và tải lại trang” LCP nằm trên biểu đồ thời gian
• Nhấp vào nút; đây là yếu tố cho LCP.

>>> TÌM HIỂU THÊM: SEO Onpage là gì? Checklist 32 tiêu chuẩn tối ưu SEO Onpage được đúc kết chi tiết 2024

2.1.2. Cách cải thiện chỉ số LCP

Như chúng ta đã thấy trong thuật ngữ SEO PageSpeed Insights, có rất nhiều vấn đề cần được giải quyết khiến LCP trở thành chỉ số khó cải thiện nhất. Nghiên cứu đã chỉ ra hầu hết các trang web dường như không cải thiện LCP theo thời gian. Dưới đây là một số khái niệm cần ghi nhớ và một số cách bạn có thể cải thiện LCP.

• Nhỏ hơn là nhanh hơn

Nếu bạn có thể loại bỏ bất kỳ tệp nào hoặc giảm kích thước của chúng, thì trang của bạn sẽ tải nhanh hơn. Điều này có nghĩa là bạn có thể muốn xóa bất kỳ tệp nào hay các phần của mã không được sử dụng 

Để thực hiện điều này sẽ phụ thuộc rất nhiều vào thiết lập của bạn, quá trình này được gọi là tree shaking. Điều này thường được tiến hành thông qua một số quy trình tự động. Nhưng trong một số hệ thống, bước này có thể không có giá trị. Ngoài ra còn có tính năng nén, giúp kích thước tệp nhỏ hơn. Khá nhiều loại tệp được sử dụng để xây dựng trang web có thể được nén gồm CSS, JavaScript, Hình ảnh và HTML.

• Gần hơn là nhanh hơn

Thông tin cần có thời gian để đến với người tiếp nhận. Bạn càng ở xa máy chủ, thì càng mất nhiều thời gian để truyền dữ liệu. Trừ khi bạn phục vụ ở một khu vực địa lý nhỏ. Bạn có mạng phân phối nội dung (CDN) – một phát hiện hay. thì CDN sẽ cung cấp cho bạn cách để kết nối và phân chia trang web của bạn đến gần hơn với người dùng. Việc này giống như tạo bản sao máy chủ của bạn ở các vị trí khác nhau trên thế giới.

• Sử dụng cùng một máy chủ nếu có thể

Khi bạn lần đầu tiên kết nối với máy chủ. Điều này đồng nghĩa sẽ có một quy trình điều hướng web và thiết lập kết nối an toàn giữa bạn và máy chủ. Quá trình này mất một khoảng thời gian. Mỗi kết nối mới bạn cần thực hiện sẽ làm tăng thêm độ trễ trong khi hoạt động này diễn ra theo cùng một quy trình. Nếu bạn lưu trữ tài nguyên của mình trên cùng một máy chủ, bạn có thể khắc phục những sự chậm trễ đó.

Nếu không thể sử dụng cùng một máy chủ, bạn có thể dùng kết nối trước hoặc tìm nạp trước DNS để bắt đầu kết nối sớm hơn. Một trình duyệt thường sẽ đợi HTML tải xong trước khi bắt đầu kết nối. Nhưng với kết nối trước hoặc tìm nạp trước DNS, nó bắt đầu sớm hơn bình thường. Xin lưu ý rằng DNS-prefetch hỗ trợ tốt hơn so với Preconnect.

• Lưu vào bộ nhớ cache những gì bạn có thể

Khi bạn lưu các tài nguyên vào bộ nhớ cache, chúng sẽ được tải xuống lần xem trang đầu tiên nhưng không cần tải xuống cho các lần xem trang tiếp theo. Với các tài nguyên đã có sẵn, việc tải trang bổ sung sẽ nhanh hơn nhiều. Bạn cần kiểm tra số lượng tệp được tải xuống trong lần tải trang thứ hai.

• Ưu tiên các nguồn lực khác

Để vượt qua kiểm tra LCP, bạn nên ưu tiên cách tải tài nguyên của mình trong đường dẫn hiển thị quan trọng. Bạn muốn sắp xếp lại thứ tự các thứ được tải xuống và xử lý. Trước tiên, bạn cần tải các tài nguyên cần thiết để người dùng xem nội dung ngay lập tức, sau đó tải phần còn lại.

Nhiều trang web có thể đạt được thời gian dành cho LCP bằng cách chỉ cần thêm một số câu lệnh tải trước cho những thứ như hình ảnh chính, cũng như các biểu định kiểu và phông chữ cần thiết.

• Hình ảnh sớm

Nếu bạn không cần hình ảnh, giải pháp hiệu quả nhất là loại bỏ nó. Nếu trang web của bạn phải có hình ảnh, thì nên tối ưu hóa kích thước và chất lượng để giữ cho nó càng nhỏ càng tốt. Đầu tiên, bạn có thể muốn tải trước hình ảnh. Thao tác này sẽ bắt đầu tải xuống hình sớm hơn một chút. Điều này có nghĩa là nó sẽ hiển thị trước. Câu lệnh tải trước này có dạng như sau:

<link rel = “preload” as = “image” href = “cat.jpg” imagesrcset = “cat_400px.jpg 400w, cat_800px.jpg 800w, cat_1600px.jpg 1600w “ imagesizes = “50vw”>

• HÌnh ảnh trễ

Bạn nên tải bất kỳ hình ảnh nào mà bạn không cần ngay lập tức. Bạn có thể sử dụng loading = “lazy” như thế này: <img src = “cat.jpg” alt = “cat” loading = “lazy”>

• CSS sớm

Chúng ta đã nói về việc loại bỏ CSS không sử dụng và giảm thiểu CSS bạn có. Điều quan trọng khác bạn nên làm là nội tuyến CSS quan trọng. Đây là việc thực hiện lấy một phần CSS cần thiết để tải nội dung mà người dùng nhìn thấy ngay lập tức và sau đó áp dụng trực tiếp vào HTML. Khi HTML được tải xuống, tất cả CSS cần thiết để tải những gì người dùng thấy đã có sẵn.

• CSS trễ

Với bất kỳ CSS bổ sung nào không quan trọng, bạn sẽ muốn áp dụng CSS đó sau. Bạn có thể tiếp tục tải xuống CSS với câu lệnh tải trước nhưng không áp dụng CSS cho đến khi sự kiện  được tải lên. Điều này giống như: <link rel = “preload” href = “stylesheet.css” as = “style” onload = “this.rel = ‘stylesheet'”>

• JAVASCRIPT sớm

Chúng tôi đã nói về việc loại bỏ JavaScript không sử dụng và giảm thiểu những gì bạn có. Nếu bạn đang sử dụng khung JavaScript, thì bạn có thể muốn hiển thị trước hoặc hiển thị cùng phía máy chủ (SSR) của trang. Các tùy chọn khác là nội dung của JavaScript cần thiết sớm.

Tương tự như những gì chúng ta đã thảo luận về CSS, đây là nơi bạn tải các phần của mã trong HTML hoặc tải trước các tệp JavaScript. Điều này chỉ nên được thực hiện cho các nội dung cần thiết.

• JAVASCRIPT muộn

4.2. Cumulative Layout Shift (CLS) – Chỉ số cốt lõi của Core Web Vitals

4.2.1. Cách kiểm tra CLS

Trong PageSpeed Insights, nếu bạn chọn CLS, có thể thấy tất cả các vấn đề liên quan. Điều chính cần chú ý ở đây là “Tránh thay đổi bố cục lớn.” Hệ thống đang sử dụng WebPageTest. Trong Chế độ xem cuộn phim, hãy sử dụng các tùy chọn sau:

• Đánh dấu sự thay đổi của bố cục
• Kích thước hình thu nhỏ: Lớn
• Khoảng thời gian hình thu nhỏ: 0,1 giây

Lưu ý cách phông chữ của hệ thống khởi động lại từ 5,1 giây đến 5,2 giây. Việc thay đổi bố cục khi phông chữ tùy chỉnh của được áp dụng. Tạp chí Smashing cũng có một kỹ thuật thú vị trong đó nó phác thảo mọi thứ bằng một đường thẳng màu đỏ 3px và ghi lại một đoạn video tải trang để xác định vị trí thay đổi bố cục đang diễn ra.

4.2.2. Cách cải thiện chỉ số CLS

Trong hầu hết các trường hợp, để tối ưu hóa CLS, bạn sẽ giải quyết các vấn đề liên quan đến hình ảnh, phông chữ hoặc có thể là nội dung được chèn vào. Hãy xem xét từng trường hợp như sau.

• Hình ảnh

Đối với hình ảnh, những gì bạn không nhất thiết phải tìm cách để làm lấp đầy khoảng trắng thông qua sự thay đổi hình ảnh. Điều này có nghĩa là việc thiết lập chiều cao và chiều rộng của hình ảnh được thực hiện bằng cách chỉ định chúng trong thẻ <img>.

Đối với hình ảnh đáp ứng, bạn cần sử dụng srcset như sau: <img width = “1000” chiều cao = “1000” src = “cún con-1000.jpg” srcset = “cún-1000.jpg 1000w, cún-2000.jpg 2000w, cún-3000.jpg 3000w” alt = “Cún con với bóng bay” />. Bên cạnh đó bạn nên dành không gian tối đa cần thiết cho bất kỳ nội dung động nào được thêm vào như là quảng cáo.

• Phông chữ

Mục tiêu của bạn là đưa phông chữ trên màn hình càng nhanh càng tốt và sự thay đổi một phông chữ khác. Khi một phông chữ được tải hoặc thay đổi, bạn sẽ có thấy phông chữ đáng để thay đổi như Flash of Invisible Text (FOIT) hoặc Flash of Unstyled Text (FOUT).

Nếu bạn có thể sử dụng phông chữ hệ thống, bạn sẽ không cần phải tải những kiểu phông chữ khác nữa. Nếu bạn phải sử dụng phông chữ tùy chỉnh, phương pháp tốt nhất hiện tại để giảm thiểu CLS là kết hợp <link rel = ”preload”> (sẽ cố gắng lấy phông chữ của bạn càng sớm càng tốt) và Font-display: option (sẽ cung cấp cho phông chữ của bạn một khoảng thời gian nhỏ để tải).

Nếu phông chữ chưa kịp hiển thị, lần tải trang đầu tiên sẽ chỉ có một phông chữ mặc định. Phông chữ tùy chỉnh của bạn sau đó sẽ được lưu vào bộ nhớ đệm và hiển thị khi tải trang tiếp theo.

• Nội dung được đưa vào

Khi nội dung được chèn động vào bên trên nội dung hiện có, điều này gây ra sự thay đổi bố cục. Nếu bạn định làm điều này, hãy chú ý dành đủ chỗ để chèn cho nội dung trước.

>>> Tham khảo bảng giá SEO tổng thể của SEDO với ưu đãi đến 100 triệu

4.3. First Input Delay (FID)

FID là thời gian từ khi người dùng tương tác với trang của bạn đến khi trang phản hồi. Bạn cũng có thể coi đó là khả năng đáp ứng.

Các tương tác mẫu:

• Nhấp vào một liên kết hoặc nút
• Nhập văn bản vào trường trống
• Chọn menu thả xuống Nhấp vào hộp kiểm
• Một số sự kiện như cuộn hoặc thu phóng không được tính.

FID có thể khiến bạn khó chịu khi cố gắng nhấp vào một thứ gì đó mà không có gì xảy ra trên trang.

Không phải tất cả người dùng sẽ tương tác với một trang, vì vậy trang có thể không có giá trị FID. Đây cũng là lý do tại sao các công cụ kiểm tra trong phòng thí nghiệm sẽ không có giá trị vì chúng không tương tác với trang. Những gì bạn có thể xem cho các bài kiểm tra trong phòng thí nghiệm là Tổng thời gian chặn (TBT). Trong Thông tin chi tiết về tốc độ trang, bạn có thể sử dụng tab TBT để xem các vấn đề liên quan.

4.3.1. Nguyên nhân nào gây ra sự chậm trễ?

Chỉ có một luồng chính và JavaScript cạnh tranh để chạy các tác vụ trên. Hãy nghĩ về điều này giống như việc JavaScript phải thay phiên nhau để chạy. Trong khi tác vụ chạy, một trang không thể phản hồi thông tin nhập của người dùng. Đây là sự chậm trễ được cảm nhận. Tác vụ càng dài, người dùng trải qua thời gian trễ càng dài. Thời gian nghỉ giữa các tác vụ là cơ hội mà trang phải chuyển sang tác vụ người dùng nhập và phản hồi lại.

4.3.2. Tối ưu hóa FID

4. Những trường hợp thực tế về Core Web Vitals

Những trường hợp thực tế về Core Web Vitals như sau.

• Sự thật 1: Các chỉ số được phân chia giữa máy tính để bàn và thiết bị di động. Tín hiệu di động được sử dụng cho xếp hạng trên thiết bị di động và tín hiệu trên máy tính để bàn được sử dụng cho xếp hạng desktop.
• Sự thật 2: Dữ liệu đến từ báo cáo trải nghiệm người dùng Chrome (CrUX), báo cáo này ghi lại dữ liệu từ những người dùng Chrome đã chọn tham gia. Các chỉ số được đánh giá ở vị thứ 75 của người dùng. Vì vậy, nếu 70% người dùng của bạn thuộc danh mục “tốt” và 5% thuộc danh mục “cần cải thiện”, thì trang của bạn sẽ vẫn được đánh giá là “cần cải thiện”.
• Sự thật 3: Các chỉ số được đánh giá cho mỗi trang. Nhưng nếu không có đủ dữ liệu, Nhà phân tích sẽ có xu hướng quản trị trang web của Google. John Mueller tuyên bố rằng các tín hiệu từ các phần của trang web hoặc toàn bộ trang web có thể được sử dụng.

Trích: “Trong nghiên cứu dữ liệu Core Web Vitals của chúng tôi, chúng tôi đã xem xét hơn 42 triệu trang và nhận thấy rằng chỉ 11,4% số trang có các chỉ số liên quan đến chúng.”

• Sự thật 4: Với việc bổ sung các chỉ số mới này, các trang trên thiết bị di động được tăng tốc (AMP) đã bị loại bỏ theo yêu cầu của tính năng. Vì các câu chuyện mới sẽ không thực sự có dữ liệu về chỉ số tốc độ, nên có thể các chỉ số từ một danh mục trang lớn hơn hoặc thậm chí toàn bộ miền có thể được sử dụng.
• Sự thật 5: Ứng dụng không đo lường một số chỉ số như FID và LCP. Thông qua chuyển đổi trang, có một số thay đổi được đề xuất gồm API lịch sử ứng dụng và có thể là chỉ số được sử dụng để đo lường mức độ tương tác được gọi là “Khả năng đáp ứng”.
• Sự thật 6: Các chỉ số có thể thay đổi theo thời gian và các mức để tính. Google đã đổi mới các chỉ số được sử dụng để đo tốc độ trong các công cụ của mình trong những năm qua. Các ngưỡng của đo cũng có nhiều thay đổi được đề xuất hơn đối với các chỉ số.

Trích: “Tôi sẽ không quá ngạc nhiên nếu kích cỡ của một trang web được mở rộng. Bạn có thể vượt qua các chỉ số hiện tại bằng cách ưu tiên nội dung mà vẫn có một trang cực kỳ lớn.”

>>> NHỮNG BÀI VIẾT HAY CÓ THỂ BẠN ĐÃ BỎ LỠ:

• Pagination Là Gì? 9 Mẹo Để Phân Trang Cực Hiệu Quả Trong SEO
• Responsive Web Là Gì? Mọi Thứ Về Responsive Web Mà Bạn Cần Biết

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

Sự khác biệt giữa dữ liệu phòng thí nghiệm và dữ liệu hiện trường là dữ liệu hiện trường xem xét người dùng thực, điều kiện mạng, thiết bị, bộ nhớ đệm, v.v. Nhưng dữ liệu phòng thí nghiệm được kiểm tra nhất quán dựa trên cùng các điều kiện để làm cho kết quả thử nghiệm có thể lặp lại.

Nhiều công cụ trong số này sử dụng Lighthouse làm cơ sở cho các bài kiểm tra trong phòng thí nghiệm của họ. Ngoại lệ là WebPageTest, mặc dù bạn cũng có thể chạy thử nghiệm Lighthouse với nó.

• Trường dữ liệu

Có một số công cụ bổ sung mà bạn có thể sử dụng để thu thập dữ liệu giám sát người dùng thực (RUM) của riêng mình. Bên cạnh đó, công cụ còn cung cấp phản hồi tức thì hơn về cách cải thiện tốc độ ảnh hưởng đến người dùng thực tế của bạn (thay vì chỉ dựa vào các bài kiểm tra trong phòng thí nghiệm).

• Dữ liệu thí nghiệm

PageSpeed Insights là công cụ để kiểm tra dữ liệu từng trang một. Nhưng nếu bạn muốn xem cả dữ liệu phòng và dữ liệu trường trên quy mô lớn, thì cách dễ nhất để có được điều đó là thông qua API. Bạn có thể kết nối dễ dàng với Công cụ quản trị trang web của Ahrefs (miễn phí) hoặc Kiểm tra trang web của Ahrefs và nhận báo cáo chi tiết hiệu suất của bạn.

>>> Tham khảo thêm về thuật toán tăng sự uy tín, chất lượng, đánh giá của Website bạn qua EAT là gì

6. Người dùng & Doanh nghiệp sẽ phải ứng biến như thế nào với Core Web Vitals:

Đây sẽ là các vấn đề quan trọng cho bạn và doanh nghiệp bạn để cải thiện trải nghiệm người dùng trên Website. Như trên, bạn đã hiểu Core Web Vitals là gì và tại sao nó lại quan trọng.

Vậy bước tiếp của bạn sẽ là làm gì? Chắc chắn sẽ là tìm những phương pháp để cải thiện bộ chỉ số này. Tuy nhiên, chúng tôi biết đây sẽ là rào cản về mặt kỹ thuật cho vô số các công ty và dự án. Vì để cải thiện, bạn sẽ cần tới team code website mà không phải nguồn lực nào của Doanh nghiệp cũng có sẵn. Do đó, chúng tôi có thể khuyên bạn tìm tới những Freelance hoặc những Agency chuyên về tối ưu Web hoặc chính doanh nghiệp làm SEO cho bạn để cải thiện các chỉ số cần thiết này.

Suy cho cùng thi đây cũng chỉ là một phần trong hơn 200 (có thể nhiều hơn rất nhiều) các tiêu chí đánh giá của Google. Vì vậy, bạn nên cân nhắc quan trọng hóa việc cải thiện quá nhiều và nguồn lực của mình. Không nhất thiết bạn phải xanh và 100% điểm, vì điều đó không có nghĩa bạn sẽ lên TOP cao nên đạt được mức đó.

Core Web Vitals là một chỉ số quan trọng góp phần giúp cho Google xác định được số người dùng tham gia vào web. Từ đó hệ thống sẽ đưa ra những đánh giá chính xác nhất về bài viết của mọi người. Hy vọng sau khi tham khảo bài viết của công ty SEO SEODO, bạn đọc sẽ có thêm nhiều kiến thức chỉ số đo lường trải nghiệm người dùng được Google rất tin tưởng này.

Cùng tìm hiểu thêm về những yếu tố liên quan về Thuật toán SEO của bạn qua các bài viết :

• Google Panda là gì? Những điều mà bạn lưu ý về thuật toán Google Panda
• Thuật toán Penguin là gì? Cách nhận biết và khắc phục khi bị dính Penguin
• 10 thuật toán Google phải hiểu để tăng trưởng ranking 2024

Câu hỏi thường gặp:

Core Web Vitals là gì?
Core Web Vitals là chỉ số thiết yếu về trang web ảnh hưởng đến SEO website như thế nào khi Google thông báo có những cập nhật ảnh hưởng đến xếp hạng từ khóa. Core Web Vitals là một trong những chỉ số để đo lường trải nghiệm người dùng, thông số này liên quan rất nhiều đến vấn đề kỹ thuật của một trang website.

3 thành phần “cốt lõi” của Web Vitals?

1. Largest Contentful Paint (Thời gian hiển thị nội dung lớn nhất)
2. Cumulative Layout Shift (Điểm số tổng hợp về mức thay đổi bố cục)
3. First Input Delay (Thời gian phản hồi lần tương tác đầu tiên)