Cách tối ưu hóa Core Web Vitals giúp gia tăng hiệu quả SEO năm 2023 31/01/2023

Core Web Vitals của Google lần đầu tiên trở thành một yếu tố xếp hạng vào năm 2021. Vào tháng 2 năm 2022, đã được triển khai trên toàn bộ các tìm kiếm trên thiết bị di động và máy tính để bàn. Kể từ đó, Google cũng đã nỗ lực cung cấp các công nghệ mới để tối ưu hóa hiệu suất web cũng như thử nghiệm một hiệu suất mới tiềm năng.

Core Web Vitals là gì và chúng có ý nghĩa gì đối với xếp hạng?

Core Web Vitals là một bộ gồm ba chỉ số về trải nghiệm người dùng:

• Hình ảnh có nội dung lớn nhất: hình ảnh hoặc đoạn văn bản lớn nhất hiển thị nhanh như thế nào?
• Độ trễ đầu tiên: trang web phản hồi đầu vào của người dùng nhanh như thế nào?
• Thay đổi bố cục tích lũy: trang có ổn định sau khi hiển thị hay nội dung có di chuyển không?

Google thu thập dữ liệu các chỉ số này từ người dùng thực như một phần của Báo cáo trải nghiệm người dùng Chrome. Các trang thực hiện tốt các số liệu này xếp hạng cao hơn trong kết quả tìm kiếm.

Tăng tốc độ load trang

Tháng 4 năm 2022, Chrome đã phát hành Priority Hints, một tính năng HTML mới cung cấp cho chủ sở hữu trang web cách đánh dấu các tài nguyên quan trọng nhất. Điều này đặc biệt hữu ích đối với những hình ảnh lớn.

Theo mặc định, tất cả các hình ảnh trên một trang được tải với mức độ ưu tiên thấp. Đó là bởi vì trước khi kết xuất trang ban đầu, trình duyệt không thể biết liệu phần tử hình ảnh sẽ kết thúc dưới dạng hình ảnh chính hay dưới dạng một biểu tượng nhỏ ở chân trang web.

Do đó, hình ảnh LCP thường được tải với mức độ ưu tiên thấp lúc đầu và sau đó chuyển sang mức độ ưu tiên cao sau đó. Điều đó có nghĩa là trình duyệt sẽ đợi lâu hơn trước khi bắt đầu tải hình ảnh.

Việc thêm thuộc tính fetchpriority="high" sẽ khắc phục sự cố này. Trình duyệt bắt đầu tải hình ảnh LCP ngay khi nó được phát hiện, khiến quá trình vẽ Nội dung lớn nhất diễn ra sớm hơn nhiều.

Chạy thử nghiệm tốc độ trang web chất lượng cao

Có rất nhiều công cụ đo lường tốc độ trang web miễn phí có sẵn. Tuy nhiên, nhiều công cụ dựa trên công cụ Lighthouse của Google sử dụng một thứ gọi là điều tiết mô phỏng, điều này có thể dẫn đến báo cáo số liệu không chính xác. Điều này cũng áp dụng cho công cụ PageSpeed ​​Insights của Google .

Bạn có thể sử dụng công cụ kiểm tra tốc độ trang web DebugBear miễn phí để nhận dữ liệu hiệu suất chính xác cho trang web của mình. Các báo cáo bao gồm cả kết quả thử nghiệm chi tiết trong phòng thí nghiệm và dữ liệu người dùng thực từ Báo cáo trải nghiệm người dùng Chrome (CrUX) .

Chỉ số Interaction to Next Paint (INP) (INP) mới

Google đã phát hành một chỉ số thử nghiệm mới có tên là Interaction to Next Paint (INP). Nó đo thời gian người dùng cần cập nhật sau khi người dùng tương tác với trang.

Tương tác của người dùng thường kích hoạt JavaScript để chạy trên trang, cập nhật HTML của trang. Sau đó, những thay đổi trang đó cần được trình duyệt hiển thị để hiển thị nội dung cập nhật cho người dùng.

Interaction to Next Paint (INP) tìm cách giải quyết hai hạn chế của chỉ số Độ trễ đầu vào đầu tiên:

FID không bao gồm thời gian xử lý đầu vào của người dùng

FID chỉ xem xét tương tác đầu tiên của người dùng

Hơn 90% trang web hiện hoạt động tốt trên chỉ số Độ trễ đầu vào đầu tiên, cao hơn nhiều so với trường hợp của hai Chỉ số quan trọng chính về trang web khác. Do đó, INP có thể thay thế Độ trễ đầu vào đầu tiên trong tương lai, vì nó cung cấp đánh giá tốt hơn về trải nghiệm người dùng của một trang web.

Hỗ trợ hình ảnh tốt hơn trong Safari

Tải xuống hình ảnh chiếm rất nhiều băng thông, vì vậy các nhà sản xuất trình duyệt liên tục làm việc trên các định dạng hình ảnh và tính năng nền tảng mới. Thật không may, phải mất một thời gian để các tính năng này được hỗ trợ đầy đủ trong tất cả các trình duyệt chính.

May mắn thay, đã có một số tiến bộ trong Safari vào năm ngoái. Safari đã bắt đầu hỗ trợ định dạng hình ảnh AVIF mới, nhỏ gọn hơn. Safari hiện hỗ trợ tải chậm hình ảnh gốc bằng cách sử dụng thuộc tính loading="lazy".

Xác định và loại bỏ các tài nguyên chặn hiển thị

Các tài nguyên chặn hiển thị có thể có tác động lớn đến tốc độ trang web của bạn. Nhiều kiểu CSS và yêu cầu JavaScript chặn hiển thị, nghĩa là không có nội dung nào hiển thị trên trang web của bạn cho đến khi các tệp này được tải xuống.

Để giúp chủ sở hữu trang web tối ưu hóa thời gian tải trang, Google đã bắt đầu sử dụng công cụ tốt hơn để báo cáo các tài nguyên chặn hiển thị. Ví dụ: tab Thông tin chi tiết về hiệu suất mới trong Chrome DevTools cho biết yêu cầu nào đang chặn hiển thị.