Core Web Vitals: Hướng dẫn cải thiện tốc độ trang

• 12/10/2022
• Admins
• Technical SEO

Chắc bạn đã nghe đến thuật toán Google Page Experience (hay còn gọi là: thuật toán Trải nghiệm trang) mới được update gần đây. Chúng sẽ mang nhiều loại chỉ số gọi chung là Core Web Vitals để tạo thành một yếu tố xếp hạng trải nghiệm trang. 

Core Web Vitals là gì?

Core Web Vitals cho trải nghiệm người dùng như sau:

• Largest Contentful Paint (LCP – Thời gian hiển thị nội dung lớn nhất): Chỉ số này đo thời gian để nội dung chính trên trang web xuất hiện với người dùng. Google khuyến nghị LCP dưới 2,5 giây.
• First Input Delay (FID – Thời gian phản hồi lần tương tác đầu tiên): FID đo thời gian phản hồi của trang web của bạn khi người dùng tương tác với trang lần đầu tiên. Điều này bao gồm các lần nhấp vào liên kết, các lần nhấn vào nút và các hành động JavaScript tùy chỉnh. Google đề xuất FID dưới 100 mili giây.
• Cumulative Layout Shift (CLS – Điểm số tổng hợp về mức thay đổi bố cục): Tính năng này đo lường số lần thay đổi bố cục di chuyển bất ngờ nội dung chính của trang web. Những thay đổi này ảnh hưởng đến khả năng đọc nội dung và tương tác với trang của người dùng. Google đề xuất điểm CLS từ 0,1 trở xuống.

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

Google đã kết hợp Core Web Vitals vào một số công cụ hàng đầu dành cho nhà phát triển và quản trị viên web, bắt đầu với Báo cáo trải nghiệm người dùng Chrome .

Báo cáo này thu thập dữ liệu thực từ người dùng khi họ duyệt web, sau đó chia sẻ dữ liệu đó với các nhà phát triển thông qua các công cụ như PageSpeed ​​Insights và Google Search Console.

PageSpeed ​​Insights phân tích hiệu suất của trang web của bạn và đưa ra đề xuất về cách tăng tốc độ của nó. Nó đánh giá cả ba Core Web Vitals trên cả trình duyệt dành cho thiết bị di động và máy tính để bàn. Dữ liệu trường đề cập đến dữ liệu người dùng thực từ Báo cáo trải nghiệm người dùng Chrome.

Bên trong Google Search Console, bạn sẽ tìm thấy Core Web Vitals cho các trang web của mình. Google Search Console sử dụng dữ liệu từ Báo cáo trải nghiệm người dùng Chrome để hiển thị cho bạn các vấn đề trên toàn bộ trang web của bạn.

Các Chrome Web Vitals Extension cho phép bạn xem Core Web Vitals khi bạn duyệt web hoặc khi bạn thực hiện chỉnh sửa các trang web của bạn.

Tiện ích mở rộng cũng có thể xem xét điểm số hiện tại của đối thủ cạnh tranh của bạn. Nó sử dụng thư viện web-vitals cùng với dữ liệu thực địa từ Báo cáo trải nghiệm người dùng Chrome.

Mỗi công cụ này cho phép bạn xem LCP, FID và CLS cho trang web của mình. Các trang web có quá ít lưu lượng truy cập có thể bị thiếu một số chỉ số, đáng chú ý nhất là bên trong Google Search Console.

Bạn có thể xem Core Web Vitals của mình cho cả trình duyệt trên máy tính để bàn và thiết bị di động, nhưng bạn sẽ cần tạo một dự án cho từng thiết bị. Khi bạn chạy lại kiểm tra của mình, công cụ sẽ trả về bất kỳ thay đổi nào đối với các chỉ số quan trọng của bạn kể từ lần kiểm tra cuối cùng. Điều này có thể hữu ích nếu bạn đang cập nhật nhiều trang cùng một lúc để tăng hiệu suất.

Tại sao Core Web Vitals lại quan trọng?

Google đã chính thức thêm Core Web Vitals vào thuật toán tìm kiếm của mình. Bản cập nhật trải nghiệm trang đầy đủ đã hoàn tất vào trước tháng 8 năm 2021 .

Việc cải thiện LCP, FID và CLS của bạn có thể ảnh hưởng tích cực đến người dùng và thứ hạng của bạn trên các trang kết quả tìm kiếm trên điện thoại di động. Sự gia tăng thậm chí một vị trí trên trang đầu tiên của kết quả tìm kiếm có thể dẫn đến lượng truy cập tăng lên đáng kể.

