Tổng quan về các kỹ thuật tải hiệu quả các video nhúng của bên thứ ba.
Nhiều trang web sử dụng tính năng nhúng của bên thứ ba để tạo ra trải nghiệm người dùng hấp dẫn bằng cách uỷ quyền một số phần trên trang web cho một nhà cung cấp nội dung khác. Các ví dụ phổ biến nhất về nội dung nhúng của bên thứ ba là trình phát video, nguồn cấp dữ liệu mạng xã hội, bản đồ và quảng cáo.
Nội dung của bên thứ ba có thể tác động đến hiệu suất của trang theo nhiều cách. Tài sản này có thể chặn hiển thị, cạnh tranh với các tài nguyên quan trọng khác về mạng và băng thông, hoặc ảnh hưởng đến các chỉ số Các chỉ số quan trọng về trang web. Nội dung nhúng của bên thứ ba cũng có thể làm thay đổi bố cục khi tải. Bài viết này thảo luận về các phương pháp hay nhất về hiệu suất mà bạn có thể sử dụng khi tải nội dung nhúng của bên thứ ba, kỹ thuật tải hiệu quả và công cụ Layout Shift terminator giúp giảm sự thay đổi bố cục đối với các nội dung nhúng phổ biến.
Nhúng là gì
Nội dung nhúng của bên thứ ba là bất kỳ nội dung nào hiển thị trên trang web của bạn mà: * Không phải do bạn tạo * Được phân phát từ các máy chủ của bên thứ ba
Video nhúng thường được dùng trong những trường hợp sau: * Các trang web liên quan đến thể thao, tin tức, giải trí và thời trang sử dụng video để làm nổi bật nội dung văn bản. * Những tổ chức có tài khoản Twitter hoặc tài khoản mạng xã hội đang hoạt động sẽ nhúng nguồn cấp dữ liệu từ các tài khoản này vào trang web của họ để thu hút và tiếp cận nhiều người hơn. * Các trang về nhà hàng, công viên và địa điểm tổ chức sự kiện thường nhúng bản đồ.
Nội dung nhúng của bên thứ ba thường được tải trong các phần tử <iframe> trên trang. Nhà cung cấp bên thứ ba cung cấp đoạn mã HTML thường bao gồm một <iframe> kéo trong một trang bao gồm mã đánh dấu, tập lệnh và biểu định kiểu. Một số nhà cung cấp cũng sử dụng một đoạn mã tập lệnh có khả năng tự động chèn <iframe> để kéo nội dung khác vào. Điều này có thể làm cho các lượt nhúng của bên thứ ba trở nên nặng nề và ảnh hưởng đến hiệu suất của trang do trì hoãn nội dung của bên thứ nhất.
Tác động của nội dung nhúng của bên thứ ba đối với hiệu suất
Nhiều tệp nhúng phổ biến có kích thước hơn 100 KB JavaScript, đôi khi có kích thước lên đến 2 MB. Các quá trình này mất nhiều thời gian hơn để tải và khiến luồng chính bận trong quá trình thực thi. Các công cụ theo dõi hiệu suất như Lighthouse và Công cụ của Chrome cho nhà phát triển giúp đo lường tác động của các lượt nhúng của bên thứ ba đối với hiệu suất.
Giảm tác động của mã của bên thứ ba Tính năng kiểm tra Lighthouse hiển thị danh sách các nhà cung cấp bên thứ ba mà một trang sử dụng, cùng với thời gian chặn theo luồng chính và kích thước. Bạn có thể tiến hành kiểm tra thông qua Công cụ của Chrome cho nhà phát triển trong thẻ Lighthouse.
Bạn nên kiểm tra định kỳ tác động về hiệu suất của các video nhúng và mã của bên thứ ba vì mã nguồn được nhúng có thể thay đổi. Bạn có thể tận dụng cơ hội này để xoá mọi mã thừa.
Đang tải các phương pháp hay nhất
Nội dung nhúng của bên thứ ba có thể tác động tiêu cực đến hiệu suất, nhưng cũng cung cấp các chức năng quan trọng. Để sử dụng hiệu quả các video nhúng của bên thứ ba và giảm tác động đến hiệu suất, hãy làm theo các nguyên tắc bên dưới.
Sắp xếp tập lệnh
Trên một trang được thiết kế hợp lý, nội dung chính của bên thứ nhất sẽ là trọng tâm của trang, trong khi nội dung nhúng của bên thứ ba sẽ nằm trong thanh bên hoặc xuất hiện sau nội dung của bên thứ nhất.
Để có trải nghiệm người dùng tốt nhất, nội dung chính phải tải nhanh và trước bất kỳ nội dung hỗ trợ nào khác. Ví dụ: Văn bản tin tức trên một trang tin tức phải tải trước khi được nhúng cho nguồn cấp dữ liệu hoặc quảng cáo trên Twitter.
Các yêu cầu nội dung nhúng của bên thứ ba có thể cản trở việc tải nội dung của bên thứ nhất, vì vậy, vị trí của thẻ tập lệnh của bên thứ ba là rất quan trọng. Các tập lệnh có thể ảnh hưởng đến trình tự tải vì quá trình xây dựng DOM sẽ tạm dừng trong khi các tập lệnh được thực thi. Đặt các thẻ tập lệnh của bên thứ ba sau các thẻ chính của bên thứ nhất và sử dụng các thuộc tính async hoặc defer để tải không đồng bộ.
<head>
<title>Order of Things</title>
<link rel="stylesheet" media="screen" href="/assets/application.css">
<script src="index.js"></script>
<script src="https://example.com/3p-library.js" async></script>
</head>
Tải từng phần
Vì nội dung của bên thứ ba thường xuất hiện sau nội dung chính, nên có thể nội dung đó không hiển thị trong khung nhìn khi tải trang. Trong trường hợp đó, quá trình tải tài nguyên bên thứ ba xuống có thể bị trì hoãn cho đến khi người dùng cuộn xuống phần đó trên trang. Điều này không chỉ giúp tối ưu hoá việc tải trang ban đầu mà còn giảm chi phí tải xuống cho người dùng sử dụng gói dữ liệu cố định và kết nối mạng chậm.
Việc trì hoãn quá trình tải nội dung xuống cho đến khi thực sự cần thiết được gọi là tải từng phần. Tuỳ thuộc vào các yêu cầu và loại nội dung nhúng, bạn có thể sử dụng các kỹ thuật tải từng phần khác nhau được giải thích bên dưới.
Tải từng phần gốc cho <iframe>
Đối với các nội dung nhúng của bên thứ ba được tải qua các phần tử <iframe>, bạn có thể sử dụng tính năng tải từng phần ở cấp trình duyệt để trì hoãn việc tải các iframe ngoài màn hình cho đến khi người dùng cuộn đến các iframe đó. Thuộc tính tải cho <iframe> có trong Chrome 77 trở lên và cũng đã được đưa vào các trình duyệt dựa trên Chromium khác.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
Thuộc tính đang tải hỗ trợ các giá trị sau:
lazy: Cho biết trình duyệt sẽ trì hoãn việc tải iframe. Trình duyệt sẽ tải iframe khi đang ở gần khung nhìn. Sử dụng nếu iframe là phù hợp để tải từng phần.eager: Tải iframe ngay lập tức. Sử dụng nếu iframe không phù hợp để tải từng phần. Nếu bạn không chỉ định thuộc tínhloadingthì đây sẽ là hành vi mặc định — ngoại trừ ở chế độ Lite.auto: Trình duyệt xác định xem có tải từng phần khung này hay không.
Các trình duyệt không hỗ trợ thuộc tính loading sẽ bỏ qua thuộc tính này, vì vậy bạn có thể áp dụng tính năng tải từng phần gốc dưới dạng một tính năng nâng cao tăng dần. Những trình duyệt hỗ trợ thuộc tính này có thể có các cách triển khai khác nhau cho ngưỡng khoảng cách từ khung nhìn (khoảng cách mà iframe bắt đầu tải).
Sau đây là một số cách bạn có thể tải từng phần iframe cho các loại nội dung nhúng khác nhau.
- Video trên YouTube: Để tải từng phần iframe của trình phát video trên YouTube, hãy đưa thuộc tính
loadingvào mã nhúng do YouTube cung cấp. Phương pháp tải từng phần nội dung nhúng trên YouTube có thể tiết kiệm khoảng 500 KB trong lần tải trang đầu tiên.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
loading="lazy"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
- Google Maps: Để tải từng phần một iframe Google Maps, hãy đưa thuộc tính
loadingvào mã cho iframe nhúng được tạo bởi API Nhúng của Google Maps. Sau đây là ví dụ về mã có phần giữ chỗ cho khoá Google Cloud API.
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
width="600" height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
thư viện lazysizes
Vì các trình duyệt sử dụng khoảng cách từ khung nhìn của một nội dung nhúng, ngoài các tín hiệu như loại kết nối hiệu quả và Chế độ Lite, để quyết định thời điểm tải iframe, nên tính năng tải từng phần gốc có thể sẽ không nhất quán. Nếu cần kiểm soát tốt hơn ngưỡng khoảng cách hoặc muốn cung cấp trải nghiệm tải từng phần nhất quán trên các trình duyệt, bạn có thể sử dụng thư viện lazysizes.
lazysizes là một trình tải tải từng phần nhanh, thân thiện với SEO cho cả hình ảnh và iframe. Khi đã tải thành phần xuống, bạn có thể sử dụng thành phần đó với iframe để nhúng trên YouTube như sau.
<script src="lazysizes.min.js" async></script>
<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
class="lazyload"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Tương tự, bạn có thể sử dụng kích thước từng phần với iframe cho các nội dung nhúng của bên thứ ba khác.
Xin lưu ý rằng phương thức tải từng phần (lazysize) sử dụng Intersection Observer API để phát hiện thời điểm một phần tử hiển thị.
Sử dụng chế độ tải từng phần dữ liệu trong Facebook
Facebook cung cấp nhiều loại trình bổ trợ mạng xã hội có thể nhúng được. Số liệu này bao gồm bài đăng, bình luận, video và nút Thích phổ biến nhất. Tất cả trình bổ trợ đều có chế độ cài đặt cho data-lazy. Việc đặt thuộc tính này thành true đảm bảo rằng trình bổ trợ sẽ sử dụng cơ chế tải từng phần của trình duyệt bằng cách đặt thuộc tính iframe loading="lazy".
Tải từng phần nguồn cấp dữ liệu Instagram
Instagram cung cấp một khối đánh dấu và một tập lệnh trong quá trình nhúng. Tập lệnh sẽ chèn <iframe> vào trang. Phương thức tải từng phần <iframe> này có thể cải thiện hiệu suất vì tệp nhúng có thể có kích thước nén lớn hơn 100 KB. Nhiều trình bổ trợ Instagram dành cho các trang web WordPress như WPZoom và Elfsight cung cấp tuỳ chọn tải từng phần.
Thay thế nội dung nhúng bằng thành phần tượng trưng
Mặc dù nội dung nhúng có tính tương tác làm tăng thêm giá trị cho trang, nhưng nhiều người dùng có thể không tương tác với những nội dung đó. Ví dụ: không phải người dùng nào duyệt xem trang nhà hàng cũng sẽ nhấp, mở rộng, cuộn và điều hướng phần nhúng bản đồ. Tương tự như vậy, không phải người dùng nào truy cập vào trang nhà cung cấp dịch vụ viễn thông cũng sẽ tương tác với bot trò chuyện. Trong những trường hợp này, bạn có thể tránh tải hoặc tải từng phần video nhúng bằng cách hiển thị một thành phần tượng trưng tại vị trí đó.
Mặt tiền là một phần tử tĩnh trông tương tự như phần tử bên thứ ba được nhúng thực tế nhưng không hoạt động và do đó giảm đáng kể chi phí tải trang. Sau đây là một số chiến lược để tải những video nhúng như vậy một cách tối ưu mà vẫn mang lại giá trị nào đó cho người dùng.
Sử dụng hình ảnh tĩnh làm thành phần tượng trưng
Hình ảnh tĩnh có thể được sử dụng thay cho việc nhúng bản đồ (bạn có thể không cần làm cho bản đồ có tính tương tác). Bạn có thể phóng to khu vực quan tâm trên bản đồ, chụp ảnh và sử dụng tính năng này thay vì nhúng bản đồ tương tác. Bạn cũng có thể sử dụng chức năng Chụp ảnh màn hình nút cho Công cụ cho nhà phát triển để chụp ảnh màn hình của phần tử iframe được nhúng, như minh hoạ dưới đây.
Công cụ cho nhà phát triển chụp lại hình ảnh dưới dạng png, nhưng bạn cũng có thể cân nhắc việc chuyển đổi hình ảnh đó sang WebP format for better performance.
Sử dụng hình ảnh linh hoạt làm thành phần tượng trưng
Kỹ thuật này cho phép bạn tạo hình ảnh tương ứng với một nội dung nhúng mang tính tương tác trong thời gian chạy. Sau đây là một số công cụ hỗ trợ bạn tạo phiên bản tĩnh của các tệp nhúng trên các trang của mình.
API tĩnh của Maps: Dịch vụ API tĩnh của Google Maps tạo bản đồ dựa trên các tham số URL có trong yêu cầu HTTP tiêu chuẩn và trả về bản đồ dưới dạng một hình ảnh mà bạn có thể hiển thị trên trang web của mình. URL cần chứa khoá API Google Maps và phải được đặt trong thẻ
<img>trên trang dưới dạng thuộc tínhsrc.Công cụ Trình tạo bản đồ tĩnh giúp định cấu hình các tham số cần thiết cho URL và cung cấp cho bạn mã cho phần tử hình ảnh theo thời gian thực.
Đoạn mã sau đây cho thấy mã của một hình ảnh có nguồn được đặt thành một URL API tĩnh của Maps. Nó đã được bao gồm trong một thẻ liên kết để đảm bảo rằng bản đồ thực tế có thể được truy cập bằng cách nhấp vào hình ảnh. (Lưu ý: URL không có thuộc tính khoá API)
<a href="https://www.google.com/maps/place/Albany,+NY/"> <img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY"> </a>Ảnh chụp màn hình Twitter: Tương tự như ảnh chụp màn hình bản đồ, khái niệm này cho phép bạn nhúng ảnh chụp màn hình Twitter một cách linh động thay vì nguồn cấp dữ liệu trực tiếp. Tweetpik là một trong những công cụ bạn có thể dùng để chụp ảnh màn hình các bài đăng trên Twitter. Tweetpik API chấp nhận URL của dòng tweet và trả về một hình ảnh có nội dung trong đó. API này cũng chấp nhận các tham số để tuỳ chỉnh nền, màu sắc, đường viền và kích thước của hình ảnh.
Sử dụng tính năng nhấp để tải để cải thiện thành phần tượng trưng
Khái niệm nhấp để tải kết hợp giữa tải từng phần và thành phần tượng trưng. Ban đầu, trang sẽ tải với thành phần tượng trưng. Khi người dùng tương tác với phần giữ chỗ tĩnh bằng cách nhấp vào phần giữ chỗ đó, nội dung nhúng của bên thứ ba sẽ được tải. Đây còn được gọi là mẫu nhập khi tương tác và có thể được triển khai theo các bước sau.
- Khi tải trang: Mặt tiền hoặc phần tử tĩnh có trên trang.
- Khi di chuột qua: Kết nối trước mặt tiền với nhà cung cấp dịch vụ nhúng bên thứ ba.
- Khi nhấp vào: Thành phần được thay thế bằng sản phẩm của bên thứ ba.
Bạn có thể sử dụng Fafaca với nội dung nhúng của bên thứ ba cho trình phát video, tiện ích trò chuyện, dịch vụ xác thực và tiện ích truyền thông xã hội. Video nhúng trên YouTube chỉ là hình ảnh với nút phát là những biểu tượng mà chúng tôi thường xuyên bắt gặp. Video thực tế chỉ tải khi bạn nhấp vào hình ảnh.
Bạn có thể tạo mặt tiền nhấp để tải tuỳ chỉnh bằng cách sử dụng mẫu nhập khi tương tác hoặc sử dụng một trong các mặt tiền nguồn mở sau đây có sẵn cho các loại nội dung nhúng khác nhau.
Mặt tiền trên YouTube
Lite-youtube-embed là thành phần được đề xuất cho trình phát YouTube. Trình phát này trông giống như trình phát thực nhưng nhanh hơn 224 lần. Bạn có thể sử dụng thẻ này bằng cách tải tập lệnh và biểu định kiểu xuống, sau đó sử dụng thẻ
<lite-youtube>trong HTML hoặc JavaScript. Bạn có thể đưa các thông số trình phát tuỳ chỉnh do YouTube hỗ trợ thông qua thuộc tínhparams.<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>Sau đây là bảng so sánh giữa video được nhúng trên YouTube theo cách thông thường và lượt nhúng thực tế.
Nội dung nhúng trên YouTube thu gọn 
Nội dung nhúng trên YouTube Các mặt tiền tương tự khác dành cho trình phát YouTube và Vimeo là lite-youtube, lite-vimeo-embed và lite-vimeo.
Mặt tiền tiện ích Chat
Nút React-live-chat-loader tải một nút trông giống như nút nhúng cho cuộc trò chuyện thay vì nút nhúng. Bạn có thể sử dụng tính năng này với nhiều nền tảng của nhà cung cấp dịch vụ trò chuyện, chẳng hạn như Intercom, Help Scout, Messenger, v.v. Tiện ích tương tự nhẹ hơn nhiều so với tiện ích trò chuyện và tải nhanh hơn. Bạn có thể thay thế tiện ích này bằng tiện ích trò chuyện thực tế khi người dùng di chuột hoặc nhấp vào nút hoặc nếu trang không hoạt động trong một thời gian dài. Nghiên cứu điển hình của Postmark giải thích cách họ triển khai trình tải phản ứng trực tiếp và những điểm cải thiện về hiệu suất.
Xóa hoặc thay thế video nhúng bằng đường liên kết
Nếu bạn thấy rằng một số video nhúng của bên thứ ba dẫn đến hiệu suất tải kém và việc sử dụng bất kỳ kỹ thuật nào ở trên không phải là một lựa chọn, thì điều đơn giản nhất bạn có thể làm là xoá hoàn toàn video đã nhúng. Nếu vẫn muốn người dùng của mình truy cập được vào nội dung được nhúng, bạn có thể cung cấp đường liên kết đến nội dung đó qua target="_blank" để người dùng có thể nhấp vào và xem nội dung đó trong một thẻ khác.
Độ ổn định của bố cục
Mặc dù việc tải động nội dung được nhúng có thể cải thiện hiệu suất tải của trang, nhưng đôi khi việc này có thể gây ra chuyển động không mong muốn của nội dung trang. Đây được gọi là thay đổi bố cục.
Vì độ ổn định về hình ảnh là yếu tố quan trọng giúp đảm bảo trải nghiệm mượt mà cho người dùng, nên Điểm số tổng hợp về mức thay đổi bố cục (CLS) sẽ đo lường tần suất xảy ra những thay đổi đó cũng như mức độ gián đoạn của chúng.
Bạn có thể tránh thay đổi bố cục bằng cách dành riêng không gian trong quá trình tải trang cho các phần tử sẽ được tải động sau đó. Trình duyệt có thể xác định không gian cần đặt trước nếu biết chiều rộng và chiều cao của các phần tử. Bạn có thể đảm bảo điều này bằng cách chỉ định các thuộc tính width và height của iframe hoặc bằng cách đặt kích thước cố định cho các phần tử tĩnh nơi nội dung nhúng của bên thứ ba sẽ được tải. Ví dụ: iframe cho một nội dung nhúng trên YouTube phải có chiều rộng và chiều cao được chỉ định như sau.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>
Các video nhúng phổ biến như YouTube, Google Maps và Facebook cung cấp mã nhúng cùng với các thuộc tính kích thước được chỉ định. Tuy nhiên, có thể có những nhà cung cấp không đưa vào. Ví dụ: đoạn mã này không cho biết kích thước của lần nhúng kết quả.
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Bạn có thể sử dụng Công cụ cho nhà phát triển để kiểm tra iframe được chèn sau khi trang này hiển thị. Như bạn thấy trong đoạn mã sau, chiều cao của iframe được chèn cố định trong khi chiều rộng được chỉ định theo tỷ lệ phần trăm.
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>
Bạn có thể sử dụng thông tin này để đặt kích thước của phần tử vùng chứa nhằm đảm bảo vùng chứa không mở rộng khi tải nguồn cấp dữ liệu và không làm thay đổi bố cục. Có thể dùng đoạn mã sau để sửa kích thước của phần đã nhúng trước đó.
<style>
.twitterfeed { display: table-cell; vertical-align: top; width: 100vw; }
.twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
Dấu kết thúc thay đổi bố cục
Vì nội dung nhúng của bên thứ ba thường bỏ qua các phương diện (chiều rộng, chiều cao) cho nội dung cuối cùng mà chúng hiển thị, nên chúng có thể khiến bố cục thay đổi đáng kể trên trang. Vấn đề này có thể khó giải quyết mà không cần kiểm tra thủ công kích thước cuối cùng bằng Công cụ cho nhà phát triển ở nhiều kích thước khung nhìn khác nhau.
Giờ đây, đã có một công cụ tự động, Layout Shift terminator, có thể giúp bạn giảm việc thay đổi bố cục từ các nội dung nhúng phổ biến, chẳng hạn như từ Twitter, Facebook và các nhà cung cấp khác.
Dấu kết thúc thay đổi bố cục:
- Tải phía máy khách được nhúng trong iframe.
- Đổi kích thước iframe sang các kích thước khung nhìn phổ biến khác nhau.
- Đối với mỗi khung nhìn phổ biến, ghi lại kích thước của nhúng để sau này tạo truy vấn phương tiện và truy vấn vùng chứa.
- Xác định kích thước trình bao bọc chiều cao tối thiểu xung quanh mã đánh dấu được nhúng bằng cách sử dụng truy vấn phương tiện (và truy vấn vùng chứa) cho đến khi tệp nhúng khởi chạy (sau đó kiểu chiều cao tối thiểu sẽ bị xoá).
Tạo một đoạn mã nhúng được tối ưu hoá mà bạn có thể sao chép/dán vào nơi bạn muốn nhúng đoạn mã đó vào trang của mình.
Hãy dùng thử Layout Shift Connector (Trình kết thúc thay đổi bố cục) và đừng ngại để lại mọi ý kiến phản hồi trên GitHub. Công cụ này đang ở giai đoạn thử nghiệm beta và được cải tiến theo thời gian để tinh chỉnh thêm.
Kết luận
Các lượt nhúng của bên thứ ba có thể mang lại nhiều giá trị cho người dùng. Tuy nhiên, khi số lượng và kích thước lượt nhúng trên một trang tăng lên, hiệu suất có thể bị ảnh hưởng. Đó là lý do tại sao cần phải đo lường, đánh giá và sử dụng chiến lược tải quảng cáo thích hợp cho các video được nhúng dựa trên vị trí, mức độ liên quan và nhu cầu của người dùng tiềm năng.