Categories Lazy load

Hướng dẫn sử dụng plugin WP YouTube Lyte để tăng tốc độ tải trên trang có video YouTube

Tôi đã có bài viết (dịch) đánh giá tổng quan về các biện pháp tăng tốc tải video nhúng trong website, bạn có thể tham khảo ở link vừa dẫn.

Trong bài viết đó có phân tích: cách tốt nhất là sử dụng CDN để tối thiểu hóa các file JavaScript và CSS mà YouTube hoặc các nền tảng video bên thứ ba khác phải tải về (ví dụ Vimeo). Tốc độ tải tăng lên nhờ chỉ cần sử dụng thẻ video mà thôi, tuy nhiên đây chỉ là cách tốt nhất khi xét thuần túy về mặt tốc độ.

Tại sao?

Lý do nằm ở chỗ CDN không phải là biện pháp rẻ tiền khi áp dụng vào video (nếu không muốn nói là đắt, nhất là khi lượt xem video nhiều- trừ khi web của bạn là trang thương mại, đủ kinh phí để đầu tư), thứ nữa, nó yêu cầu tìm hiểu kỹ lưỡng để có hiệu quả sử dụng tốt nhất.

Hệ quả là, xét phần đa người dùng, cách sử dụng plugin sẽ hợp lý hơn nhiều mặt so với dùng CDN. Plugin vừa miễn phí mà cài đặt lại dễ hơn.

YouTube tải nhiều mã làm chậm website như thế nào?

Chỉ cần đưa bài viết có video nhúng vào công cụ kiểm tra tốc độ như Pingdom, bạn sẽ nhanh chóng nhận ra các mã liên quan đến YouTube nặng như thế nào.

Chẳng hạn đây là CSS và JS mà YouTube tải về:

YouTube tải nhiều file CSS và JS
Còn 2 mã JS nữa cần tải mà tôi không chụp màn hình lại

Ngoài ra là ảnh đại diện của kênh tải từ yt3.ggpht.com, font Roboto tải từ fonts.gstatic.com và dĩ nhiên cả ảnh xem trước của video từ i.ytimg.com

Ngoại trừ ảnh đại diện thì các phần còn lại hoàn toàn có thể tải lười được để tăng tốc độ website.

Tại sao lại là plugin WP YouTube Lyte?

Plugin WP YouTube Lyte được viết bởi tác giả không hề xa lạ: Frank Goossens – ông là tác giả của hai plugin tăng tốc khác rất chất lượng là: AutoptimizeAsync JavaScript. Vì lý do vừa nói, kết hợp với việc cộng đồng đánh giá plugin này rất cao (phần lớn 5 sao), làm tôi không do dự chọn WP YouTube Lyte.

WP YouTube Lyte làm gì?

WP YouTube Lyte cho phép bạn “trì hoãn tải / lazy load” video, bằng cách chèn “YouTube nhúng kiểu nhỏ gọn”. Chúng trông giống với video nhúng từ YouTube, nhưng chỉ tải các file nặng nề khi người dùng click vào xem, nhờ vậy mà giúp giảm dung lượng tải xuống và thời gian render một cách đáng kể.

Không dài dòng nữa, chúng ta sẽ bắt đầu đi vào các thiết lập ngay bây giờ.

Vấn đề khó nhất là lấy API YouTube

Cài đặt plugin WP YouTube Lyte rất đơn giản, dễ hiểu, chỉ trừ phần liên quan đến API YouTube.

API được dùng để giao tiếp tự động giữa hai phần mềm khác nhau, trong trường hợp này nhờ API YouTube mà plugin lấy được tên, ảnh đại diện và mô tả của video, điều này tốt cho người dùng vì họ thấy được nhiều thông tin hơn, và nó cũng tốt cho SEO nữa. Mặc dù bạn có thể sử dụng plugin mà không cần API YouTube, nhưng vì lý do trên, việc cố gắng thiết lập API sẽ cho kết quả tốt hơn nhiều.

Các bước thiết lập như sau:

  1. Truy cập vào Google Developer Console và đăng nhập tài khoản Google của bạn.
  2. Click vào ‘Create Project’ và: Điền tên Project, điền ID cho Project, cuối cùng nhấn ‘Create’
  3. Trên trang kế tiếp (hoặc khi nó không sang trang kế, bạn click vào tên Project): Cuộn chuột xuống phần YouTube Data API v3 và click vào nó > Click vào ENABLE ở phần trên cùng để bật/cho phép API > Tùy chọn vô hiệu hóa API khác
  4. Trong sidebar bên tay trái: Click vào ‘Credentials’ > Click vào ‘Create Credential’ ở phần đầu > Click vào ‘API key’ > Đặt càng ít hạn chế càng tốt, hầu hết các vấn đề xảy ra là do các cài đặt sai ở phần này gây ra > Click vào ‘Create’
  5. Copy API key của bạn để đưa vào phần cài đặt của WP YouTube Lyte như hình dưới đây
