Trang này được dịch bởi Cloud Translation API.

Các phương pháp hay nhất để sử dụng nội dung nhúng của bên thứ ba

Tổng quan về các kỹ thuật để tải hiệu quả các video nhúng phổ biến của bên thứ ba.

Addy Osmani

Katie Hempenius

Leena Sohoni

Nhiều trang web sử dụng nội dung 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 của trang web cho một nhà cung cấp nội dung khác. Các ví dụ phổ biến nhất về việc nhúng nội dung 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ể ảnh hưởng đến hiệu suất của một trang theo nhiều cách. Giải pháp này có thể có chức năng 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ố Core Web Vitals. Nội dung nhúng của bên thứ ba cũng có thể khiến bố cục thay đổi 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ì

Nhúng của bên thứ ba là bất kỳ nội dung nào được hiển thị trên trang web của bạn, trong đó:

Không phải do bạn tạo
Được phân phát từ máy chủ của bên thứ ba

Nhiều mục nhúng ngoài màn hình xuất hiện và có thể được tải từng phần

Nhúng thường được sử dụng trong những trường hợp sau:

Các trang web có liên quan đến thể thao, tin tức, giải trí và thời trang sử dụng video để tăng cường nội dung văn bản.
Các tổ chức có tài khoản Twitter hoặc mạng xã hội đang hoạt động 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 nhà hàng, công viên và nơi 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 các đoạn mã HTML thường bao gồm một <iframe> dẫn đến một trang gồm mã đánh dấu, tập lệnh và biểu định kiểu. Một số trình cung cấp cũng sử dụng một đoạn mã tập lệnh có thể chèn động <iframe> để kéo nội dung khác vào. Điều này có thể khiến nội dung nhúng của bên thứ ba tăng lê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 về hiệu suất của nội dung nhúng của bên thứ ba

Nhiều tệp nhúng phổ biến bao gồm hơn 100 KB JavaScript, đôi khi lên đến 2 MB. Chúng mất nhiều thời gian hơn để tải và khiến luồng chính bận trong khi thực thi. Các công cụ giám sát 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 nội dung nhúng của bên thứ ba đối với hiệu suất.

Giảm tác động của mã 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, kèm theo kích thước và thời gian chặn luồng chính. Bạn có thể 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 nội dung nhúng và mã của bên thứ ba vì mã nguồn 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.

Giảm tác động của mã bên thứ ba

Đ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ác nội dung này cũng cung cấp nhiều chức năng quan trọng. Để sử dụng hiệu quả nội dung nhúng của bên thứ ba và giảm tác động của những nội dung đó đến hiệu suất, hãy làm theo các nguyên tắc sau.

Thứ tự tập lệnh

Trong một trang được thiết kế tốt, 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ẽ chiếm thanh bên hoặc xuất hiện sau nội dung của bên thứ nhất.

Để người dùng có trải nghiệm 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 Twitter hoặc quảng cáo.

Yêu cầu 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 tạm dừng trong khi các tập lệnh được thực thi. Đặt 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 này không xuất hiện trong khung nhìn khi tải trang. Trong trường hợp đó, việc tải tài nguyên của 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 đó của trang. Điều này không chỉ giúp tối ưu hoá 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 tải nội dung 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 yêu cầu và loại nhúng, bạn có thể sử dụng nhiều kỹ thuật tải từng phần.

Tải từng phần của trình duyệt cho `<iframe>`

Đối với các nội dung nhúng của bên thứ ba được tải thông qua các phần tử <iframe>, bạn có thể 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 iframe ngoài màn hình cho đến khi người dùng cuộn đến gần các iframe đó. Thuộc tính tải cho <iframe> có trong tất cả các trình duyệt hiện đại.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

Thuộc tính 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 gần đến khung nhìn. Sử dụng nếu iframe là lựa chọn phù hợp cho tính năng tải từng phần.
eager: Tải iframe ngay lập tức. Sử dụng nếu iframe không phải là lựa chọn phù hợp cho tính năng tải từng phần. Nếu bạn chưa chỉ định thuộc tính loading thì đây sẽ là chế độ 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.

Những 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 ở cấp trình duyệt làm tính năng nâng cao tăng dần. Các trình duyệt hỗ trợ thuộc tính này có thể có cách triển khai khác nhau cho ngưỡng distance-from-viewport (khoảng cách mà iframe bắt đầu tải).

Sau đây là một số cách mà bạn có thể tải từng phần iframe cho nhiều loại nội dung nhúng.

