Categories Lazy load Tối ưu JavaScript

Cách tăng tốc tải video YouTube và Vimeo nhúng trong WordPress

Gần đây tôi có cơ hội làm việc với một website rất nặng video (compare.parts), các video này được host (lưu trữ) trên Vimeo, và được đặt trong màn hình đầu tiên, tại những vị trí thu hút của website (hero section). Yêu cầu của họ là chúng cần tải nhanh và bật tự động (autoplay).

Bạn có thể xem video đó ở đường link website mà tôi trích dẫn ở trên (cập nhật: hiện trang trên không nhúng video làm background nữa).

Với cách tối ưu hóa thích hợp, tôi đã đạt được số điểm 100/100 trên Google PageSpeed Insights.

điểm trên Google PageSpeed Insights

Nếu video mà bạn nhúng từ YouTube hoặc Vimeo đang làm chậm website, thì đây sẽ là hướng dẫn bạn nên đọc!


Tại sao video nhúng từ YouTube/Vimeo lại tải về chậm chạp?

Khi bạn nhúng video từ YouTube hoặc Vimeo, nó tạo một iframe và tải về vài tài nguyên.

Để hiểu rõ hơn vấn đề này, bạn có thể xem một số dữ liệu từ Pingdom và GTmetrix sau khi phân tích trang có video YouTube (kết quả hầu như tương tự nếu bạn sử dụng Vimeo).

báo cáo lỗi từ GTmetrix
JavaScript chặn hiển thị của video nhúng trên YouTube

Kích cỡ nội dung theo tên miền:

kích cỡ tải về theo tên miền
Hơn 500 KB được tải về từ YouTube

Các request từ YouTube:

các request từ YouTube
Các yêu cầu tải từ YouTube

Tôi hy vọng thông tin vừa xong giúp bạn hiểu rõ chuyện nhúng video làm chậm website như thế nào. Giờ chúng ta cùng xem một số giải pháp giúp tăng tốc video nhúng từ YouTube hoặc Vimeo trong WordPress.

P/S: Nhìn trên khía cạnh rộng lớn hơn thì câu chuyện video nhúng từ YouTube, Vimeo làm chậm website được xếp vào trong nhóm tài nguyên của bên thứ ba gây cản trở tốc độ.

Giải pháp #1: Loại bỏ video

Tôi chỉ đùa thôi!


Giải pháp #2: Lazy load và hiển thị ảnh xem trước

Giống như với lazy load ảnh, bạn cũng có thể lazy load video (bạn có thể tham khảo sâu thêm các kỹ thuật lazy load ảnh và video ở bài viết này). Khi làm như thế, chỉ một ảnh giữ chỗ (placeholder) sẽ được tải về. Tất cả những script cần thiết, iframe, video player, vân vân sẽ chỉ được tải sau khi người dùng click vào nút play.

Ưu điểm:

  • Vẫn giữ video của bạn trên YouTube và Vimeo;
  • Tiết kiệm chi phí RAM, băng thông và lưu trữ cho máy chủ gốc;
  • Bên thứ ba giúp bạn tối ưu bằng cách chuyển đổi tự động chất lượng và độ phân giải dựa trên thiết bị và tốc độ mạng.

Nhược điểm:

  • Không bật tự động;
  • Vẫn có thương hiệu của YouTube/Vimeo;
  • Cần thêm mã JavaScript để lazy load (khoảng 10 KB).

Làm thế nào để lazy load video YouTube/Vimeo trong WordPress?

Nếu bạn sử dụng plugin cache WP-Rocket, vào phần thiết lập Media và bật tùy chọn “Cho phép iframe và video / Enable for iframe and videos” và “Thay thế iframe YouTube bằng ảnh xem trước / Replace YouTube iframe with preview image” dưới mục lazy load.

Lazy load video trong plugin WP Rocket
WP-Rocket tăng tốc tải video YouTube

Nhưng nếu bạn không sử dụng WP Rocket, dưới đây là một vài plugin độc lập (tất cả đều miễn phí) bạn có thể dùng:

Về mặt cá nhân người dịch, tôi thích WP YouTube Lyte nhất (nó giúp cải thiện tốc độ tốt nhất), nhưng plugin này yêu cầu bạn phải tìm hiểu một chút về cách đăng ký API của YouTube để không làm ảnh hưởng đến SEO khi trì hoãn tải.