API key YouTube

Sau khi nhập vào bạn nhấn Test Key để nó kiểm tra khóa API có hoạt động bình thường hay không:

API key hoạt động

Nếu bạn thấy dòng “API seems OK…” nghĩa là API key của bạn hoạt động ổn.

Lựa chọn kích cỡ video

Ở phần player size bạn chọn kích cỡ video phù hợp. Tùy theo kích cỡ video thực tế mà bạn sử dụng trên website mà bạn chọn lựa kích cỡ hợp lý.

chọn kích cỡ video phù hợp

P/S: để biết kích cỡ video mà bạn đang dùng trên website, trên trình duyệt Chrome bạn chỉ cần nhấn tổ hợp phím Ctrl + U, rồi tìm đến đoạn mã có YouTube bằng tổ hợp phím Ctrl + F, tiếp theo bạn tìm đến phần width và height để biết kích cỡ.

Các cài đặt khác

Bạn cứ làm như hình bên dưới là OK. Giải thích các tùy chọn:

  • Add links below the embedded videos: Thêm liên kết bên dưới video nhúng
  • Add YouTube-link: Thêm link YouTube
  • Don’t add any link: Không thêm bất cứ liên kết nào
  • Player position: Vị trí của video
  • Left: căn trái
  • Center: căn giữa
  • Try to force HD: Cố gắng sử dụng định dạng HD
  • Enable HD: Bật HD (để ảnh đại diện và video nét hơn)
  • No HD: Không dùng HD (đây là tùy chọn mặc định)
  • Add microdata: Thêm dữ liệu microdata (tên, mô tả của video, ngày giờ tạo, vân vân)
  • Yes (default): Có theo mặc định
  • No microdata, thanks: Cảm ơn tôi không cần microdata
  • Also act on normal YouTube link and iframes: Cũng áp dụng trên các liên kết và iframes thông thường của YouTube, nên để như mặc định
  • Cache thumbnails locally: Cache ảnh đại diện video vào host của bạn, giúp giảm ít nhất 1 lời gọi mạng và cho phép bạn điều chỉnh thời gian cache của ảnh theo ý bạn
các cài đặt khác

So sánh tốc độ tải trang khi dùng và không dùng plugin

1. Công cụ kiểm tra: gtmetrix.com

Link dùng kiểm tra: kiencang.net/plugin-updraftplus/

Lần Không dùng plugin (page size/load time/requests) Có dùng plugin (page size/load time/requests)
1 1,09MB/3,7s/61rq 893KB/3,6s/45rq
2 1,48MB/17,2s/58rq 891KB/3,4s/44rq
3 1,30MB/3,5s/72rq 893KB/4,1s/45rq
4 1,09MB/4,3s/61rq 893KB/4,1s/46rq
5 1,48MB/4,9s/63rq 893KB/3,2s/46rq
6 1,45MB/3,6s/62rq 893KB/3,2s/45rq
7 1,44MB/3,7s/70rq 893KB/3,1s/45rq
8 1,14MB/3,8s/61rq 893KB/3,6s/45rq
9 1,50MB/4,1s/61rq 893KB/2,8s/45rq
10 1,55MB/3,5s/61rq 893KB/3,0s/46rq

Trong tất cả các lần kiểm tra, sử dụng plugin giúp bạn có dung lượng trang cũng như số request giảm đi đáng kể. Còn về thời gian tải trang, trong cả 10 lần kiểm tra thì 9/10 sử dụng plugin cho thời gian tải trang nhanh hơn. Sở dĩ thời gian tải trang không chiến thắng trong tất cả các thử nghiệm vì thời gian tải còn phụ thuộc vào điều kiện kết nối mạng nhanh hay chậm- trong điều kiện mạng bị lag thời giản tải trang dù có dùng plugin có thể vẫn chậm hơn thời gian tải trang khi không dùng plugin (trong điều kiện mạng nhanh).

Bạn có thể dùng các công cụ khác để so sánh, chẳng hạn như:

Kết luận: trên máy bàn, sử dụng plugin cho tốc độ tải tốt hơn đáng kể.