Video trên YouTube: Để tải từng phần iframe của trình phát video trên YouTube, hãy thêm thuộc tính loading vào mã nhúng do YouTube cung cấp. Tính năng 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 iframe của Google Maps, hãy đưa thuộc tính loading vào mã cho iframe nhúng do Google Maps Embedded API (API Nhúng của Google Maps) tạo. 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 lazysize

Vì trình duyệt sử dụng khoảng cách của nội dung nhúng so với khung nhìn, cùng với các tín hiệu như loại kết nối hiệu quả và Chế độ thu gọn, để quyết định thời điểm tải iframe, nên tính năng tải từng phần của trình duyệt có thể không nhất quán. Nếu cần kiểm soát tốt hơn các 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 nhiều trình duyệt, bạn có thể sử dụng thư viện lazysize.

lazysizes là một trình tải từng phần nhanh, thân thiện với SEO cho cả hình ảnh và iframe. Sau khi tải thành phần xuống, bạn có thể sử dụng thành phần này với iframe để nhúng nội dung 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 lazysize với iframe cho các nội dung nhúng khác của bên thứ ba.

Xin lưu ý rằng lazysizes sử dụng Intersection Observer API để phát hiện thời điểm một phần tử hiển thị.

Dùng chế độ lười dữ liệu trên Facebook

Facebook cung cấp các loại trình bổ trợ mạng xã hội khác nhau có thể nhúng được. Nội dung này bao gồm các 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ó một chế độ cài đặt cho data-lazy. Việc đặt thuộc tính này thành true sẽ đả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 một <iframe> vào trang. Tính năng 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 vượt quá 100 KB được nén. Nhiều trình bổ trợ của Instagram 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ù các lượt nhúng tương tác bổ sung giá trị cho trang, nhưng nhiều người dùng có thể không tương tác với chúng. Ví dụ: không phải mọi người dùng duyệt một trang nhà hàng đều sẽ nhấp, mở rộng, cuộn và điều hướng trong bản đồ được nhúng. Tương tự, không phải người dùng nào trên trang nhà cung cấp dịch vụ viễn thông cũng sẽ tương tác với chatbot. 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 nội dung nhúng bằng cách hiển thị một thành phần tượng trưng tại vị trí tương ứng.

Nhúng bản đồ — Bản đồ được nhúng với tính năng phóng to và thu nhỏ.

Mặt tiền là một phần tử tĩnh trông tương tự như bên thứ ba thực tế được nhúng nhưng không hoạt động và do đó, đánh thuế ít hơn nhiều đối với tải trang. Sau đây là một vài chiến lược để tải nội dung nhúng như vậy một cách tối ưu trong khi vẫn cung cấp một số giá trị cho người dùng.

Dùng hình ảnh tĩnh làm thành phần tượng trưng

Bạn có thể sử dụng hình ảnh tĩnh thay cho việc nhúng bản đồ nếu không cần thiết phải làm cho bản đồ có tính tương tác. Bạn có thể phóng to vào 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 tính năng Chụp ảnh màn hình nút trong 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.

Chụp ảnh màn hình nút

