Nhóm Google Chrome chia sẻ mẹo để tối ưu hóa các chỉ số quan trọng về trang web

Google chia sẻ các đề xuất Core Web Vitals mới phù hợp với hầu hết các nhà phát triển và áp dụng cho hầu hết các trang web.

Google đang chia sẻ một bộ đề xuất cập nhật để tối ưu hóa Các chỉ số quan trọng chính về trang web nhằm giúp bạn quyết định ưu tiên điều gì khi thời gian có hạn.

Các chỉ số quan trọng về trang web là ba chỉ số đo thời gian tải, tính tương tác và độ ổn định hình ảnh.

>> Tham khảo: Google Cloud ra mắt công cụ AI mới dành cho nhà bán lẻ.

Google coi những số liệu này là cần thiết để cung cấp trải nghiệm tích cực và sử dụng chúng để xếp hạng các trang web trong kết quả tìm kiếm của mình.

Trong suốt nhiều năm, Google đã đưa ra nhiều đề xuất để cải thiện điểm số Core Web Vitals.

Mặc dù mỗi đề xuất của Google đều đáng để thực hiện, nhưng công ty nhận ra rằng việc mong đợi bất kỳ ai thực hiện tất cả là không thực tế.

Nếu bạn không có nhiều kinh nghiệm trong việc tối ưu hóa hiệu suất trang web, thì việc tìm ra điều gì sẽ có tác động đáng kể nhất có thể là một thách thức.

Bạn có thể không biết bắt đầu từ đâu với thời gian hạn chế để dành cho việc cải thiện Các chỉ số quan trọng về trang web. Đó là lúc danh sách đề xuất sửa đổi của Google xuất hiện.

Trong một bài đăng trên blog, Google cho biết nhóm Chrome đã dành một năm để cố gắng xác định lời khuyên quan trọng nhất mà họ có thể đưa ra liên quan đến Core Web Vitals.

Nhóm đã tập hợp một danh sách các đề xuất phù hợp với hầu hết các nhà phát triển, áp dụng cho hầu hết các trang web và có tác động có ý nghĩa trong thế giới thực.

Đây là những gì nhóm Chrome của Google khuyên.

1. Tối ưu hóa Paint có nội dung lớn nhất (LCP)

Chỉ số Hình ảnh có nội dung lớn nhất (LCP) đo lường thời gian cần thiết để nội dung chính của trang hiển thị với người dùng.

Google tuyên bố rằng chỉ có khoảng một nửa số trang web đáp ứng ngưỡng LCP được đề xuất.

Đây là những đề xuất hàng đầu của Google để cải thiện LCP.

1.1. Đảm bảo dễ dàng tìm thấy tài nguyên LCP trong nguồn HTML

Theo Niên giám web năm 2022 của HTTP Archive, 72% trang web dành cho thiết bị di động có hình ảnh làm nội dung chính. Để cải thiện LCP, các trang web phải đảm bảo hình ảnh tải nhanh.

Có thể không đáp ứng được ngưỡng LCP của Google nếu một trang đang đợi các tệp CSS hoặc JavaScript được tải xuống, phân tích cú pháp và xử lý đầy đủ trước khi hình ảnh có thể bắt đầu tải.

Theo nguyên tắc chung, nếu phần tử LCP là một hình ảnh, thì URL của hình ảnh phải luôn có thể khám phá được từ nguồn HTML.

>> Tham khảo: Làm thế nào để viết một bài đăng trên blog thành công?

1.2. Đảm bảo tài nguyên LCP được ưu tiên

Ngoài việc có tài nguyên LCP trong mã HTML, Google khuyên bạn nên ưu tiên tài nguyên đó và không trì hoãn sau các tài nguyên ít quan trọng khác.

Ngay cả khi bạn đã đưa hình ảnh LCP của mình vào nguồn HTML bằng cách sử dụng thẻ tiêu chuẩn, nếu có một số thẻ.

1.3. Sử dụng Mạng phân phối nội dung (CDN) để giảm thời gian đọc lần đầu (TTFB)

Trình duyệt phải nhận byte đầu tiên của phản hồi tài liệu HTML ban đầu trước khi tải bất kỳ tài nguyên bổ sung nào.

