Những tips tối ưu Core Web Vitals về trang web giúp gia tăng traffic

24/02/2023
0 bình luận
Đăng bởi Hoàng Nhi

Tips tối ưu Core Web Vitals sẽ giúp gia tăng trải nghiệm trên trang và giúp website xếp hạng cao hơn so với đối thủ cạnh tranh. Nếu bạn đang là nhà phát triển web và đang loay hoay trong việc xây dựng và đảm bảo các trang web hoạt động ổn định thì không thể bỏ qua bài viết dưới đây. Google đã chia sẻ các đề xuất Core Web Vitals mới nhất 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.

Điểm nổi bật

tip3

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

Google đã dành 1 năm để tìm ra các giải pháp quan trọng nhất về Core Web Vitals (kết quả của một quá trình nghiên cứu và tìm kiếm rất lâu các chỉ số đáng tin cậy về trải nghiệm người dùng)

Bài viết này, bachvietedu chia sẻ đến bạn những tips giúp tối ưu các chỉ số quan trọng về trang web khi mà thời gian của bạn có hạn

Google đã 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.

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

Trong suốt nhiều năm qua, 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 tôi nhận ra rằng việc bất kỳ ai cũng thực hiện được là điều khó trong 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 của trang web, thì việc tìm ra các lỗi mà trang web của bạn đang gặp phải là 1 thách thức.

Bạn có thể không biết bắt đầu từ đâu trong việc cải thiện Các chỉ số quan trọng về trang web. Trong một bài đăng trên blog, Google đã tập hợp 1 danh sách các đề xuất phù hợp với hầu hết các nhà phát triển web, áp dụng cho hầu hết mọi trang web và có tác động có ý nghĩa trong thời điểm hiện tại.

Dưới đây là những tips mà Google đã đề xuất:

tip4

Contents

Tối ưu hóa Paint có nội dung chính là hình ảnh (LCP)
Đảm bảo tài nguyên LCP được ưu tiên
Sử dụng Mạng phân phối nội dung (CDN) để giảm thời gian đọc lần đầu (TTFB)
Tối ưu hóa thay đổi bố cục tích lũy (CLS)
Đảm bảo các trang đủ điều kiện cho Bfcache

Tối ưu hóa Paint có nội dung chính là hình ảnh (LCP)

tip5

Chỉ số Largest Contentful Paint (LCP) báo cáo thời gian hiển thị của hình ảnh hoặc khối văn bản lớn nhất có thể nhìn thấy trong chế độ xem. 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 chỉ ra rằng chỉ có khoảng 1 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.

Đảm bảo dễ dàng tìm thấy tài nguyên LCP trong nguồn HTML
Theo web Almanac 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 của mình tải lên 1 cách nhanh chóng.

Có thể sẽ không đáp ứng được LCP của Google khi 1 trang chờ các tệp CSS (CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu HTML) hoặc JavaScript được tải xuống, phân tích cú pháp 1 cách đầy đủ và xử lý chúng trước khi hình ảnh có thể bắt đầu tải.

Theo nguyên tắc chung, nếu LCP là một hình ảnh, thì URL của hình ảnh phải liên quan từ nguồn HTML.

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

tip6

Ngoài việc tài nguyên LCP trong mã HTML được ưu tiên thì bạn không được trì hoãn bỏ qua 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ẻ <img> tiêu chuẩn. Nếu có một số thẻ <script> trong phần <head> của trang web bạn trước thẻ <img> thì điều này có thể làm chậm thời gian tải tài nguyên hình ảnh của bạn.

Bạn nên tránh bất kỳ các thao tác có thể làm giảm mức độ ưu tiên của hình ảnh LCP, chẳng hạn như thêm thuộc tính loading=”lazy”.

Khi sử dụng bất kỳ công cụ tối ưu hóa hình ảnh nào trong việc tự động áp dụng tải từng phần cho tất cả các hình ảnh thì bạn nên lưu ý.

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

top7

Mạng phân phối nội dung (CDN – Content Delivery Network là mạng lưới gồm nhiều Server (máy chủ) được triển khai tại nhiều trung tâm dữ liệu khác nhau). CDN giúp nhà cung cấp dịch vụ nội dung phục vụ user dịch vụ với tính sẵn sàng và ổn định cao hơn để giảm thời gian đọc lần đầu (TTFB

TTFB là từ viết tắt của Time To First Byte và là chỉ số đo lường thời gian bạn phải mất để trình duyệt của bạn nhận được byte đầu tiên. Đ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 sắp xếp nội dung từ 1 vị trí gần với người dùng của bạn và sử dụng bộ nhớ đệm cho những nội dung được yêu cầu thường xuyên.

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).

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

tip8

Sự thay đổi bố cục tích lũy là một chỉ số Core Web Vital tổng hợp tất cả các thay đổi bố cục trên một trang, ngoại trừ những thay đổi không phải do tương tác của người dùng, với một phép tính phụ thuộc vào tốc độ.

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.

Đặ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. Bạn phải xác định vị trí 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. 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. 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.

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

tip9

Bfcache là kỹ thuật cache lưu lại trạng thái của trang web hiện tại vào bộ nhớ khi người dùng điều hướng đến một trang mới. Bfcache giúp trình duyệt có tốc độ điều hướng nhanh, giảm thiểu mức sử dụng dữ liệu vì tài nguyên chỉ tải duy nhất trong lần đầu.

Các trình duyệt sử dụng 1 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.

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

Một 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ó đáp ứng vớ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ể.

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.

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.

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.

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.

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 hiệu quả trang web của mình.

Cùng chuyên mục