Một nghiên cứu điển hình về những thay đổi mà nhóm Web YouTube đã thực hiện để cải thiện hiệu suất, tăng tỷ lệ vượt qua Các chỉ số quan trọng về trang web và tăng các chỉ số kinh doanh chính.
Nhóm Chrome thường nói về việc "xây dựng một trang web tốt hơn", nhưng điều đó có nghĩa là 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ị tại thời điểm người dùng cần nhất. Thử nghiệm nội bộ là một phần trong văn hoá của Google, vì vậy, nhóm Chrome đã hợp tác với YouTube để chia sẻ các bài học kinh nghiệm trong quá trình này trong loạt video mới có tên "Xây dựng web tốt hơn". Phần đầu của loạt video này sẽ đi sâu vào cách YouTube xây dựng trải nghiệm web nhanh hơn.
Xây dựng web nhanh hơn
Tại YouTube, hiệu suất liên quan đến tốc độ tải của video và các nội dung khác, chẳng hạn như nội dung đề xuất và bình luận, trên trang web. Hiệu suất cũng được đo lường bằng tốc độ phản hồi của YouTube với các tương tác của người dùng như tìm kiếm, điều khiển trình phát, thích và chia sẻ.
Các thị trường đang phát triển đang phát triển như Brazil, Ấn Độ và Indonesia đóng vai trò quan trọng đối với web của YouTube 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 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 hoà nhập cho mọi người dùng, YouTube bắt đầu tìm cách 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 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 các 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 của Chrome (CrUX) để xem trải nghiệm của người dùng thực tế trên các trang xem video và trang kết quả tìm kiếm trên thiết bị di động trong trường hợp này. Họ nhận ra rằng chỉ số Các chỉ số quan trọng về trang web của họ còn cần nhiều cải thiện, với chỉ số Thời gian hiển thị nội dung lớn nhất (LCP) có tốc độ 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 của họ.
Để xác định các khía cạnh cần cải thiện, họ đã chuyển sang kiểm tra Lighthouse, kiểm tra các trang xem trên YouTube và cho thấy điểm Lighthouse thấp (trong phòng thí nghiệm) có Thời gian hiển thị nội dung đầu tiên (FCP) là 3,5 giây và LCP là 8,5 giây.
Để tối ưu hoá FCP và LCP, nhóm YouTube đã tiến hành nhiều thử nghiệm, tạo ra hai khám phá lớn.
Khám phá đầu tiên là họ có thể cải thiện hiệu suất bằng cách di chuyển HTML của Trình phát video lên phía trên tập lệnh giúp Trình phát video có khả năng tương tác. Các thử nghiệm trong phòng thí nghiệm chỉ ra rằng điều này có thể cải thiện cả FCP và LCP từ 4,4 giây lên 1,1 giây.
Phát hiện thứ hai là LCP chỉ xem xét hình ảnh áp phích của phần tử
<video>chứ không phải khung hình của chính luồng video. YouTube thường tối ưu hoá để có thời gian nhanh nhất cho đến khi video bắt đầu phát. Vì vậy, để cải thiện LCP, nhóm 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 với một vài biến thể của hình ảnh áp phích và chọn ra biến thể có điểm số cao nhất trong thử nghiệm người dùng. Kết quả của công việc này là cả FCP và LCP đều cho thấy sự cải thiện rõ rệt, với LCP trường cải thiện từ 4,6 giây lên 2,0 giây.
Mặc dù những hoạt động tối ưu hoá này đã giúp cải thiện LCP, nhưng nhóm này nhận thấy rằng định nghĩa hiện tại về chỉ số LCP chưa được người dùng nắm bắt đầy đủ khi "nội dung chính" của trang đã tải xong (đây cũng là mục tiêu của LCP).
Để giải quyết những mối lo ngại này, các thành viên trong nhóm YouTube đã hợp tác với các thành viên của nhóm Chrome nhằm tìm hiểu những 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 tính khả thi và tác động của một số phương án, các nhóm đã đưa ra một đề xuất cân nhắc thời gian kết xuất khung hình đầu tiên của một thành phần video làm đề xuất về LCP.
Sau khi thay đổi này có hiệu lực trên Chrome, nhóm YouTube rất háo hức tiếp tục tối ưu hoá LCP. Phiên bản cập nhật của chỉ số này sẽ đồng nghĩa với việc những hoạt động tối ưu hoá này sẽ có tác động trực tiếp hơn đến trải nghiệm 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 kết xuất hơn 50 thành phần, đội ngũ này đã xây dựng một thành phần cho bản đồ mô-đun JS để máy khách 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à số lượng JavaScript không dùng đến được gửi đến máy khách.
Tuy nhiên, sau khi triển khai tính năng tải từng phần, nhóm phát triển nhận thấy hiệu ứng thác nước mà các thành phần tải từng phần và các phần phụ thuộc của các thành phần này sẽ tải ở thời điểm dưới mức 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 khung 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ả đã cải thiện được 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 kết xuất ban đầu.
Quản lý trạng thái trên các thành phần
YouTube gặp phải vấn đề về hiệu suất do các nút điều khiển trình phát, đặc biệt là trên các thiết bị cũ. Kết quả 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ị phân hoá quá mức theo thời gian.
Mỗi sự kiện di chuyển bằng thao tác chạm trên thanh tiến trình đã kích hoạt thêm 2 phép tính toán lại kiểu 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. Vì các biện pháp kiểm soát mới được bổ sung theo thời gian, mô hình kiểm soát phi tập trung thường sẽ 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.
Để khắc phục các vấn đề do quyền kiểm soát phi tập trung, đội ngũ phát triển đã cập nhật giao diện người dùng của người chơi để đồng bộ hoá tất cả các bản 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 cho các thành phần con. Việc này chỉ đảm bảo một chu kỳ cập nhật giao diện người dùng (hiển thị) cho mọi thay đổi về trạng thái, loại bỏ các quá trình cập nhật theo chuỗi. Sự kiện chạm di chuyển trên thanh tiến trình của người chơi mới không có tính toán lại định kiểu trong quá trình thực thi JavaScript và hiện chỉ yêu cầu 25% thời gian của người chơi cũ.
Việc hiện đại hoá mã này cũng giúp cải thiện thêm hiệu suất, chẳng hạn như giảm thời gian tải đồng hồ trên các thiết bị cũ, giảm số lượt phát bị bỏ ngang và giảm số lỗi không nghiêm trọng.
Kết luận
Nhờ được YouTube đầu tư vào hiệu suất, các trang xem tải nhanh hơn nhiều. 76% URL trang web dành cho thiết bị di động trên YouTube hiện đã vượt qua ngưỡng chỉ số Các chỉ số quan trọng về trang web trong lĩnh vực này. Trên máy tính, LCP của phòng thí nghiệm cho trang xem đã giảm từ khoảng 4,6 giây xuống còn 1,6 giây. Tương tác và hiệu suất hiển thị của trang web, đặc biệt là trên trình phát video YouTube, nhận thấy thời gian thực thi JavaScript ít hơn tới 75% so với trước đây.
Những cải tiến đối với 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 thành công của những nỗ lực này, chúng tôi dự định tiếp tục tìm hiểu nhiều cách tối ưu hoá hơn nữa trong tương lai.
Trong phần hai của loạt video này, "Xây dựng một trang web dễ tiếp cận", bạn sẽ tìm hiểu cách YouTube giúp người dùng trình đọc màn hình dễ tiếp cận trang web của họ hơn.
Chúng tôi xin gửi lời cảm ơn đặc biệt đến 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 vì những đóng góp của họ cho công việc này.