Thước đo thời gian này được gọi là Thời gian đến Byte đầu tiên (TTFB) và điều này xảy ra càng nhanh thì các quy trình khác có thể bắt đầu càng sớm.

Để giảm thiểu TTFB, hãy phân phối nội dung của bạn từ một vị trí gần người dùng của bạn và sử dụng bộ nhớ đệm cho nội dung được yêu cầu thường xuyên.

Google cho biết cách tốt nhất để làm cả hai việc là sử dụng mạng phân phối nội dung (CDN).

1.4. Tối ưu hóa thay đổi bố cục tích lũy (CLS)

Thay đổi bố cục tích lũy (CLS) là số liệu được sử dụng để đánh giá mức độ ổn định của bố cục trực quan của trang web. Theo Google, khoảng 25% trang web không đáp ứng tiêu chuẩn được đề xuất cho số liệu này.

Đây là những đề xuất hàng đầu của Google để cải thiện CLS.

1.5. Đặt kích thước rõ ràng cho nội dung trên trang

Thay đổi bố cục có thể xảy ra khi nội dung trên trang web thay đổi vị trí sau khi tải xong. Điều quan trọng là phải đặt chỗ trước càng nhiều càng tốt để ngăn điều này xảy ra.

Một nguyên nhân phổ biến của việc thay đổi bố cục là hình ảnh không có kích thước, có thể giải quyết vấn đề này bằng cách đặt rõ ràng các thuộc tính chiều rộng và chiều cao hoặc các thuộc tính CSS tương đương.

Hình ảnh không phải là yếu tố duy nhất có thể gây ra sự thay đổi bố cục trên trang web. Nội dung khác, chẳng hạn như quảng cáo của bên thứ ba hoặc video nhúng tải sau có thể đóng góp vào CLS.

Một cách để giải quyết vấn đề này là sử dụng thuộc tính tỷ lệ khung hình trong CSS. Thuộc tính này tương đối mới và cho phép nhà phát triển đặt tỷ lệ khung hình cho hình ảnh và các phần tử không phải hình ảnh.

Việc cung cấp thông tin này cho phép trình duyệt tự động tính toán chiều cao phù hợp khi chiều rộng dựa trên kích thước màn hình, tương tự như cách tính toán đối với hình ảnh có kích thước xác định.

>> Tham khảo: Twitter cắt quyền truy cập vào các ứng dụng của bên thứ ba.

1.6. Đảm bảo các trang đủ điều kiện cho Bfcache

Các trình duyệt sử dụng một tính năng được gọi là bộ đệm ẩn tiến/lùi hoặc viết tắt là bfcache, cho phép các trang được tải ngay lập tức từ sớm hơn hoặc muộn hơn trong lịch sử trình duyệt bằng cách sử dụng ảnh chụp nhanh bộ nhớ.

Tính năng này có thể cải thiện đáng kể hiệu suất bằng cách loại bỏ sự thay đổi bố cục trong khi tải trang.

Google khuyên bạn nên kiểm tra xem các trang của bạn có đủ điều kiện cho bfcache hay không bằng cách sử dụng Chrome DevTools và tìm ra bất kỳ lý do nào khiến chúng không đủ điều kiện.

1.7. Tránh Ảnh động/Chuyển tiếp

Nguyên nhân phổ biến của việc thay đổi bố cục là hoạt ảnh của các thành phần trên trang web, chẳng hạn như biểu ngữ cookie hoặc biểu ngữ thông báo khác, trượt từ trên xuống hoặc dưới cùng.

Những hoạt ảnh này có thể đẩy nội dung khác ra khỏi đường đi, ảnh hưởng đến CLS. Ngay cả khi chúng không hoạt động, việc tạo hoạt ảnh cho chúng vẫn có thể ảnh hưởng đến CLS.

Google cho biết các trang tạo hoạt ảnh cho bất kỳ thuộc tính CSS nào có thể ảnh hưởng đến bố cục có khả năng có CLS “tốt” thấp hơn 15%.

Để giảm thiểu điều này, tốt nhất bạn nên tránh tạo hoạt ảnh hoặc chuyển đổi bất kỳ thuộc tính CSS nào yêu cầu trình duyệt cập nhật bố cục trừ khi nó phản hồi đầu vào của người dùng, chẳng hạn như một lần nhấn hoặc nhấn phím.

