Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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 hiệu quả những thành phần nhúng phổ biến của bên thứ ba.

Addy Osmani

Katie Hempenius

Leena Sohoni

Nhiều trang web sử dụng thành phần nhúng của bên thứ ba để tạo 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. Những ví dụ phổ biến nhất về nội dung của bên thứ ba được nhúng 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. Tài nguyên này có thể chặn quá trình 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ể gây ra sự thay đổi bố cục khi tải. Bài viết này trình bày 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 các thành phần nhúng của bên thứ ba, các kỹ thuật tải hiệu quả và công cụ Layout Shift Terminator (Công cụ loại bỏ sự thay đổi bố cục) giúp giảm sự thay đổi bố cục cho các thành phần nhúng phổ biến.

Nội dung được nhúng là gì

Nội dung nhúng của bên thứ ba là mọi nội dung xuất hiện trên trang web của bạn:

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 thành phần nhúng ngoài màn hình xuất hiện, có thể được tải từng phần.

Nội dung 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 để bổ sung cho nội dung dạng 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. Các 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> để kéo 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ã kịch bản để chèn động một <iframe> nhằm kéo nội dung khác vào. Điều này có thể khiến các thành phần 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 bằng cách trì hoãn nội dung của bên thứ nhất.

Tác động của các thành phần nhúng bên thứ ba đến hiệu suất

Nhiều thành phần nhúng phổ biến có hơn 100 KB JavaScript, đôi khi thậm chí lên đến 2 MB. Các thành phần này mất nhiều thời gian hơn để tải và khiến luồng chính bận khi thực thi. Các công cụ giám sát hiệu suất như Lighthouse và Chrome DevTools giúp đo lường tác động của các thành phần nhúng bên thứ ba đến hiệu suất.

Quy trình kiểm tra "Giảm mức ảnh hưởng của mã bên thứ ba" của Lighthouse cho thấy danh sách các nhà cung cấp bên thứ ba mà một trang sử dụng, cùng với kích thước và thời gian chặn luồng chính. Bạn có thể sử dụng bài kiểm tra này thông qua Chrome DevTools trong thẻ Lighthouse.

Bạn nên định kỳ kiểm tra tác động của các thành phần nhúng và mã của bên thứ ba đến 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ã dư thừa.

Kết quả kiểm tra Lighthouse cho thấy mức độ ảnh hưởng của từng đoạn mã bên thứ ba trên một trang.

Các phương pháp hay nhất khi tải

Nội dung nhúng của bên thứ ba có thể ảnh hưởng tiêu cực đến hiệu suất, nhưng cũng mang lại các chức năng quan trọng. Để sử dụng hiệu quả các thành phần 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.

Sắp xếp 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à trọng tâm của trang, trong khi các thành phần 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 người dùng tốt nhất, 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 các thành phần nhúng cho nguồn cấp dữ liệu Twitter hoặc quảng cáo.

Các yêu cầu về 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 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 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 thuộc tính async hoặc defer để tải các thẻ đó một cách 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 đó 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 có thể bị trì hoãn cho đến khi người dùng di chuyển xuống phần đó của trang. Điều này không chỉ giúp tối ưu hoá quá trình 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 được nhúng, bạn có thể sử dụng các kỹ thuật tải từng phần khác nhau.

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

