YouTube tải nặng như thế nào? • Kiến càng

Trong bài viết tăng tốc video YouTube nhúng trong WordPress, chúng ta đã biết YouTube tải nặng như thế nào rồi, nhưng đó chỉ là mô tả tổng quan mà thôi. Trong bài này chúng ta sẽ đi vào chi tiết, để biết cụ thể YouTube tải về những file gì, dùng làm gì và nó nặng bao nhiêu (tính theo KB).

Cách thử nghiệm là tôi tạo một trang HTML đơn giản, và trong trang đó tôi chỉ nhúng video YouTube, nhờ vậy công việc kiểm tra sẽ đơn giản hơn rất nhiều so với việc kiểm tra trên trang thông thường (cái sẽ lẫn lộn đủ thứ file từ các nguồn khác nhau chứ không còn chỉ riêng YouTube nữa).

Trang demo chỉ nhúng YouTube đặt ở liên kết này: https://static.kiencang.net/2020/video-nhung-youtube.html

Tôi sử dụng Tools Pingdom để kiểm tra các thành phần tải về, đây là công cụ có chất lượng tốt đi kèm giao diện trực quan rất dễ hiểu. Ngoài ra bạn có thể dùng công cụ dành cho nhà phát triển tích hợp sẵn trong trình duyệt Chrome để test (Ctrl + Shift + I > Network > Disable cache).

Đầu tiên, tôi giả lập truy cập từ khu vực châu Á, mà cụ thể ở đây là Nhật Bản:

Kết quả như sau:

Mục lục

A. Phân loại theo dung lượng của các kiểu file

Bạn tập trung vào 5 mục chính, có thể thấy ngay YouTube chủ yếu tải về:

JavaScript với hơn 500 KB
Font với hơn 50 KB
CSS với hơn 40 KB
Ảnh với gần 40 KB
XHR với hơn 3 KB

Tổng cộng YouTube tải khoảng 630 KB dữ liệu về, trong đó chủ yếu là JavaScript. Tất cả chúng có thể được coi là tài nguyên của bên thứ ba. Riêng cái HTML là của trang, không phải của YouTube, nên không được tính vào đây.

B. Phân loại theo số lượng request của các kiểu file

Ở đây chúng ta thấy như sau:

Số lượng request JavaScript là 5
Số lượng request font là 4
Số lượng request XHR là 2
Số lượng request ảnh là 2
Số lượng request CSS là 1

JavaScript vẫn chiếm số lượng request nhiều nhất, nhưng quả là khó hiểu khi YouTube cần đến 4 request dành cho font tùy chỉnh.

C. Kích cỡ dữ liệu theo tên miền

Ở đây chúng ta thấy video YouTube gửi yêu cầu đến các tên miền với kích cỡ như sau:

YouTube.com với hơn 550 KB dữ liệu (các file JavaScript và CSS được tải từ máy chủ gốc của YouTube)
fonts.gstatic.com với gần 50 KB dữ liệu (font Roboto cho video)
i.ytimg.com với hơn 30 KB dữ liệu (ảnh đại diện video)
yt3.ggpht.com với 4,1 KB dữ liệu (ảnh đại diện kênh)
googleads.g.doubleclick.net với chưa đầy 0,5 KB dữ liệu (quảng cáo trên video nếu có)
static.doubleclick.net với chưa đầy 0,5 KB dữ liệu (quảng cáo trên video nếu có)

Bạn có thể sử dụng thông tin trên để thực hiện preconnect (kết nối sớm) với các tên miền nhằm cải thiện ít nhiều tốc độ trang.

D. Số lượng request theo tên miền cụ thể

Ở đây chúng ta thấy:

youtube.com với 6 request
fonts.gstatic.com với 4 request
i.ytimg.com với 1 request (một ảnh)
yt3.ggpht.com với 1 request (một ảnh)
googleads.g.doubleclick.net với 3 request
static.doubleclick.net với 1 request

Khi tôi kiểm tra lại từ cùng một địa điểm thì thấy kết quả không thay đổi. Tuy nhiên khi tôi thử chuyển sang địa điểm khác, kết quả lại thay đổi rất nhiều về mặt dung lượng tải về, chẳng hạn vẫn trang trên nhưng địa điểm chọn là Hoa Kỳ (thủ đô Washington), kết quả sẽ như sau:

Thay đổi tập trung ở phần script, và sự khác biệt dữ liệu nằm ở tên miền YouTube.com:

Thú vị là, ngoại trừ Washington, các địa điểm khác không thay đổi lượng dữ liệu tải về (hoặc chỉ rất ít), tôi hiện không rõ vì sao.

E. Tên file cụ thể và mục đích của nó

Ở ngay bên dưới là bảng waterfall để bạn biết cụ thể các file tải về, thời điểm chúng bắt đầu tải, cũng như khoảng thời gian cần thiết để hoàn tất tải.

Bạn có thể thấy:

Đầu tiên tải trang HTML (không liên quan đến YouTube): https://static.kiencang.net/2020/video-nhung-youtube.html (1,1 KB)
Tải một phần video nhúng: https://www.youtube[.]com/embed/aZDaxptvefs (12,3 KB)
Tải CSS về: https://www.youtube.com/s/player/d9b4c6ee/www-player-webp.css (42,9 KB)
Tải JS về: https://www.youtube.com/yts/jsbin/www-embed-player-vflmHus-i/www-embed-player.js (44 KB)
Tải JS khác về: https://www.youtube.com/s/player/d9b4c6ee/player_ias.vflset/en_US/base.js (422,5 KB)
Tải DoubleClick: https://googleads.g.doubleclick.net/pagead/id (1,4 KB)
Tải JS từ DoubleClick: https://static.doubleclick.net/instream/ad_status.js (1,0 KB)
Tải JS từ YouTube: https://www.youtube.com/s/player/d9b4c6ee/player_ias.vflset/en_US/remote.js(30,8 KB)
Tải JS nữa từ YouTube: https://www.youtube.com/s/player/d9b4c6ee/player_ias.vflset/en_US/embed.js (7,7 KB)
Tải ảnh đại diện của kênh: https://yt3.ggpht.com/-aAr4mX1N2EE/AAAAAAAAAAI/AAAAAAAAAAA/GBYgkXHmrCA/s68-c-k-no-mo-rj-c0xffffff/photo.jpg (4,8 KB)
Tải ảnh đại diện của video: https://i.ytimg.com/vi/aZDaxptvefs/sddefault.jpg (34,8 KB)
Tải font Roboto: https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 (16,5 KB)
Tải font Roboto tiếp: https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2 (16,1 KB)
Tiếp tục tải font Roboto: https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2 (12,7 KB)
Lặp lại tải từ DoubleClick: https://googleads.g.doubleclick.net/pagead/id (1,4 KB)
Tải từ DoubleClick: https://googleads.g.doubleclick.net/pagead/id?slf_rd=1 (2,0 KB)
Lặp lại tải font Roboto: https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2 (5,9 KB). Tôi không rõ vì sao YouTube phải tải nhiều font Roboto về đến thế!
Tải icon của trang (không liên quan đến YouTube): https://static.kiencang.net/2020/favicon.ico (chưa đến 1KB)

Trong khi chắc chắn ảnh đại diện kênh và ảnh đại diện video sẽ có đường dẫn riêng cũng như dung lượng tùy thuộc vào từng video cụ thể, chúng ta hiện không rõ các video khác nhau có sử dụng chung nguồn JS và CSS không, khả năng cao là có, nhưng chúng ta vẫn cần kiểm tra bằng các video nhúng đơn giản khác.

Tôi tạo một trang HTML khác tương tự nhưng đi kèm video khác cùng thuộc một kênh với video trước: https://static.kiencang.net/2020/video-nhung-cung-kenh.html

Kết quả kiểm tra cho thấy, video cùng kênh tải về các file CSS, JS và CSS tương tự, tất nhiên ảnh đại diện kênh thì vẫn thế, nhưng ảnh đại diện video thì khác.

Tiếp theo tôi tạo một trang HTML cũng với video nhúng, nhưng lần này là khác kênh: https://static.kiencang.net/2020/video-nhung-khac-kenh.html

