Xây dựng một môi trường web tốt đẹp hơn: YouTube nhanh hơn

Một nghiên cứu điển hình về những thay đổi mà nhóm web của YouTube đã thực hiện để cải thiện hiệu suất, tăng tỷ lệ đạt yêu cầu của Chỉ số quan trọng chính của trang web và nâng cao các chỉ số kinh doanh chính.

Sriram Krishnan
Sriram Krishnan

Nhóm Chrome thường nói về việc "xây dựng một web tốt hơn", nhưng điều đó có ý nghĩa gì? Trải nghiệm web phải nhanh, dễ tiếp cận và sử dụng các tính năng của thiết bị vào thời điểm người dùng cần nhất. Thử nghiệm sản phẩm trên chính mình là một phần văn hoá của Google. Vì vậy, nhóm Chrome đã hợp tác với YouTube để chia sẻ những bài học rút ra được trong quá trình này trong một loạt bài mới có tên "Xây dựng một trang web tốt hơn". Phần đầu tiên của loạt bài viết này sẽ đi sâu vào cách YouTube xây dựng một trải nghiệm web nhanh hơn.

PageSpeed Insights hiển thị dữ liệu Báo cáo trải nghiệm người dùng của Chrome.
Trang xem YouTube dành cho web dành cho thiết bị di động vượt qua ngưỡng Các chỉ số quan trọng về trang web.

Tại YouTube, hiệu suất liên quan đến tốc độ tải video và nội dung khác (chẳng hạn như nội dung đề xuất và bình luận) trên các trang web. Hiệu suất cũng được đo lường bằng tốc độ YouTube phản hồi các lượt tương tác của người dùng, chẳng hạn như lượt tìm kiếm, thao tác điều khiển trình phát, lượt thích và lượt chia sẻ.

Các thị trường đang phát triển như Brazil, Ấn Độ và Indonesia đóng vai trò quan trọng đối với YouTube trên web dành cho thiết bị di động. Vì nhiều người dùng ở những khu vực này có thiết bị chậm hơn và băng thông mạng bị hạn chế, nên việc đảm bảo trải nghiệm nhanh và liền mạch là một mục tiêu quan trọng.

Để mang đến trải nghiệm toàn diện cho tất cả người dùng, YouTube đã đặt mục tiêu cải thiện các chỉ số hiệu suất như Các chỉ số quan trọng về trang web thông qua tính năng tải lười và hiện đại hoá mã.

Cải thiện Các chỉ số quan trọng về trang web

Để xác định những khía cạnh cần cải thiện, nhóm YouTube đã sử dụng Báo cáo trải nghiệm người dùng trên Chrome (CrUX) để xem người dùng thực tế đang trải nghiệm trang xem video và trang kết quả tìm kiếm trên thiết bị di động như thế nào trong trường thực. Họ nhận thấy các chỉ số Core Web Vitals của mình còn nhiều điểm cần cải thiện, trong đó chỉ số Thời gian hiển thị nội dung lớn nhất (LCP) đạt 4-6 giây trong một số trường hợp. Mức này cao hơn đáng kể so với mục tiêu 2,5 giây.

Biểu đồ về FCP và LCP cho thấy tỷ lệ vượt qua của trang Xem trên YouTube cũng như nguồn gốc trên YouTube.

Để xác định những điểm cần cải thiện, họ đã sử dụng Lighthouse để kiểm tra các trang xem trên YouTube. Kết quả cho thấy điểm số Lighthouse (trong phòng thí nghiệm) thấp, với FCP (thời gian hiển thị nội dung đầu tiên) là 3,5 giây và LCP (thời gian hiển thị nội dung lớn nhất) là 8,5 giây.

Báo cáo Lighthouse cho YouTube dành cho thiết bị di động.
Để làm chuẩn vàng, Chrome đặt mục tiêu là 1,8 giây cho FCP và 2,5 giây cho LCP. FCP và LCP rõ ràng là màu vàng và đỏ ở mức 3,5 giây và 8,5 giây tương ứng.