Trải nghiệm người dùng cũng vậy. Nếu bạn có thể cải thiện trải nghiệm người dùng, điều đó có thể dẫn đến sự gia tăng đáng kể trong kinh doanh từ các lượt giới thiệu, đánh giá truyền miệng tích cực và việc kinh doanh lặp lại.

Cung cấp trải nghiệm người dùng kém dưới dạng trang web tải chậm có thể dẫn đến việc tăng tỷ lệ thoát không thuận lợi. Tỷ lệ thoát cao hơn có thể có nghĩa là mọi người đang rời khỏi trang web của bạn mà không cần cuộn, nhấp chuột hoặc quan trọng hơn là chuyển đổi.

Google nhận thấy rằng tỷ lệ thoát cho một trang web mất từ ​​một đến năm giây để tải tăng 90%.

Làm thế nào để cải thiện Core Web Vitals của web

Bây giờ bạn đã biết Core Web Vitals là gì và cách đo lường chúng trên trang web của mình, hãy xem một số đề xuất về việc cải thiện chúng và trải nghiệm người dùng của bạn.

Mức độ kiểm soát mà bạn có đối với trang web và máy chủ của mình phụ thuộc vào nền tảng bạn sử dụng cho trang web của mình (WordPress, Shopify, v.v.) và công ty lưu trữ web của bạn.

Cách cải thiện Largest Contentful Paint (LCP)

Google cung cấp một số mẹo để tối ưu hóa trang web của bạn và cải thiện chỉ số Sơn có nội dung lớn nhất cho các trang web của bạn. Bắt đầu với máy chủ web của bạn. Nếu bạn đang gặp phải sự chậm trễ nghiêm trọng, có thể đã đến lúc nâng cấp lưu trữ web của bạn từ máy chủ dùng chung lên máy chủ chuyên dụng.

Xem xét bất kỳ quy trình nào có thể đang chạy trên trang web của bạn có thể được tắt hoặc được tối ưu hóa tốt hơn cho hiệu suất. Ví dụ: trên trang web WordPress, bạn có thể giảm số lượng quy trình được xử lý bởi cơ sở dữ liệu của mình bằng cách xóa các plugin lỗi thời hoặc không sử dụng.

Mẹo thứ hai do Google cung cấp là sử dụng Mạng phân phối nội dung (CDN). Dịch vụ CDN đôi khi được bao gồm với các gói lưu trữ cấp doanh nghiệp.

Nếu không, bạn có thể tìm đến các dịch vụ như Google Cloud hoặc Cloudflare để tăng thời gian tải bằng cách phân phối nội dung của bạn trên các máy chủ trên toàn cầu. Các dịch vụ CDN đảm bảo trang web của bạn tải nhanh chóng, bất kể người dùng máy chủ web của bạn ở bao xa.

Tiếp theo, lưu nội dung của bạn vào bộ nhớ cache để các trang HTML được phân phát bộ nhớ cache trước. Khi nội dung HTML tĩnh của bạn được lưu vào bộ nhớ đệm, nó không phải được tải mỗi khi người dùng truy cập trang web của bạn.

Chủ sở hữu trang web WordPress có thể sử dụng các plugin bộ nhớ đệm như W3 Total Cache hoặc WP Fastest Cache để tự động lưu trữ nội dung của bạn để tải nhanh hơn.

Nếu bạn sử dụng dịch vụ khác, dịch vụ đó có thể có cài đặt bộ nhớ đệm mà bạn có thể định cấu hình để lưu vào bộ đệm nội dung của mình. Lưu ý rằng các dịch vụ bộ nhớ đệm không thể xử lý các yêu cầu máy chủ từ các dịch vụ bên thứ ba như Facebook.

Kết nối trước cũng có thể cải thiện tốc độ tải. Đây là những thứ cần thiết khi bạn đang tải nội dung có nguồn gốc từ một miền không phải của bạn. Thay vì tải các mục mới từ các miền khác trên toàn trang, hãy sử dụng kết nối trước như sau trong phần HEAD của HTML của trang web của bạn:

< link rel=”preconnect” href=”http://domain.com” >

< link rel=”dns-prefetch” href=”http://domain.com” >

Bằng cách thiết lập trước các kết nối này, trang của bạn sẽ không phải dừng lại ở phần nội dung chính được tải một phần để cung cấp hình ảnh hoặc các tài nguyên khác cho khách truy cập trang web của bạn.

