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

Thông tin tổng quan về các kỹ thuật tải nội dung nhúng phổ biến của bên thứ ba một cách hiệu quả.

Addy Osmani
Addy Osmani
X GitHub
Katie Hempenius
Katie Hempenius
X
Leena Sohoni
Leena Sohoni
X

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 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 viết
  • Được phân phát từ máy chủ của bên thứ ba

Nhiều nội dung nhúng ngoài màn hình xuất hiện, 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à đị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 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ố nhà cung cấp cũng sử dụng đoạn mã tập lệnh 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 của nội dung nhúng của bên thứ ba đến hiệu suất

Nhiều nội dung nhúng phổ biến có hơn 100 KB JavaScript, đôi khi thậm chí 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 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 định kỳ kiểm tra tác động của nội dung nhúng và mã của bên thứ ba đối với hiệu suất 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ả các nội dung nhúng của bên thứ ba và giảm tác động của chúng đế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ế hợp lý, nội dung chính của bên thứ nhất sẽ là tâm điểm của trang, còn nội dung nhúng của bên thứ ba sẽ chiếm các thanh bên hoặc xuất hiện sau nội dung của bên thứ nhất.

Để mang lại trải nghiệm tốt nhất cho người dùng, nội dung chính phải tải nhanh và trước mọi nội dung hỗ trợ 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. Tập lệnh có thể ảnh hưởng đến trình tự tải vì quá trình tạo DOM sẽ 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 nội dung này có thể không xuất hiện trong khung nhìn khi trang tải. 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 nội dung nhúng, bạn có thể sử dụng nhiều kỹ thuật tải lười.

Tải từng phần trên trình duyệt cho <iframe>

Đối với 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ể sử dụng tính năng tải lười ở 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 gần các iframe đó. Thuộc tính tải cho <iframe> có sẵn trong tất 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 nên 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 lười nội dung nhúng của YouTube có thể tiết kiệm khoảng 500 KB khi tải trang lần đầu.
<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 lazysizes

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 ngưỡng khoảng cách hoặc muốn cung cấp trải nghiệm tải lười 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ừng phần nhanh và 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ị.

Sử dụng data-lazy trong 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 đảm bảo rằng trình bổ trợ sẽ sử dụng cơ chế tải lười 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 mã đánh dấu và một tập lệnh trong phần 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 nội dung nhúng tương tác giúp tăng giá trị cho trang, nhưng nhiều người dùng có thể không tương tác với các nội dung đó. 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 truy cập vào trang của 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.

Bản đồ nhúng có tính năng phóng to và thu nhỏ.
Nhúng bản đồ
Mặt tiền bản đồ là một hình ảnh.
Mặt tiền của bản đồ

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 số chiến lược để tải các nội dung nhúng đó một cách tối ưu trong khi vẫn cung cấp một số giá trị cho người dùng.

Sử dụng hình ảnh tĩnh làm mặt tiền

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 khu vực quan tâm trên bản đồ, chụp ảnh và sử dụng ảnh này thay vì bản đồ tương tác được nhúng. 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ẽ chụp 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 nội dung nhúng trên các trang của mình.

  • Maps Static API: Dịch vụ Maps Static API của Google tạo bản đồ dựa trên các tham số URL có trong yêu cầu HTTP chuẩn và trả về bản đồ dưới dạng hình ảnh mà bạn có thể hiển thị trên trang web của mình. URL cần bao gồm khoá API 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 cho thấy mã cho một hình ảnh có nguồn được đặt thành URL API Maps Static. 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 để nâng cao mặt tiền

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. Mẫu này còn được gọi là mẫu nhập khi tương tác và có thể được triển khai bằng các bước sau.

  1. Khi tải trang: Trang có mặt tiền hoặc phần tử tĩnh.
  2. 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.
  3. Khi nhấp: Mặt tiền được thay thế bằng sản phẩm của bên thứ ba.

Bạn có thể sử dụng mặt tiền với các thành phần 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. Chúng ta thường xuyên bắt gặp những video được nhúng trên YouTube chỉ là hình ảnh có nút phát. 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.

  • Mặt tiền của YouTube

    Lite-youtube-embed là giao diệ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 tế nhưng nhanh hơn 224 lần. Bạn có thể sử dụng bằng cách tải tập lệnh và tệp 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ố trình phát tuỳ chỉnh mà 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 YouTube Lite
    Video nhúng trên YouTube
    Nội dung nhúng thực tế 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 React tải một nút trông giống như một cuộc trò chuyện được nhúng thay vì chính cuộc trò chuyện được 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 giống hệ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.

    Tiện ích trò chuyện Postmark

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 đối với trải nghiệm người dùng mượt mà, nên Mức thay đổi bố cục tích luỹ (CLS) đo lường tần suất những thay đổi đó xảy ra và mức độ gián đoạn của chúng.

Bạn có thể tránh tình trạng thay đổi bố cục bằng cách đặt trước 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 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 video được 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 hiển thị. 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ể được 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>

Điểm cuối khi thay đổi bố cục

Vì nội dung nhúng của bên thứ ba thường bỏ qua các 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 nội dung này có thể gây ra sự 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.

Dấu chấm hết thay đổi bố cục:

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

    Chuyển đổi bố cục của Terminal

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 lượt 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.