Một số lưu ý

  • Để tối ưu hóa tốc độ cao hơn nữa thì ở phần Cache thumbnails locally bạn chọn Yes chứ không để No như mặc định. Nó sẽ tối ưu hóa tốc độ trên di động rất cao, nhưng có nhược điểm là video muốn bật xem phải click hai lần (hiện bạn không khắc phục được nhược điểm này, và vì phải click 2 lần mới bật được video ảnh hưởng nhiều đến trải nghiệm người dùng nên trong đa số trường hợp tôi khuyên bạn nên để No).
  • Cache thumbnails locally nếu để No thì trên di động video sẽ tải lười thực sự theo kiểu tải dần dần (do vậy khi kiểm tra trên các ứng dụng test tốc độ bạn sẽ thấy tốc độ toàn trang gần như không có cải thiện nào so với dùng plugin). Nhưng vì nội dung khác sẽ được ưu tiên hơn nên tốc độ cảm nhận sẽ khá hơn, áp dụng này rất thích hợp nếu video ở sâu bên dưới bài viết- nơi mà nội dung không cần phải tải ngay lập tức.
  • Khi đã thiết lập API YouTube chuẩn rồi mà bạn vẫn không thấy tên video thì có khả năng ở phần mã nhúng YouTube bạn để showinfo=0. Bạn chỉ cần xóa đoạn này đi là được (ở trang soạn thảo bạn nhấn vào dấu ba chấm dọc rồi chọn Edit as HTML để sửa).
  • Việc chọn tỷ lệ khung hình là 16:9 hoặc 4:3 sẽ làm video của bạn trông khác biệt một chút, bạn cứ thử để tìm ra tỷ lệ phù hợp với phần đa video trên website.

Tăng tốc video theo kiểu này có hại gì không?

Chúng ta biết rằng tăng tốc độ website có các cơ chế căn bản, trong đó rõ nét là cơ chế đánh đổi: bạn được cái này và mất cái kia, quan trọng là cái được là cái bạn ưu tiên hơn cái mất.

Vậy cái mất của WP YouTube Lyte là gì?

  • Video sẽ khởi động chậm hơn một chút trên máy bàn: nếu thiết lập theo cách thông thường, video sẽ tải các nội dung sẵn có, và khi người dùng nhấn nút play, video sẽ bật ngay lập tức. Còn khi áp dụng plugin chỉ khi người dùng nhấn nút play nó mới tải các thành phần khác về, do vậy sẽ mất nhiều thời gian hơn. Tuy nhiên trên máy bàn điều này hầu như không ảnh hưởng mấy vì đường truyền thường nhanh và ổn định. Thực tế, nếu người dùng website của bạn chủ yếu là máy bàn, tôi ủng hộ dùng WP YouTube Lyte.
  • Video trên di động có thể vẫn đang tải khi người dùng đi đến phần đó: do vậy nếu video nằm càng gần màn hình đầu tiên, khả năng nó bị hiện tượng vừa nói càng cao. Đây có thể nói là điểm yếu của hầu hết các plugin lazy load video, tôi có nói rõ hơn về cách giải quyết vấn đề này ở phần “Tối ưu hơn nữa”.
  • Nếu lưu lượng truy cập của bạn chủ yếu đến từ máy bàn chứ không phải di động thì bạn có thể để Cache thumbnails locally là Yes để cho tốc độ còn tốt hơn, tuy nhiên trong một số trường hợp tôi thấy để cách này bị chậm đi, hiện tôi cũng không rõ vì sao.
  • Ảnh hưởng tích cực của Preconnect có khả năng cao mất tác dụng trên máy bàn. Bởi vì preconnect chỉ có thể được áp dụng trong 10s đầu tiên, nên trong trường hợp người dùng không thực hiện bật video trong 10s đầu, thực hiện các kết nối sớm không đem lại lại ích gì, nếu không muốn nói là ngược lại, bạn bị mất thời gian đôi chút. Tuy nhiên preconnect sẽ vẫn còn tác dụng trên di động vì trên di động các tài nguyên YouTube tải dần dần (dù chậm hơn thông thường) chứ không phải đợi click mới tải.
  • Có thể ảnh hưởng đến SEO: mặc dù plugin WP YouTube Lyte có hỗ trợ API để lấy tiêu đề, ảnh đại diện và mô tả của video, nhưng tôi nhận thấy Google Search Console vẫn đưa ra cảnh báo.
các trường mà Search Console thông báo cho thấy các vấn đề của video trên trang

Họ còn gửi email thông báo để bạn ý thức hơn về vấn đề này:

Video bị lỗi

Tối ưu hơn nữa

  • Dựa trên đặc điểm của kiểu gợi ý tài nguyên prefetch, bạn có thể tối ưu hóa hơn nữa tốc độ trang trên máy bàn bằng cách prefetch các tài nguyên liên quan đến video. Điều đó giúp bạn vẫn có được lợi ích của việc trì hoãn tải video, trong khi có tiềm năng cải thiện tốc độ rất lớn khi người dùng click bật video, vì các tài nguyên có thể đã được cache sẵn trong trình duyệt trong thời gian rảnh rỗi.
  • Nếu không muốn dùng plugin, bạn có thể dùng thư viện lazy load có chất lượng rất tốt là lazysizes để tải lười video, mặc dù thế mạnh của nó vẫn là lazy load ảnh. Trong bối cảnh người dùng di động lấn át người dùng máy bàn, tôi cho rằng giải pháp của lazysizes tốt hơn so với WP YouTube Lyte.

Các câu hỏi khác về plugin

Bạn có thể tham khảo bài viết: Giới thiệu plugin WP YouTube Lyte để hiểu sâu hơn các thắc mắc mà hiện vẫn chưa có lời giải đáp.

Back to Top