Bạn cũng có thể tải trước các tài nguyên bên ngoài như CSS và JavaScript bằng mã sau:

< link rel=”preload” as=”style” > href=”style.css” >

Điều này sẽ đảm bảo chúng được tải ngay từ đầu và tránh ngăn nội dung tải đầy đủ.

Các cách khác để tối ưu hóa cả CSS và JavaScript bao gồm “thu nhỏ” (loại bỏ các ký tự không cần thiết) khỏi các biểu định kiểu và tập lệnh, xóa mã không sử dụng và di chuyển mã không cần thiết để tải trang web ban đầu sang tài nguyên được tải trước. Đối với mã quan trọng nhất, hãy xem xét thêm nó trực tuyến.

Google khuyến nghị CSSnano và csso để giảm thiểu CSS và UglifyJS để giảm thiểu JavaScript. Bạn cũng có thể rút gọn HTML bằng Trình thu nhỏ HTML .

Google Chrome DevTools có tính năng Phạm vi phân tích việc sử dụng CSS và JavaScript trên trang của bạn. Nó có thể xác định mã có thể được tải xuống tài nguyên được tải trước, giả sử rằng nó không được thứ gì đó trong ngăn xếp công nghệ của bạn sử dụng.

Sở giao dịch đã ký (SXG) cho phép các trang web xác nhận nội dung được phân phối từ miền của họ thông qua bên thứ ba. Google hợp tác với Cloudflare để tạo URL thực AMP, cho phép nhà xuất bản hiển thị URL gốc của nội dung của họ trên nội dung AMP từ kết quả dựa trên tìm kiếm của Google. Các trang web nhận được lưu lượng truy cập từ tìm kiếm sẽ thấy LCP tăng sau khi triển khai SXG.

Các cách bổ sung bạn có thể cải thiện LCP của mình là tối ưu hóa và nén bất kỳ tệp văn bản, hình ảnh, video và phần tử khối nào được sử dụng trên các trang web của bạn. Xem xét các hình ảnh được chèn trong HTML trên trang cũng như các hình ảnh được sử dụng trong nền hoặc các phần tử thiết kế của tệp CSS hoặc chủ đề của bạn.

Cách cải thiện First Input Delay (FID)

Cải thiện thời gian Trì hoãn Đầu vào Đầu tiên cho trang web của bạn dựa vào việc tối ưu hóa JavaScript của bạn và việc sử dụng các tập lệnh của bên thứ ba. Cái sau thường tham chiếu đến các công cụ phân tích trang web và bất kỳ mã nào yêu cầu tập lệnh từ một trang web khác.

Như đã đề cập trước đó, bạn có thể tối ưu hóa việc sử dụng JavaScript bằng cách rút gọn (loại bỏ các ký tự không cần thiết) khỏi các tập lệnh, xóa mã không sử dụng và di chuyển mã không cần thiết để tải trang web ban đầu sang tài nguyên được tải trước.

Sử dụng tính năng Phạm vi của Google Chrome DevTools để xác định mã có thể được tải xuống tài nguyên được tải trước.

Google đề xuất UglifyJS để giảm thiểu JavaScript. Bạn cũng có thể rút gọn HTML bằng Trình thu nhỏ HTML và CSS với CSSnano và csso .

Bạn có thể tìm hiểu thêm về các chi tiết kỹ thuật đằng sau API thời gian sự kiện phân tích độ trễ tương tác của người dùng trong báo cáo của Nhóm cộng đồng W3C.

Cách cải thiện Cumulative Layout Shift (CLS)

Để cải thiện điểm CLS của các trang web của bạn, bạn cần cho trình duyệt biết có bao nhiêu không gian để cung cấp cho các phần tử khi chúng đang tải. Bạn có thể làm điều này bằng cách thêm các thuộc tính kích thước cụ thể vào hình ảnh và video.

Ngoài ra, bạn có thể sử dụng các hộp tỷ lệ thân thiện với khía cạnh trong CSS. Cả hai đều sẽ đạt được mục tiêu mong muốn là ngăn chặn sự thay đổi bất ngờ của nội dung khi tải trang.

Sử dụng các chỉ báo trên trang cũng được khuyến nghị cho các phần tử sẽ thay đổi khi tải sau khi người dùng tương tác với trang. Việc cho người dùng biết rằng các phần tử đang tải trên trang có thể ngăn họ nhấp vào các phần tử đang dịch chuyển.

Trang web của bạn có hoạt động tốt?