Để tối ưu hoá FCP và LCP, nhóm YouTube đã thực hiện một số thử nghiệm, từ đó phát hiện ra hai điều quan trọng.

  1. Phát hiện đầu tiên là họ có thể cải thiện hiệu suất bằng cách di chuyển HTML cho Trình phát video lên trên tập lệnh giúp Trình phát video tương tác. Các thử nghiệm trong phòng thí nghiệm cho thấy việc này có thể cải thiện cả FCP và LCP từ 4,4 giây xuống còn 1,1 giây.

  2. Khám phá thứ hai là LCP chỉ xem xét hình ảnh áp phích của phần tử <video> chứ không xem xét các khung hình từ chính luồng video. Trước đây, YouTube thường tối ưu hoá để video bắt đầu phát nhanh nhất có thể. Vì vậy, để cải thiện LCP, nhóm này cũng bắt đầu tối ưu hoá tốc độ phân phối hình ảnh áp phích. Họ thử nghiệm một vài biến thể của hình ảnh áp phích và chọn hình ảnh có điểm số cao nhất trong thử nghiệm người dùng. Nhờ nỗ lực này, cả FCP và LCP đều cải thiện đáng kể, trong đó LCP trong trường hợp thực tế cải thiện từ 4,6 giây xuống còn 2,0 giây.

Xem Thử nghiệm LCP của trang dành cho web dành cho thiết bị di động, trong đó có nhóm đối chứng, thử nghiệm A (hình thu nhỏ của hình ảnh) và thử nghiệm B (hình thu nhỏ màu đen)
Trong phòng thí nghiệm, chúng tôi nhận thấy FCP và LCP cải thiện từ 4,4 giây xuống còn 1,1 giây sau khi thay đổi này được triển khai. Thử nghiệm A: Việc sử dụng hình thu nhỏ video thực tế hoạt động hiệu quả trên những trang mà video bắt đầu ở trạng thái tạm dừng, nhưng đối với các trang video tự động phát như trang xem, hình thu nhỏ video thực tế lại hoạt động kém hiệu quả trong các nghiên cứu về người dùng. Điều này cũng dẫn đến việc giảm số người dùng đang hoạt động. Thử nghiệm B: Việc sử dụng hình ảnh áp phích màu đen đồng nhất cho thấy kết quả tốt nhất trong các nghiên cứu về người dùng. Người dùng nhận thấy quá trình chuyển đổi từ màu đen sang khung hình đầu tiên của video mang lại trải nghiệm ít khó chịu hơn cho video tự động phát.
Hình thu nhỏ màu đen đã được triển khai trong phiên bản chính thức cho tất cả người dùng web trên thiết bị di động vào tháng 7 năm 2021, cho thấy sự cải thiện rõ rệt về FCP và LCP, như trong số liệu phân tích RUM ở trên.
Thẻ thông tin màu đen đã được triển khai trong phiên bản chính thức cho tất cả người dùng web trên thiết bị di động vào tháng 7 năm 2021, cho thấy sự cải thiện rõ rệt về FCP và LCP, như trong số liệu phân tích RUM ở trên.

Mặc dù những biện pháp tối ưu hoá này đã cải thiện LCP, nhưng nhóm nghiên cứu nhận thấy rằng định nghĩa hiện tại của chỉ số LCP chưa nắm bắt đầy đủ thời điểm "nội dung chính" của trang đã tải (đây là mục tiêu của LCP) từ góc độ người dùng.

Để giải quyết những vấn đề này, các thành viên của nhóm YouTube đã hợp tác với các thành viên của nhóm Chrome để tìm hiểu cách cải thiện chỉ số LCP nhằm giải quyết trường hợp sử dụng của họ. Sau khi cân nhắc khả thi và tác động của một vài lựa chọn, các nhóm đã đưa ra một đề xuất để xem xét thời gian vẽ khung hình đầu tiên của phần tử video làm đề xuất LCP.

Sau khi thay đổi này được áp dụng cho Chrome, nhóm YouTube rất mong tiếp tục công việc tối ưu hoá cho LCP. Phiên bản cập nhật của chỉ số này sẽ giúp các hoạt động tối ưu hoá này tác động trực tiếp hơn đến trải nghiệm của người dùng thực.

Mô-đun hoá bằng tính năng tải từng phần

Các trang YouTube chứa nhiều mô-đun được tải trước. Để tối ưu hoá cách hiển thị hơn 50 thành phần, nhóm đã tạo một thành phần cho bản đồ mô-đun JS để cho ứng dụng biết cần tải mô-đun nào. Bằng cách đánh dấu các thành phần là tải từng phần, các mô-đun JS sẽ tải sau, giảm thời gian tải ban đầu của trang và lượng Javascript không dùng đến được gửi đến ứng dụng.

Tuy nhiên, sau khi triển khai tính năng tải từng phần, nhóm nghiên cứu nhận thấy hiệu ứng thác nước rằng các thành phần tải từng phần và phần phụ thuộc của chúng sẽ tải vào thời điểm không tối ưu.