Đối với các thành phần 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 chậm ở 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 gần các phần tử đó. Thuộc tính tải cho <iframe> có sẵn 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 nên hoãn tải iframe. Trình duyệt sẽ tải iframe khi iframe gần xuất hiện trong khung nhìn. Sử dụng nếu iframe là một lựa chọn 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 chưa chỉ định thuộc tính loading, thì đây là hành vi mặc định, ngoại trừ trong Chế độ đơn giản.
auto: Trình duyệt xác định xem có nên tải khung hình này một cách trì hoãn 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 dưới dạng một tính năng cải tiến 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 distance-from-viewport (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 iframe một cách trì hoãn cho nhiều loại nội dung nhúng.

Video trên YouTube: Để tải trì hoãn iframe 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. Việc tải từng phần thành phần nhúng YouTube có thể giúp tiết kiệm khoảng 500 KB trong lần tải trang ban đầ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 một iframe Google Maps, hãy thêm thuộc tính loading vào mã cho nội dung nhúng iframe do Google Maps Embed API tạo. Sau đây là ví dụ về mã có phần giữ chỗ cho khoá API Google Cloud.

<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 một thành phần được nhúng so với khung hiển thị, ngoà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 nhất quán về tính năng tải từng phầ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 chóng, 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 một iframe để nhúng 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ể dùng lazysizes với iframe cho các thành phần 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ử xuất hiện.

Sử dụng data-lazy trong Facebook

Facebook cung cấp nhiều loại trình bổ trợ mạng xã hội mà bạn có thể nhúng. Các nội dung 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 giá trị này thành true đảm bảo rằng trình bổ trợ sẽ sử dụng cơ chế tải chậm 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 thành phần nhúng. Tập lệnh này sẽ chèn một <iframe> vào trang. Việc tải <iframe> này một cách trì hoãn có thể cải thiện hiệu suất vì kích thước của thành phần nhúng có thể lớn hơn 100 KB khi được nén bằng gzip. Nhiều trình bổ trợ Instagram dành cho các trang web WordPress như WPZoom và Elfsight cung cấp lựa chọn tải chậm.

Thay thế các thành phần nhúng bằng các thành phần giả

Mặc dù các thành phần nhúng có tính 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 thành phần đó. 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, di chuyển và điều hướng 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 thành phần nhúng bằng cách hiển thị một giao diện thay thế.

Một bản đồ được nhúng có tính năng phóng to và thu nhỏ.

Một thành phần tượng trưng bản đồ là một hình ảnh.

Thành phần tượng trưng là một phần tử tĩnh trông tương tự như phần tử thực tế được nhúng của bên thứ ba nhưng không hoạt động và do đó, ít gây áp lực hơn nhiều lên quá trình tải trang. Sau đây là một số chiến lược để tải những thành phần nhúng như vậy một cách tối ưu trong khi vẫn mang lại 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ể dùng hình ảnh tĩnh thay vì nhúng bản đồ khi không cần tạo bản đồ 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ì nhúng bản đồ tương tác. Bạn cũng có thể dùng tính năng Chụp ảnh màn hình nút của 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.

Lựa chọn "chụp ảnh màn hình nút" được làm nổi bật trong trình đơn theo bối cảnh trong một trình chỉnh sửa HTML.

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.

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

Kỹ thuật này cho phép bạn tạo hình ảnh tương ứng với một thành phần nhúng có thể tương tác tại thời gian chạy. Sau đây là một số công cụ cho phép bạn tạo các phiên bản tĩnh của nội dung được 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 ra một bản đồ dựa trên các tham số URL có trong một 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 này cần có 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ã của 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 Maps Static API. Thẻ này đã được đưa vào một thẻ liên kết để đảm bảo rằng bạn có thể truy cập vào 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 nhúng ảnh chụp màn hình Twitter một cách linh hoạt 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 của các tweet. Tweetpik API chấp nhận URL của tweet và trả về một hình ảnh có nội dung của tweet đó. 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 các khía cạnh

Khái niệm nhấp để tải kết hợp tính năng tải từng phần và các lớp mặt nạ. Ban đầu, trang 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ỗ đó, thành phần 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 bằng các bước sau.

Khi tải trang: Trang có chứa thành phần tĩnh hoặc thành phần giả.
Khi di chuột: Facade sẽ kết nối trước với nhà cung cấp dịch vụ nhúng 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.

Bạn có thể dùng Facade 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. Video nhúng trên YouTube chỉ là hình ảnh có nút phát là những thành phần giả mạo mà chúng ta thường 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 giao diện tuỳ chỉnh để nhấp vào để tải 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 giao diện nguồn mở sau đây có sẵn cho nhiều loại thành phần nhúng.

YouTube facade

Lite-youtube-embed là một thành phần tượng trưng được đề xuất cho trình phát YouTube. Thành phần 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 bằng cách tải tập lệnh và biểu định kiểu xuống, sau đó 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à nội dung so sánh giữa lite-youtube-embed và thành phần nhúng thực tế.

Một video nhúng YouTube phiên bản rút gọn

Một video nhúng YouTube

Các lớp bao bọc tương tự khác có sẵn cho trình phát YouTube và Vimeo là lite-youtube, lite-vimeo-embed và lite-vimeo.
Thành phần tượng trưng của tiện ích trò chuyện

React live chat loader tải một nút trông giống như một tiện ích trò chuyện được nhúng thay vì chính tiện ích đó. Bạn có thể sử dụng công cụ 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. 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ế 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 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ế nội dung được nhúng bằng đường liên kết

Nếu nhận thấy một số thành phần nhúng của bên thứ ba làm giảm hiệu suất tải và bạn 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 mà bạn có thể làm là xoá hoàn toàn thành phần nhúng đó. Nếu vẫn muốn người dùng có thể truy cập vào nội dung trong phần 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 nội dung được nhúng một cách linh hoạt có thể cải thiện hiệu suất tải của một trang, nhưng đôi khi việc này có thể khiến nội dung trang di chuyển ngoài ý muốn. Đây được gọi là sự thay đổi bố cục.

Vì độ ổn định về hình ảnh là yếu tố quan trọng để mang lại trải nghiệm mượt mà cho người dùng, nên Mức thay đổi bố cục tích luỹ (CLS) đo lường tần suất xảy ra những thay đổi đó và mức độ ảnh hưởng của chúng.

Bạn có thể tránh được hiện tượng thay đổi bố cục bằng cách đặt trước không gian trong quá trình tải trang cho những phần tử sẽ được tải động sau này. 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 thành phần nhúng của bên thứ ba sẽ được tải. Ví dụ: iframe cho một video 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 thành phần 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ó những nhà cung cấp không cung cấp thông tin này. Ví dụ: đoạn mã này không cho biết kích thước của thành phần được 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 đượ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 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ể dùng thông tin này để đặt kích thước của phần tử 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 có sự thay đổi về bố cục. Bạn có thể dùng đoạn mã sau để cố định kích thước của thành phần được nhúng đã thêm 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>

Ký tự kết thúc thay đổi bố cục

Vì các thành phần 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ể gây ra những thay đổi đáng kể về bố cục trên một trang. Vấn đề này có thể khó giải quyết nếu bạn 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 cửa sổ xem khác nhau.

Hiện có một công cụ tự động là Layout Shift Terminator (Công cụ loại bỏ sự thay đổi bố cục) có thể giúp bạn giảm sự thay đổi bố cục từ các thành phần nhúng phổ biến, chẳng hạn như từ Twitter, Facebook và các nhà cung cấp khác.

Layout Shift Terminator:

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

Hãy dùng thử Layout Shift Terminator và thoải mái để lại ý kiến phản hồi về dự án Layout Shift Terminator trên GitHub. Công cụ này đang ở giai đoạn thử nghiệm và sẽ cải thiện theo thời gian khi đượ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 nội dung nhúng trên một trang tăng lên, hiệu suất có thể bị ảnh hưởng. Đó là lý do bạn cần đo lường, đánh giá và sử dụng các chiến lược tải phù hợp cho nội dung được nhúng dựa trên vị trí, mức độ liên quan và nhu cầu tiềm ẩn của người dùng.