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 Chỉ số quan trọng chính của trang web và nâng cao các chỉ số kinh doanh chính.
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.
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 lại trải nghiệm toàn diện cho tất cả người dùng, YouTube đã bắt đầu cải thiện các chỉ số hiệu suất (chẳng hạn như Các chỉ số quan trọng chính của trang web) thông qua tính năng tải từng phần 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 ra rằng các chỉ số Core Web Vitals có rất nhiều điểm cần cải thiện, với chỉ số Nội dung lớn nhất hiển thị (LCP) có tốc độ trong khoảng từ 4 đến 6 giây trong một số trường hợp. Thời gian này cao hơn đáng kể so với mục tiêu là 2,5 giây.
Để 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 (Hiển thị nội dung đầu tiên) là 3,5 giây và LCP là 8,5 giây.
Để 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.
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.
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. Theo truyền thống, YouTube thường tối ưu hoá thời gian nhanh nhất trước khi video bắt đầu phát. Vì vậy, để cải thiện LCP, đội ngũ của YouTube 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.
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 xem xét 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 của YouTube chứa nhiều mô-đun được tải một cách nhanh chóng. Để 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úp 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ũ. Quá trình 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 phát) đã bị sử dụng quá mức thành phần theo thời gian.
Mỗi sự kiện di chuyển cảm ứng trên thanh tiến trình kích hoạt 2 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ế độ điều khiển mới được bổ sung theo thời gian, mô hình kiểm soát phi tập trung thường gây ra các phần phụ thuộc vòng tròn và tình trạng rò rỉ bộ nhớ, ảnh hưởng tiêu cực đến hiệu suất của trang xem.
Để 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. Việc 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 về 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ũ.
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 cải tiến về hiệu suất của trang web YouTube trong năm qua cũng đã 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 thành công của những nỗ lực này, chúng tôi dự định tiếp tục khám phá nhiều cách hơn nữa để 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.