Giải pháp #3: Tự host lấy video

Upload video lên YouTube là lý tưởng nếu bạn có nhiều video trong một trang post/page và bạn đã có sẵn kênh YouTube cũng như có ý muốn phát triển người theo dõi kênh.

Dù vậy, nếu bạn sử dụng video chỉ cho các khu vực thu hút hoặc nội dung trong màn hình đầu tiên, thế thì giải pháp trên có thể không phải là biện pháp tốt nhất. Trực tiếp nhúng YouTube / Vimeo sẽ làm nó chậm hơn. Trong trường hợp như vậy, bạn có thể tự lưu trữ video trên host của bạn và nhúng chúng.

Bằng cách tự lưu trữ video trên host của mình, bạn có thể loại bỏ nỗi sợ hãi về chuyện “YouTube / Vimeo có thể xóa video của tôi trong tương lai?” PS: thực tế thì chuyện này cũng hiếm lắm, các nền tảng này chỉ xoá video khi bạn vi phạm quy tắc nào đấy, còn không thì thoải mái.

Ưu điểm:

  • Chạy video tự động;
  • Không cần dù chỉ một dòng mã JavaScript hoặc CSS nào;
  • Toàn quyền điều chỉnh, tùy biến video;
  • Lý tưởng cho việc dùng video làm background;
  • Không có thương hiệu bên ngoài (YouTube, Vimeo).

Nhược điểm:

  • Cần sử dụng CDN (phần lớn là mất phí);
  • Cần không gian để lưu trữ video (có thể trên server của bạn hoặc vùng lưu trữ CDN/sử dụng push zone);
  • Cùng file video sẽ được phân phối cho cả di động lẫn máy bạn, bất kể mạng nhanh hay chậm.

Cách tự host video trên WordPress đúng chuẩn

Bạn có thể nghe ở đâu đó nói rằng tự host video là ý tưởng tồi và bạn không bao giờ nên triển khai nó. Nhưng tôi cần phải khẳng định là nếu bạn làm điều này chính xác, thì chẳng có gì phải lo lắng cả.

Bước 1: Nén video

Có nhiều ứng dụng trực tuyến của bên thứ ba có khả năng nén video. Nhưng tôi sẽ gợi ý cách thức hiệu quả và đơn giản hơn, đó là tải video lên YouTube và tải nó xuống để dùng lại. Bạn sẽ có video được nén rất tốt! (một lưu ý nhỏ là điều này chỉ đúng nếu video của bạn vốn có chất lượng cao, còn không cách này sẽ làm giảm chất lượng của video đi đáng kể).

tải video lên YouTube
tải video xuống

Bước 2: Tải video của bạn lên & phục vụ nó cho người dùng thông qua CDN

Bạn có thể tải file video trực tiếp lên thư viện Media của WordPress và bật CDN. Nhưng tôi khuyên là không nên làm như thế, cách hay hơn là tải video lên CDN thông qua push zone (lưu trữ). Nhờ vậy bạn sẽ tiết kiệm được không gian lưu trữ của server (của bạn), tiết kiếm băng thông và sẽ dễ dàng hơn về sau nếu bạn cần chuyển website sang nhà cung cấp hosting khác (việc chuyển host sẽ nhanh và nhẹ nhàng đi rất nhiều nếu website của bạn không nặng).

Pull Zone: “Kéo” tài nguyên tĩnh từ website của bạn để cache nó & phục vụ nó từ mạng CDN. Lý tưởng cho các file nhỏ như CSS, JS, ảnh, vân vân;

Push Zone: Đây là khu vực cho phép bạn tải lên (“đẩy”) file trực tiếp lên, như cách bạn làm với tài khoản hosting thông thường, sau đó kết nối với pull zone. Lý tưởng cho các file có kích cỡ lớn (trên 10 MB).

Có nhiều dịch vụ CDN có chức năng push zone. Dịch vụ tôi ưa thích là BunnyCDN. Máy chủ của nó được thiết kể để lưu trữ và phân phối video một cách trực tiếp. Dịch vụ của họ rất tốt và có giá rẻ.

Vào website của BunnyCDN và tạo tài khoản mới. Bổ sung zone lưu trữ mới và tải video của bạn lên.

