Core Web Vitals hiển thị ba số liệu mà Google xếp hạng — LCP, CLS và INP — được đo trực tiếp trên trang bạn đang xem, được xếp hạng theo ngưỡng của Google và truy ngược lại yếu tố chính xác đằng sau mỗi con số.
Core Web Vitals quyết định một phần cách xếp hạng các trang của bạn, nhưng các cách đo lường thông thường rất khó khăn. Các công cụ phòng thí nghiệm ghi được một tải tổng hợp mà không ai trải qua. Search Console báo cáo người dùng thực, trễ bốn tuần, được nhóm thành các nhóm URL. Cả hai đều không cho bạn biết yếu tố nào trên trang trước mặt bạn có vấn đề.
Công cụ này đo lường trang bạn đang thực sự xem khi bạn sử dụng nó. Mỗi LCP, CLS và INP đều nhận được một ô có giá trị, xếp hạng Tốt, Cần làm hoặc Kém so với ngưỡng được công bố của Google và một thanh hiển thị nơi bạn ngồi. FCP và TTFB ngồi cạnh chúng để biết ngữ cảnh, vì LCP chậm do máy chủ chậm gây ra là một vấn đề khác với vấn đề do hình ảnh nặng gây ra.
Các định nghĩa khớp với những gì Chrome báo cáo cho CrUX, điều này quan trọng nếu bạn định so sánh các con số với Search Console. CLS sử dụng các cửa sổ phiên - một cửa sổ kết thúc sau khoảng cách một giây hoặc sau năm giây và cửa sổ tệ nhất sẽ thắng - thay vì cộng mọi ca lại với nhau một cách ngây thơ. INP là phân vị thứ 98 trong độ trễ tương tác của bạn, mà đối với một lượt truy cập bình thường chỉ đơn giản là tương tác chậm nhất. LCP ngừng thay đổi ở lần tương tác đầu tiên của bạn, giống hệt như Chrome thực hiện.
Hữu ích nhất là mọi số đều được quy cho. Bảng điều khiển đặt tên cho phần tử có màu vẽ lớn nhất, phần tử được dịch chuyển và tương tác chậm nhất, đồng thời nút Hiển thị sẽ cuộn tới bất kỳ phần tử nào trong số chúng và phác thảo phần tử đó trên trang. Thay vì biết rằng CLS là 0,31, bạn sẽ thấy biểu ngữ đang đẩy nội dung của bạn xuống. Sao chép báo cáo sẽ trao cho bạn toàn bộ nội dung dưới dạng văn bản để nhận vé.
Ba số liệu xếp hạng cập nhật khi bạn sử dụng trang: cuộn di chuyển CLS, nhấp và nhập di chuyển INP. Mỗi mục đều được xếp hạng Tốt, Cần làm hoặc Kém theo ngưỡng của Google.
Đặt tên cho phần tử sơn lớn nhất, phần tử dịch chuyển và tương tác chậm nhất. Nhấn Hiển thị để cuộn đến bất kỳ trong số chúng và phác thảo nó trực tiếp trên trang.
CLS sử dụng khoảng thời gian phiên có khoảng cách 1 giây và giới hạn 5 giây, INP là phân vị thứ 98 của độ trễ tương tác và LCP đóng băng ở lần tương tác đầu tiên — vì vậy, các con số của bạn sẽ phù hợp với Search Console.
Bức tranh có nội dung đầu tiên và Thời gian đến byte đầu tiên nằm cạnh ba thứ lớn, vì vậy bạn có thể phân biệt máy chủ chậm với hình ảnh anh hùng hạng nặng trước khi bắt đầu tối ưu hóa sai thứ.
Liệt kê các tương tác chậm nhất của bạn với loại sự kiện và thành phần liên quan, do đó, có thể tìm thấy trình đơn thả xuống hoặc bộ lọc chậm thay vì đoán.
Một cú nhấp chuột sẽ sao chép mọi số liệu, xếp hạng và bộ chọn vi phạm dưới dạng văn bản thuần túy — sẵn sàng dán vào phiếu yêu cầu, yêu cầu kéo hoặc email của khách hàng.
Hãy xác nhận LCP, CLS và INP có màu xanh lục trên mẫu mới trước khi mẫu này xuất hiện trực tuyến thay vì tìm hiểu từ Search Console một tháng sau đó.
Search Console cho bạn biết một nhóm URL không đạt CLS; mở một trong số chúng bằng công cụ này và xem chính xác phần tử nào thực hiện dịch chuyển.
Cuộn trang và xem CLS leo thang, sau đó nhấn Hiển thị để phác thảo quảng cáo, biểu ngữ hoặc phông chữ web tải muộn đang di chuyển nội dung của bạn.
Nhấp qua các bộ lọc, menu và phương thức, sau đó đọc danh sách tương tác chậm nhất để tìm ra điều khiển nào đang tiêu tốn hàng trăm mili giây.
Ghi lại các con số, triển khai bản sửa lỗi, sau đó đo lại cùng một trang và so sánh hai báo cáo cạnh nhau.
Nhấp vào biểu tượng Core Web Vitals trong dock DevSuite Pro. Các ô số liệu xuất hiện ngay lập tức bằng cách sử dụng bất kỳ thông tin nào trang đã ghi lại.
LCP chỉ có ý nghĩa khi bắt đầu tải trang, vì vậy hãy tải lại với bảng điều khiển mở khi bạn muốn đọc mà bạn có thể tin cậy.
Cuộn qua toàn bộ trang để thực hiện CLS, sau đó nhấp, nhấn và nhập để tạo số đo INP. Các ô cập nhật khi bạn di chuyển.
Nhấn Hiển thị bên cạnh phần tử LCP, nguồn thay đổi bố cục hoặc tương tác chậm. Trang cuộn đến nó và phác thảo nó để không có sự mơ hồ về phần tử nào chịu trách nhiệm.
Nhấp vào Sao chép báo cáo để có bản tóm tắt bằng văn bản thuần túy về mọi chỉ số, xếp hạng và bộ chọn. Nhấn Reset để bắt đầu lại CLS và INP từ đầu.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 71 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