Công cụ cho nhà phát triển sẽ ghi lại hình ảnh dưới dạng png, nhưng bạn cũng có thể cân nhắc chuyển đổi hình ảnh đó sang định dạng WebP để có hiệu suất tốt hơn.

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 nội dung nhúng tương tác trong thời gian chạy. Sau đây là một số công cụ cho phép bạn tạo phiên bản tĩnh của các video 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 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 hình ảnh bạn có thể hiển thị trên trang web của mình. URL cần chứa khoá API của Google Maps và phải được đặt trong thẻ <img> trên trang dưới dạng thuộc tính src.

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 hiển thị mã cho một hình ảnh có nguồn được đặt thành URL API tĩnh của Maps. Bản đồ này được bao gồm trong một thẻ liên kết để đảm bảo rằng bạn có thể truy cập bản đồ thực tế bằng cách nhấp vào hình ảnh. (Lưu ý: Thuộc tính khoá API không có trong URL)
```
<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 linh động nhúng ảnh chụp màn hình trên Twitter thay vì nguồn cấp dữ liệu trực tiếp. Tweetpik là một trong những công cụ có thể dùng để chụp ảnh màn hình bài đăng. Tweetpik API chấp nhận URL của tweet và trả về một hình ảnh kèm theo nội dung. 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 tính năng tải từng phần và thành phần tượng trưng. Trang được tải lúc đầu bằng 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 qua các bước sau.

Khi tải trang: Trang có mặt tiền hoặc phần tử tĩnh.
Khi di chuột qua: Facade kết nối trước với nhà cung cấp dịch vụ nhúng của bên thứ ba.
Khi nhấp vào: Thành phần tượng trưng được thay thế bằng sản phẩm của bên thứ ba.

Có thể sử dụng mặt tiền 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 mạng xã hội. Các video nhúng trên YouTube chỉ là những hình ảnh có nút phát là những thành phần tượng trưng mà chúng ta thường 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 thành phần hiển thị nút 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 những thành phần tượng trưng nguồn mở sau đây dành cho nhiều loại nội dung nhúng.

Thành phần tượng trưng trên YouTube

Lite-youtube-embed là một thành phần được đề xuất cho trình phát YouTube, trông giống như trình phát thực nhưng có tốc độ nhanh hơn 224 lần. Bạn có thể sử dụng tập lệnh 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ể thêm các thông số tuỳ chỉnh của trình phát do YouTube hỗ trợ thông qua thuộc tính params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
Sau đây là phần so sánh giữa phiên bản rút gọn của YouTube-nhúng và nhúng thực tế.

Nhúng nhẹ trên YouTube

Video nhúng trên YouTube

Các thành phần tượng trưng 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

Trình tải cuộc trò chuyện trực tiếp phản hồi tải một nút trông giống như nội dung cuộc trò chuyện được nhúng thay vì nút nhúng. Thẻ này có thể được sử dụng với nhiều nền tảng của nhà cung cấp dịch vụ trò chuyện như Intercom, Help Scout, Messenger. 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. Tính năng này có thể được thay thế 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 về Postmark giải thích cách họ triển khai react-live-chat-loader và những điểm cải thiện về hiệu suất mà họ đã đạt được.

Xoá 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ố nội dung nhúng của bên thứ ba dẫn đến hiệu suất tải kém và không thể sử dụng bất kỳ kỹ thuật nào được mô tả trước đó, thì cách đơn giản nhất bạn có thể làm là xoá hoàn toàn nội dung nhúng. Nếu vẫn muốn người dùng của mình có thể truy cập nội dung trong tệp nhúng, bạn có thể cung cấp một đường liên kết đến nội dung đó bằng target="_blank" để người dùng có thể nhấp 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 tính năng này có thể khiến nội dung trang bị di chuyển ngoài dự kiến. Đây được gọi là thay đổi bố cục.

Vì độ ổn định về hình ảnh rất quan trọng để mang đến 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) đo lường tần suất những thay đổi đó xảy ra và mức độ gây gián đoạn của chúng.

Bạn có thể tránh việc 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 dành riêng 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 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 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ó các thuộc tính kích thước được chỉ định. Tuy nhiên, có thể có một số nhà cung cấp không tính đến yếu tố này. Ví dụ: đoạn mã này không cho biết kích thước của kết quả nhúng.

<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 đã chèn sau khi trang này kết xuất. Như bạn thấy trong đoạn mã sau, chiều cao của iframe được chèn là 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ử chứa nhằm đảm bảo rằng vùng chứa không mở rộng khi tải nguồn cấp dữ liệu và không xảy ra sự thay đổi bố cục. Đoạn mã sau có thể dùng để điều chỉnh kích thước của nội dung nhúng đã đưa vào 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

Do các lượt nhúng của bên thứ ba thường bỏ qua kích thước (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ể gây ra thay đổi đáng kể về bố cục trên trang. Bạn có thể gặp khó khăn khi giải quyết vấn đề này nếu không kiểm tra kích thước cuối cùng theo cách thủ 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 (Trình kết thúc dịch chuyển bố cục) có thể giúp bạn giảm sự thay đổi bố cục đối với 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.

Ký tự cuối cùng khi thay đổi bố cục:

Tải phía máy khách đã nhúng vào iframe.
Đổi kích thước iframe theo nhiều kích thước khung nhìn phổ biến.
Đối với mỗi khung nhìn phổ biến, hãy ghi lại kích thước của nội dung nhúng để sau này tạo truy vấn nội dung nghe nhìn và truy vấn vùng chứa.
Xác định kích thước trình bao bọc có chiều cao tối thiểu xung quanh thẻ đánh dấu được nhúng bằng truy vấn phương tiện (và truy vấn vùng chứa) cho đến khi thẻ 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 và dán ở nơi bạn muốn đưa vào trang của mình.

Hãy dùng thử Layout Shift Terminator và vui lòng để lại ý kiến phản hồi trên GitHub. Công cụ này hiện đang ở giai đoạn thử nghiệm và sẽ cải thiện theo thời gian bằng việc tinh chỉnh thêm.

Kết luận

Nội dung nhúng của bên thứ ba có thể mang lại nhiều giá trị cho người dùng, nhưng khi số lượng và kích thước của các lượt nhúng trên một trang tăng lên thì 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 thích hợp cho các video nhúng dựa trên vị trí, mức độ liên quan và người dùng tiềm năng của bạn.