zone lưu trữ của BunnyCDN

Khi quá trình tải video lên hoàn tất, bạn lấy URL của video (bạn sẽ cần để kết nối nó tới pull zone).

URL của video trên pull zone

Bước 3: Nhúng video vào WordPress

Nhúng video khá dễ. Chỉ cần thêm khối “HTML tùy chỉnh” và bổ sung đoạn mã sau đây vào:

<video width="100%" controls>
   <source src="VIDEO_URL" type="video/mp4">
</video>

Thay VIDEO_URL bằng link video của bạn và thế là xong!

Theo mặc định, một ảnh giữ chỗ sẽ là frame đầu tiên trong video. Nếu bạn muốn, bạn có thể tùy chỉnh ảnh này (ở chỗ IMAGE_URL, bạn thay URL ảnh mà bạn thích):

<video width="100%" placeholder="IMAGE_URL" controls>
   <source src="VIDEO_URL" type="video/mp4">
</video>

Đây là trình bật video native (bản địa) của chính trình duyệt. Nhờ vậy nó không cần tải về file bổ sung JavaScript hoặc CSS bên ngoài. Thẻ video có khả năng tùy biến cao. Bạn có thể tìm thấy nhiều tùy chọn hơn trong bài viết này.


Tặng thêm mẹo hay cho bạn

Nếu không giải pháp nào ở trên có ích cho bạn, ít nhất thì bạn nên preconnect (kết nối trước) với tên miền YouTube hoặc Vimeo. Làm như vậy nghĩa là bạn thông báo với trình duyệt: “này, tôi sắp cần thực hiện kết nối TCP và SSL (https) cho các tên miền này trong lát nữa, vì thế hãy làm việc đó ngay bây giờ nhé”. Bạn có thể tiết kiệm được từ 200 – 300 ms thời gian trình duyệt phải làm để kết nối với nhiều tên miền.

Paste đoạn mã dưới đây vào thẻ head (bạn có thể dùng plugin Insert Headers and Footers để công việc này dễ dàng hơn, và không phải lo lắng khi theme/giao diện cập nhật).

Với YouTube:

<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://i.ytimg.com">
<link rel="preconnect" href="https://i9.ytimg.com">
<link rel="preconnect" href="https://s.ytimg.com">

Với Vimeo:

<link rel="preconnect" href="https://player.vimeo.com">
<link rel="preconnect" href="https://i.vimeocdn.com">
<link rel="preconnect" href="https://f.vimeocdn.com">

Các đoạn mã có thể thay đổi, do vậy bạn nên kiểm tra lại để biết trang web thực sự đang kết nối đến tên miền của bên thứ ba nào khi nhúng YouTube hoặc Vimeo để chỉnh lại cho phừ hợp.


Kết luận

Không có giải pháp riêng rẽ nào có khả năng phù hợp với tất cả yêu cầu. Mỗi cái đều có ưu và khuyết điểm riêng của nó. Nếu bạn định lưu trữ video theo kiểu tự host, cần đảm bảo rằng bạn bật CDN, đặc biệt trong tình huống bạn tải video trực tiếp lên thư viện Media, đây là điều bắt buộc!

(Dịch từ bài viết: How to Speed Up YouTube/Vimeo Embeds in WordPress, tác giả: Gijo Varghese, website: WPSpeedMatters)

Ý kiến của người dịch: Nhìn chung tôi ủng hộ cách sử dụng plugin lazy load video (hoặc tính năng tương tự trong plugin cache, ví dụ LiteSpeed cache) trong phần lớn trường hợp, vì nó phù hợp với đa số người dùng, cũng như dễ triển khai. Việc sử dụng CDN chỉ thích hợp nếu bạn có tất cả các điều kiện sau:

  • Bạn có kinh phí để trang trải dịch vụ CDN (với video mà được xem nhiều, hoặc nặng thì nó cũng không rẻ đâu);
  • Bạn có khả năng học hỏi các vấn đề kỹ thuật liên quan đến CDN, cũng như không quá sợ các đoạn mã.

Khi có thời gian, tôi sẽ hướng dẫn chi tiết cách sử dụng plugin lazy load nói ở trên, bởi vì nếu không thiết lập khéo, nó có khả năng ảnh hưởng đến SEO hoặc/và trải nghiệm người dùng.

Back to Top