Để giải quyết vấn đề này, nhóm đã xác định tập hợp thành phần tối thiểu cần thiết trong một thành phần hiển thị và phân lô các thành phần đó trong một yêu cầu mạng duy nhất. Kết quả là cải thiện tốc độ trang, giảm thời gian phân tích cú pháp JavaScript và cuối cùng là cải thiện thời gian hiển thị ban đầu.

Quản lý trạng thái trên các thành phần

YouTube gặp vấn đề về hiệu suất do các chế độ điều khiển trình phát, đặc biệt là trên các thiết bị cũ. Phân tích mã cho thấy trình phát cho phép người dùng kiểm soát các tính năng như tốc độ phát và tiến trình đã trở nên quá phức tạp theo thời gian.

Trình phát và các nút điều khiển của YouTube được minh hoạ
Trình phát video trên YouTube cho phép người dùng kiểm soát tốc độ phát, theo dõi tiến trình, bỏ qua các phần và thực hiện các thao tác khác. Khi người dùng nhấn vào một nút điều khiển cụ thể, thay đổi về trạng thái phải được thông báo cho các nút điều khiển khác, ví dụ: người dùng nhấn vào thanh tiến trình phải được chia sẻ với các nút điều khiển như đầu phát, phụ đề, v.v.

Mỗi sự kiện di chuyển bằng thao tác chạm vào thanh tiến trình đã kích hoạt hai lần tính toán lại kiểu bổ sung và mất 21,17 mili giây trong quá trình chạy kiểm thử hiệu suất trong phòng thí nghiệm. Khi các chế độ kiểm soát mới được thêm vào theo thời gian, mô hình kiểm soát phân quyền thường gây ra các phần phụ thuộc vòng tròn và rò rỉ bộ nhớ, ảnh hưởng tiêu cực đến hiệu suất của trang xem.

Sự kiện 21,17 mili giây hiển thị trên Dòng thời gian hiệu suất.
Công cụ của Chrome cho nhà phát triển với hiệu suất chạy chậm CPU gấp 4 lần.

Để khắc phục các vấn đề do chế độ kiểm soát phân quyền, nhóm đã cập nhật giao diện người dùng của trình phát để đồng bộ hoá tất cả nội dung cập nhật, về cơ bản là tái cấu trúc trình phát thành một thành phần cấp cao nhất sẽ truyền dữ liệu xuống các thành phần con. Điều này đảm bảo chỉ có một chu kỳ cập nhật (hiển thị) giao diện người dùng cho mọi thay đổi trạng thái, loại bỏ các bản cập nhật theo chuỗi. Sự kiện di chuyển bằng thao tác chạm vào thanh tiến trình của trình phát mới không có tính năng tính toán lại kiểu trong quá trình thực thi JavaScript và hiện chỉ yêu cầu 25% thời gian của trình phát cũ.

Giảm thời gian trong các sự kiện hiển thị trên dòng thời gian hiệu suất.

Việc hiện đại hoá mã này cũng giúp cải thiện hiệu suất, chẳng hạn như cải thiện thời gian tải video trên các thiết bị cũ, giảm số lượt phát bị bỏ dở và giảm số lỗi không nghiêm trọng.

Kết quả và hoạt động tối ưu hoá

Nhờ những nỗ lực đầu tư của YouTube vào hiệu suất, các trang xem hiện tải nhanh hơn nhiều, trong đó 76% URL của trang web YouTube dành cho thiết bị di động hiện đã vượt qua ngưỡng chỉ số Core Web Vitals trong thực tế. Trên máy tính, LCP trong phòng thí nghiệm của trang xem đã giảm từ khoảng 4,6 giây xuống còn 1,6 giây. Hiệu suất tương tác và kết xuất của trang web, đặc biệt là trên trình phát video YouTube, giảm đến 75% thời gian thực thi JavaScript so với trước đây.

Những điểm cải tiến về hiệu suất của YouTube trên web trong năm qua cũng giúp cải thiện các chỉ số kinh doanh, bao gồm cả thời gian xem và số người dùng hoạt động hằng ngày. Dựa trên những nỗ lực thành công này, chúng tôi dự định tiếp tục tìm hiểu thêm nhiều cách để tối ưu hoá trong tương lai.

Xin cảm ơn đặc biệt Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra và cả nhóm YouTube và Chrome đã đóng góp cho công việc này.