Bạn nên sử dụng thuộc tính biến đổi CSS cho các hiệu ứng chuyển tiếp và hoạt ảnh khi có thể.

2. Tối ưu hóa độ trễ đầu vào đầu tiên (FID)

First Input Delay (FID) là số liệu đo lường tốc độ phản hồi của trang web đối với các tương tác của người dùng.

Mặc dù hầu hết các trang web hoạt động tốt trong lĩnh vực này, nhưng Google tin rằng vẫn còn chỗ để cải thiện.

Chỉ số mới của Google, Tương tác với Sơn tiếp theo (INP), là một thay thế tiềm năng cho FID và các đề xuất được cung cấp bên dưới có liên quan đến cả FID và INP.

2.1. Tránh hoặc chia nhỏ các nhiệm vụ dài

Tác vụ là bất kỳ công việc rời rạc nào mà trình duyệt thực hiện, bao gồm kết xuất, bố cục, phân tích cú pháp, biên dịch và thực thi tập lệnh.

Khi các tác vụ mất nhiều thời gian, hơn 50 mili giây, chúng sẽ chặn luồng chính và khiến trình duyệt khó phản hồi nhanh các thông tin đầu vào của người dùng.

Để tránh điều này, sẽ rất hữu ích nếu bạn chia nhỏ các tác vụ dài thành các tác vụ nhỏ hơn bằng cách tạo cho luồng chính nhiều cơ hội hơn để xử lý công việc quan trọng mà người dùng có thể nhìn thấy.

Điều này có thể đạt được bằng cách thường xuyên nhường quyền cho luồng chính để kết xuất các bản cập nhật và các tương tác người dùng khác có thể diễn ra nhanh hơn.

>> Tham khảo: Hướng dẫn về dữ liệu có cấu trúc cho bài viết cập nhật của Google.

2.2. Tránh JavaScript không cần thiết

Một trang web có lượng JavaScript lớn có thể dẫn đến các tác vụ cạnh tranh để thu hút sự chú ý của luồng chính, điều này có thể ảnh hưởng tiêu cực đến khả năng phản hồi của trang web.

Để xác định và xóa mã không cần thiết khỏi tài nguyên trang web của bạn, bạn có thể sử dụng công cụ bảo hiểm trong Chrome DevTools.

Bằng cách giảm kích thước của các tài nguyên cần thiết trong quá trình tải, trang web sẽ tốn ít thời gian hơn để phân tích cú pháp và biên dịch mã, dẫn đến trải nghiệm người dùng liền mạch hơn.

2.3. Tránh cập nhật kết xuất lớn

JavaScript không phải là thứ duy nhất có thể ảnh hưởng đến khả năng phản hồi của trang web. Kết xuất có thể tốn kém và ảnh hưởng đến khả năng phản hồi đầu vào của người dùng của trang web.

Tối ưu hóa công việc dựng hình có thể phức tạp và phụ thuộc vào mục tiêu cụ thể. Tuy nhiên, có một số cách để đảm bảo rằng các bản cập nhật hiển thị có thể quản lý được và không biến thành các tác vụ dài.

Google khuyến nghị như sau:

• Tránh sá»­ dụng requestAnimationFrame() để thá»±c hiện bất kỳ công việc không trá»±c quan nào.
• Giữ kích thước DOM của bạn nhỏ.
• Sá»­ dụng ngăn chặn CSS.

3. Tổng kết

Core Web Vitals là một số liệu quan trọng để cung cấp trải nghiệm người dùng tích cực và xếp hạng trong kết quả tìm kiếm của Google.

Mặc dù tất cả các đề xuất của Google đều đáng để triển khai nhưng danh sách ngắn gọn này là thực tế, có thể áp dụng cho hầu hết các trang web và có thể có tác động có ý nghĩa.

Điều này bao gồm sử dụng CDN để giảm TTFB, đặt kích thước rõ ràng cho nội dung trên trang để cải thiện CLS, làm cho các trang đủ điều kiện cho bfcache và tránh JavaScript cũng như hoạt ảnh/chuyển tiếp không cần thiết cho FID.

Bằng cách làm theo các đề xuất này, bạn có thể tận dụng thời gian của mình tốt hơn và tận dụng tối đa trang web của mình.