Kết quả kiểm tra cho thấy, mặc dù video khác kênh, tất cả các file CSS, JS và font đều có cùng link, điều này rõ ràng tạo khả năng cache rất lớn, giúp tăng tốc YouTube, vì xác suất ai đó trước khi vào trang web của bạn có xem video YouTube thời gian gần đây không hề nhỏ (YouTube.com là website phổ biến thứ 3 tại Việt Nam, theo thống kê của SimilarWeb).

Điều đáng mừng là file JS nặng nhất và file CSS có thời gian cache lên đến 1 năm:

thời gian cache của các file năng trên YouTube — Hãy thử tưởng tượng ai đó 1 năm gần đây chưa hề xem YouTube, hẳn nhiên con số này không lớn, nói cách khác các tài nguyên nặng cần phải tải thường đã được cache sẵn rồi.

Như vậy là các plugin lazy load video, chẳng hạn như WP YouTube Lyte trên thực tế sẽ có ít tác dụng hơn tiềm năng mà trước đó ta gán cho nó. Dù vậy chắc chắn nó vẫn cải thiện tốc độ trang (đặc biệt là trên máy bàn), bởi vì thời gian tải tài nguyên chỉ là một phần vấn đề trong chuyện trang bị chậm, thời gian tải trang kéo dài còn do nó phải thực thi các đoạn mã nữa.

Việc đường link các tài nguyên của YouTube trong URL có các giá trị như d9b4c6ee, KFOmCnqEu92Fr1Mu7GxKOzY, yt3 cho thấy khả năng cao là các tài nguyên này được lưu trữ theo khu vực để tăng tốc (CDN) hoặc/và trên các phiên bản khác nhau tương ứng với từng khu vực.

P/S:

Bạn có thể tìm hiểu thêm kiến thức nền tảng về lazy load video ở đây.
Ngoài ra thư viện lazysizes cũng chứng tỏ là một công cụ tốt để tải lười video YouTube.

Kết luận

Video YouTube tải về một lượng tài nguyên không hề nhỏ, gồm cả JS, CSS, font và có thể là mã nhúng quảng cáo của video. Những thứ này có khả năng là nguồn chặn hiển thị đáng kể, làm chậm trang. Bạn dễ dàng nhận thấy điều này khi xem một trang nhúng video YouTube, và một trang không nhúng video YouTube, tốc độ khác biệt là đáng kể, cả về thực tế, lẫn kiểm tra thông qua các công cụ như Google PageSpeed Insights (các công cụ kiểm tra thường mô phỏng lượt truy cập lần đầu như kiểu trình duyệt đã xóa hết cache, do vậy điểm số thường tệ hơn so với thực tế tốc độ của người dùng). Nhưng như đã nói, may mắn là YouTube rất phổ biến, thời gian cache file trên trình duyệt lại lâu, nên ảnh hưởng tiêu cực đến tốc độ được giảm đi rất nhiều.

Bonus

Tôi đã nói về chuyện video nhúng sử dụng CDN sẽ nhanh và nhẹ hơn khá nhiều, giải thích cũng dễ hiểu, lý do là vì trình duyệt không cần phải tải cả đống CSS, JS, ảnh và font nữa. Tuy nhiên tôi muốn bạn thấy một cái gì đó trực quan và dễ kiểm tra, do vậy tôi sẽ sử dụng một đoạn video ngắn tự host (*), rồi dùng thẻ <video> để nhúng xem nó có nhẹ hơn cũng video đó mà up lên YouTube hay không.

(*): Tôi tự host là vì video rất nhẹ và quan trọng hơn trang này không dùng CDN, nếu bạn host video trên CDN bao giờ cũng tốt hơn nhé, vấn đề chỉ là chi phí thôi (BunnyCDN có khả năng là dịch vụ CDN cho video có giá thân thiện nhất vào thời điểm này).

OK, giờ là link bài viết có chứa video nhúng tự host: https://static.kiencang.net/2020/video-nhung-tu-host.html

Còn đây là video thông qua YouTube: https://static.kiencang.net/2020/video-nhung-tu-youtube-mp4.html

Và đây là các kết quả tương ứng chấm bằng công cụ Google PageSpeed Insights, tự host được 100 điểm: