این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

بهترین روش ها برای استفاده از جاسازی های شخص ثالث

مروری بر تکنیک‌های بارگذاری کارآمد جاسازی‌های شخص ثالث محبوب.

Addy Osmani

Katie Hempenius

Leena Sohoni

بسیاری از سایت ها از جاسازی های شخص ثالث برای ایجاد یک تجربه کاربری جذاب با واگذاری برخی از بخش های یک صفحه وب به ارائه دهنده محتوای دیگری استفاده می کنند. رایج‌ترین نمونه‌های جاسازی محتوای شخص ثالث، پخش‌کننده‌های ویدیو، فید رسانه‌های اجتماعی، نقشه‌ها و تبلیغات هستند.

محتوای شخص ثالث می تواند از جهات مختلف بر عملکرد یک صفحه تأثیر بگذارد. این می تواند رندر-مسدود کننده باشد، با سایر منابع حیاتی برای شبکه و پهنای باند مقابله کند یا بر معیارهای Core Web Vitals تأثیر بگذارد. تعبیه‌های شخص ثالث نیز ممکن است باعث تغییر طرح‌بندی در هنگام بارگیری شوند. این مقاله بهترین شیوه‌های عملکردی را که می‌توانید هنگام بارگیری تعبیه‌های شخص ثالث، تکنیک‌های بارگذاری کارآمد و ابزار Layout Shift Terminator استفاده کنید، مورد بحث قرار می‌دهد که به کاهش تغییرات طرح‌بندی برای جاسازی‌های رایج کمک می‌کند.

تعبیه چیست

تعبیه شخص ثالث هر محتوایی است که در سایت شما نمایش داده می شود که: * نویسنده شما نیست * از سرورهای شخص ثالث ارائه می شود

تعبیه‌های چندگانه خارج از صفحه نمایش داده می‌شوند که ممکن است تنبلی بارگذاری شوند

جاسازی‌ها اغلب در موارد زیر استفاده می‌شوند: * وب‌سایت‌های مرتبط با ورزش، اخبار، سرگرمی و مد از ویدیوها برای تقویت محتوای متنی استفاده می‌کنند. * سازمان‌هایی که حساب‌های توییتر یا رسانه‌های اجتماعی فعال دارند، فیدهای این حساب‌ها را در صفحات وب خود جاسازی می‌کنند تا با افراد بیشتری ارتباط برقرار کنند. * صفحات رستوران، پارک و مکان رویداد اغلب نقشه ها را جاسازی می کنند.

تعبیه‌های شخص ثالث معمولاً در عناصر <iframe> در صفحه بارگذاری می‌شوند. ارائه‌دهندگان شخص ثالث قطعه‌های HTML را ارائه می‌دهند که اغلب از یک <iframe> تشکیل شده‌اند که صفحه‌ای متشکل از نشانه‌گذاری، اسکریپت‌ها و شیوه نامه‌ها را می‌کشد. برخی از ارائه دهندگان همچنین از یک قطعه اسکریپت استفاده می کنند که به صورت پویا یک <iframe> را برای جذب محتوای دیگر تزریق می کند. این می تواند تعبیه های شخص ثالث را سنگین کند و با به تاخیر انداختن محتوای شخص اول آن، بر عملکرد صفحه تأثیر بگذارد.

تأثیر عملکرد تعبیه‌های شخص ثالث

بسیاری از جاسازی‌های محبوب شامل بیش از 100 کیلوبایت جاوا اسکریپت هستند که گاهی حتی تا 2 مگابایت هم می‌رسد. آنها زمان بیشتری را برای بارگذاری می‌برند و موضوع اصلی را در هنگام اجرا مشغول نگه می‌دارند. ابزارهای نظارت بر عملکرد مانند Lighthouse و Chrome DevTools به اندازه‌گیری تأثیر جاسازی‌های شخص ثالث بر عملکرد کمک می‌کنند.

کاهش تاثیر کد شخص ثالث ممیزی Lighthouse لیست ارائه دهندگان شخص ثالثی را که یک صفحه از آنها استفاده می کند، با اندازه و زمان مسدود شدن رشته اصلی نشان می دهد. ممیزی از طریق Chrome DevTools در تب Lighthouse در دسترس است.

این یک تمرین خوب است که به طور دوره ای تأثیر عملکرد جاسازی ها و کدهای شخص ثالث خود را بررسی کنید زیرا کد منبع جاسازی ممکن است تغییر کند. می توانید از این فرصت برای حذف هر کد اضافی استفاده کنید.

تاثیر کدهای شخص ثالث را کاهش دهید

بارگیری بهترین شیوه ها

تعبیه‌های شخص ثالث می‌توانند بر عملکرد تأثیر منفی بگذارند، اما عملکردهای مهمی نیز ارائه می‌دهند. برای استفاده مؤثر از جاسازی‌های شخص ثالث و کاهش تأثیر عملکرد آنها، دستورالعمل‌های زیر را دنبال کنید.

سفارش اسکریپت

در یک صفحه با طراحی خوب، محتوای اصلی شخص اول تمرکز صفحه خواهد بود، در حالی که جاسازی‌های شخص ثالث نوارهای کناری را اشغال می‌کنند یا بعد از محتوای شخص اول ظاهر می‌شوند.

برای بهترین تجربه کاربری، محتوای اصلی باید به سرعت و قبل از هر محتوای پشتیبانی دیگری بارگیری شود. به عنوان مثال، متن خبر در یک صفحه خبری باید قبل از جاسازی برای فید توییتر یا تبلیغات بارگیری شود.

درخواست‌ها برای جاسازی‌های شخص ثالث می‌توانند مانع بارگیری محتوای شخص اول شوند، بنابراین موقعیت تگ اسکریپت شخص ثالث مهم است. اسکریپت ها می توانند توالی بارگذاری را تحت تاثیر قرار دهند زیرا ساختار DOM در حین اجرای اسکریپت ها متوقف می شود. برچسب‌های اسکریپت شخص ثالث را بعد از برچسب‌های اصلی شخص اول قرار دهید و از ویژگی‌های async یا defer برای بارگیری ناهمزمان آنها استفاده کنید .

<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>

تنبلی بارگذاری

از آنجایی که محتوای شخص ثالث معمولاً بعد از محتوای اصلی می آید، ممکن است هنگام بارگیری صفحه در نمای نمایش قابل مشاهده نباشد. در این صورت، دانلود منابع شخص ثالث ممکن است تا زمانی که کاربر به سمت پایین به آن قسمت از صفحه پیمایش کند، به تعویق بیفتد. این نه تنها به بهینه‌سازی بارگذاری اولیه صفحه کمک می‌کند، بلکه هزینه دانلود را برای کاربران در برنامه‌های داده ثابت و اتصالات شبکه کند کاهش می‌دهد.

به تأخیر انداختن دانلود محتوا تا زمانی که واقعاً مورد نیاز باشد، بارگذاری تنبل نامیده می شود. بسته به نیاز و نوع جاسازی، می‌توانید از تکنیک‌های مختلف بارگذاری تنبلی که در زیر توضیح داده شده است استفاده کنید.

بارگذاری تنبل بومی برای `<iframe>`

برای جاسازی‌های شخص ثالث که از طریق عناصر <iframe> بارگیری می‌شوند، می‌توانید از بارگذاری تنبل در سطح مرورگر استفاده کنید تا بارگیری iframe‌های خارج از صفحه را تا زمانی که کاربران در نزدیکی آن‌ها حرکت کنند به تعویق بیندازید. ویژگی بارگیری برای <iframe> در Chrome 77 و بالاتر موجود است و همچنین به سایر مرورگرهای مبتنی بر Chromium نیز معرفی شده است.

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

ویژگی loading از مقادیر زیر پشتیبانی می کند:

lazy : نشان می دهد که مرورگر باید بارگذاری iframe را به تعویق بیندازد. مرورگر iframe را هنگامی که به viewport نزدیک می شود بارگیری می کند. اگر iframe کاندید خوبی برای بارگذاری تنبل است، از آن استفاده کنید.
eager : iframe را فوراً بارگیری می کند. اگر iframe کاندیدای مناسبی برای بارگذاری تنبل نیست، استفاده کنید. اگر ویژگی loading مشخص نشده باشد، این رفتار پیش‌فرض است - به جز در حالت Lite .
auto : مرورگر تعیین می کند که آیا این فریم را بارگذاری کند یا خیر.

مرورگرهایی که ویژگی loading را پشتیبانی نمی کنند، آن را نادیده می گیرند، بنابراین می توانید بارگذاری تنبل بومی را به عنوان یک بهبود پیشرونده اعمال کنید. مرورگرهایی که این ویژگی را پشتیبانی می‌کنند ممکن است پیاده‌سازی‌های متفاوتی برای آستانه فاصله از ویوپورت (فاصله‌ای که در آن iframe شروع به بارگیری می‌کند) داشته باشند.

در زیر چند روش وجود دارد که از طریق آنها می توانید iframe ها را برای انواع مختلف جاسازی ها بارگذاری کنید.

ویدیوهای YouTube: برای بارگذاری تنبل یک iframe پخش کننده ویدیوی YouTube، ویژگی loading را در کد جاسازی ارائه شده توسط YouTube قرار دهید. بارگیری تنبل جاسازی YouTube می تواند تقریباً 500 کیلوبایت در بارگذاری صفحه اولیه صرفه جویی کند.

<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: برای بارگذاری تنبل iframe Google Map، ویژگی loading را در کد iframe جاسازی شده ایجاد شده توسط Google Maps Embed API قرار دهید. در زیر نمونه‌ای از کد با نگه‌دارنده برای کلید 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>

کتابخانه تنبلی

از آنجایی که مرورگرها علاوه بر سیگنال‌هایی مانند نوع اتصال مؤثر و حالت Lite، برای تصمیم‌گیری در مورد زمان بارگیری یک iframe، از درگاه نمایش فاصله از embed استفاده می‌کنند، بارگذاری تنبل بومی می‌تواند ناسازگار باشد. اگر به کنترل بهتری در آستانه فاصله نیاز دارید یا می‌خواهید یک تجربه بارگذاری تنبل در مرورگرها ارائه دهید، می‌توانید از کتابخانه lazysizes استفاده کنید.

lazysizes یک لودر تنبل سریع و سازگار با سئو برای تصاویر و iframe است. هنگامی که مؤلفه را دانلود کردید، می توان آن را با iframe برای جاسازی YouTube به شرح زیر استفاده کرد.

<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>

به طور مشابه، lazysizes ممکن است با iframe برای جاسازی های شخص ثالث دیگر استفاده شود.

توجه داشته باشید که lazysizes از Intersection Observer API برای تشخیص زمانی که یک عنصر قابل مشاهده می شود استفاده می کند.

استفاده از data-lazy در فیس بوک

فیس بوک انواع مختلفی از پلاگین های اجتماعی را ارائه می دهد که می توانند جاسازی شوند. این شامل پست‌ها، نظرات، ویدیوها و محبوب‌ترین دکمه لایک می‌شود. همه افزونه ها دارای تنظیماتی برای data-lazy هستند. تنظیم آن بر روی true تضمین می کند که افزونه با تنظیم ویژگی iframe loading="lazy" از مکانیسم بارگذاری تنبل مرورگر استفاده می کند.

بارگذاری تنبل فیدهای اینستاگرام

اینستاگرام یک بلوک نشانه گذاری و یک اسکریپت را به عنوان بخشی از جاسازی ارائه می دهد. اسکریپت یک <iframe> را به صفحه تزریق می کند. بارگذاری تنبل این <iframe> می تواند عملکرد را بهبود بخشد زیرا اندازه جاسازی می تواند بیش از 100 کیلوبایت gzip باشد. بسیاری از افزونه های اینستاگرام برای سایت های وردپرس مانند WPZoom و Elfsight گزینه بارگذاری تنبل را ارائه می دهند.

جاسازی ها را با نما جایگزین کنید

در حالی که جاسازی‌های تعاملی به صفحه ارزش می‌افزایند، بسیاری از کاربران ممکن است با آنها تعامل نداشته باشند. به عنوان مثال، هر کاربری که در حال مرور یک صفحه رستوران است، روی نقشه جاسازی شده کلیک، گسترش، اسکرول و پیمایش نمی کند. به طور مشابه، هر کاربر به صفحه ارائه دهندگان خدمات مخابراتی با ربات چت ارتباط برقرار نمی کند. در این موارد می توانید با نمایش نما در جای خود از بارگیری یا تنبلی به طور کلی جلوگیری کنید.

یک نقشه جاسازی شده با ویژگی بزرگنمایی و کوچکنمایی.

یک نما نقشه — یک نمای نقشه که یک تصویر است.

نما یک عنصر ثابت است که شبیه به شخص ثالث جاسازی شده واقعی به نظر می رسد، اما کاربردی نیست و بنابراین، بارگذاری صفحه بسیار کمتر است. در زیر چند استراتژی برای بارگذاری بهینه چنین جاسازی‌ها و در عین حال ارائه مقداری ارزش به کاربر آورده شده است.

از تصاویر ثابت به عنوان نما استفاده کنید

می توان از تصاویر استاتیک به جای جاسازی های نقشه استفاده کرد که ممکن است نیازی به تعاملی کردن نقشه نداشته باشید. می توانید روی منطقه مورد نظر روی نقشه زوم کنید، یک تصویر بگیرید و از این به جای جاسازی نقشه تعاملی استفاده کنید. همچنین می توانید از قابلیت DevTools Capture اسکرین شات برای گرفتن اسکرین شات از عنصر iframe تعبیه شده استفاده کنید، همانطور که در زیر نشان داده شده است.

گرفتن اسکرین شات از گره

DevTools تصویر را به صورت png می گیرد، اما می توانید WebP format for better performance نیز تبدیل کنید.

از تصاویر پویا به عنوان نما استفاده کنید

این تکنیک به شما امکان می دهد در زمان اجرا تصاویری مطابق با یک جاسازی تعاملی ایجاد کنید. در زیر برخی از ابزارهایی وجود دارد که به شما امکان می‌دهد نسخه‌های استاتیک جاسازی‌ها را در صفحات خود ایجاد کنید.

Maps Static API : سرویس Google Maps Static API نقشه ای را بر اساس پارامترهای URL موجود در درخواست استاندارد HTTP ایجاد می کند و نقشه را به عنوان تصویری که می توانید در صفحه وب خود نمایش دهید، برمی گرداند. URL باید شامل کلید Google Maps API باشد و باید در تگ <img> در صفحه به عنوان ویژگی src قرار گیرد.
ابزار Static map maker به پیکربندی پارامترهای مورد نیاز برای URL کمک می کند و کد عنصر تصویر را در زمان واقعی به شما می دهد.
قطعه زیر کد یک تصویر را نشان می‌دهد که منبع آن روی URL استاتیک Maps API تنظیم شده است. این در یک برچسب پیوند گنجانده شده است که اطمینان حاصل می کند که نقشه واقعی با کلیک روی تصویر قابل دسترسی است. (توجه: ویژگی کلید API در 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>
```
اسکرین شات های توییتر : مشابه اسکرین شات های نقشه، این مفهوم به شما امکان می دهد به جای فید زنده، اسکرین شات توییتر را به صورت پویا جاسازی کنید. Tweetpik یکی از ابزارهایی است که می توان از آن برای گرفتن اسکرین شات از توییت ها استفاده کرد. Tweetpik API URL توییت را می پذیرد و تصویری را با محتوای آن برمی گرداند. API همچنین پارامترهایی را برای سفارشی کردن پس‌زمینه، رنگ‌ها، حاشیه‌ها و ابعاد تصویر می‌پذیرد.

از کلیک برای بارگذاری برای بهبود نما استفاده کنید

مفهوم کلیک برای بارگذاری، بارگذاری تنبل و نما را با هم ترکیب می کند. صفحه ابتدا با نما بارگیری می شود. هنگامی که کاربر با کلیک بر روی آن با مکان نگهدار ثابت تعامل می کند، جاسازی شخص ثالث بارگیری می شود. این الگوی تعاملی وارداتی نیز نامیده می شود و با استفاده از مراحل زیر قابل پیاده سازی است.

در بارگذاری صفحه: نما یا عنصر استاتیک در صفحه گنجانده شده است.
روی ماوس: نما از قبل به ارائه دهنده جاسازی شخص ثالث متصل می شود.
روی کلیک: نما با محصول شخص ثالث جایگزین می شود.

نماها را می‌توان با جاسازی‌های شخص ثالث برای پخش‌کننده‌های ویدیو، ویجت‌های چت، سرویس‌های احراز هویت و ابزارک‌های رسانه‌های اجتماعی استفاده کرد. جاسازی‌های ویدیوی یوتیوب که فقط تصاویر با دکمه پخش هستند، نماهایی هستند که اغلب با آن‌ها مواجه می‌شویم. ویدیوی واقعی فقط زمانی بارگیری می شود که روی تصویر کلیک کنید.

می‌توانید با استفاده از الگوی تعاملی وارداتی ، یک نمای کلیک-برای بارگذاری سفارشی بسازید یا از یکی از نماهای منبع باز زیر که برای انواع مختلف تعبیه‌ها موجود است استفاده کنید.

نمای یوتیوب
Lite-youtube-embed یک نمای پیشنهادی برای پخش کننده YouTube است که شبیه پخش کننده واقعی است اما 224 برابر سریعتر است. می توان از آن با دانلود اسکریپت و شیوه نامه و سپس استفاده از تگ <lite-youtube> در HTML یا جاوا اسکریپت استفاده کرد. پارامترهای پخش کننده سفارشی پشتیبانی شده توسط YouTube ممکن است از طریق ویژگی params گنجانده شود.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
در زیر مقایسه ای بین embed lite-youtube و embed واقعی ارائه شده است.
جاسازی لایت یوتیوب
جاسازی یوتیوب
سایر نماهای مشابه موجود برای پخش‌کننده‌های YouTube و Vimeo عبارتند از lite-youtube ، lite-vimeo-embed و lite-vimeo .
نمای ویجت چت
React-live-chat-loader دکمه‌ای را بارگیری می‌کند که به‌جای خود جاسازی، شبیه جاسازی چت است. می توان از آن با پلتفرم های مختلف ارائه دهنده چت مانند Intercom، Help Scout، Messenger و غیره استفاده کرد. ویجت مشابه بسیار سبک تر از ویجت چت است و سریعتر بارگیری می شود. هنگامی که کاربر ماوس را نگه می دارد یا روی دکمه کلیک می کند یا اگر صفحه برای مدت طولانی بیکار بوده است، می تواند با ویجت چت واقعی جایگزین شود. مطالعه موردی Postmark توضیح می‌دهد که آنها چگونه React-Live-chat-loader و بهبود عملکردی را که به دست آورده‌اند پیاده‌سازی کردند.

پیوندها را حذف یا جایگزین کنید

اگر متوجه شدید که برخی از تعبیه‌های شخص ثالث منجر به عملکرد ضعیف بارگیری می‌شوند و استفاده از هیچ یک از تکنیک‌های بالا گزینه‌ای نیست، ساده‌ترین کاری که می‌توانید انجام دهید حذف کامل جاسازی است. اگر همچنان می‌خواهید کاربرانتان بتوانند به محتوای موجود در جاسازی دسترسی داشته باشند، می‌توانید پیوندی به آن با target="_blank" ارائه دهید تا کاربر بتواند روی آن کلیک کرده و در برگه دیگری آن را مشاهده کند.

ثبات چیدمان

در حالی که بارگذاری پویا محتوای جاسازی شده می تواند عملکرد بارگذاری یک صفحه را بهبود بخشد، گاهی اوقات می تواند باعث حرکت غیرمنتظره محتوای صفحه شود. این به عنوان تغییر طرح شناخته می شود.

از آنجایی که ثبات بصری برای تضمین تجربه کاربری روان مهم است، تغییر چیدمان تجمعی (CLS) تعداد دفعات وقوع این تغییرات و میزان مخرب بودن آنها را اندازه گیری می کند.

با رزرو فضا در حین بارگذاری صفحه برای عناصری که قرار است بعداً به صورت پویا بارگذاری شوند، می توان از تغییرات طرح بندی جلوگیری کرد. مرورگر در صورتی که عرض و ارتفاع عناصر را بداند می تواند فضایی را که باید رزرو شود تعیین کند. می‌توانید با تعیین ویژگی‌های width و height iframe یا با تنظیم اندازه ثابت برای عناصر استاتیک که در آن جاسازی شخص ثالث بارگذاری می‌شود، از این اطمینان حاصل کنید. به عنوان مثال، یک iframe برای جاسازی YouTube باید دارای عرض و ارتفاع باشد که به صورت زیر مشخص شده است.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

جاسازی های محبوب مانند YouTube، Google Maps و Facebook کد جاسازی را با ویژگی های اندازه مشخص شده ارائه می دهند. با این حال، ممکن است ارائه دهندگانی وجود داشته باشند که این را شامل نمی شوند. به عنوان مثال، این قطعه کد ابعاد جاسازی حاصل را نشان نمی دهد.

<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>

می توانید از DevTools برای بررسی iframe تزریق شده پس از رندر شدن این صفحه استفاده کنید. همانطور که در قطعه زیر مشاهده می شود، ارتفاع iframe تزریق شده ثابت است در حالی که عرض به درصد مشخص شده است.

<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>

از این اطلاعات می توان برای تنظیم اندازه عنصر حاوی استفاده کرد تا اطمینان حاصل شود که ظرف هنگام بارگیری خوراک منبسط نمی شود و تغییری در طرح وجود ندارد. می‌توان از قطعه زیر برای اصلاح اندازه جاسازی موجود در قبل استفاده کرد.

<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>

Layout Shift Terminator

از آنجایی که تعبیه‌های شخص ثالث معمولاً ابعاد (عرض، ارتفاع) را برای محتوای نهایی که ارائه می‌کنند حذف می‌کنند، می‌توانند باعث تغییرات قابل توجهی در طرح‌بندی صفحه شوند. رفع این مشکل بدون بازرسی دستی اندازه‌های نهایی با استفاده از DevTools در اندازه‌های مختلف ویوپورت می‌تواند مشکل باشد.

اکنون یک ابزار خودکار به نام Layout Shift Terminator وجود دارد که می‌تواند به شما کمک کند تغییرات طرح‌بندی را از جاسازی‌های محبوب، مانند توییتر، فیس‌بوک و سایر ارائه‌دهندگان کاهش دهید.

Layout Shift Terminator:

جاسازی سمت سرویس گیرنده را در iframe بارگیری می کند.
اندازه iframe را به اندازه های مختلف نمای پرطرفدار تغییر می دهد.
برای هر نمای پرطرفدار، ابعاد جاسازی را به تصویر می‌کشد تا بعداً درخواست‌های رسانه و پرس‌وجوهای ظرف ایجاد شود.
اندازه یک پوشش حداقل ارتفاع در اطراف نشانه‌گذاری جاسازی را با استفاده از پرس‌وجوهای رسانه (و پرس‌وجوهای ظرف) تا زمانی که embed مقدار دهی اولیه شود (پس از آن سبک‌های حداقل ارتفاع حذف می‌شوند) اندازه می‌دهد.
یک قطعه جاسازی بهینه‌سازی شده ایجاد می‌کند که می‌تواند در جایی کپی/پیست شود که در غیر این صورت جاسازی را در صفحه خود قرار می‌دادید.

Layout Shift Terminator را امتحان کنید و هر گونه بازخوردی در مورد GitHub بگذارید. این ابزار در حالت بتا است و هدف آن بهبود در طول زمان با اصلاحات بیشتر است.

نتیجه

تعبیه‌های شخص ثالث می‌تواند ارزش زیادی برای کاربران ایجاد کند، اما با افزایش تعداد و اندازه جاسازی‌ها در یک صفحه، عملکرد ممکن است آسیب ببیند. به همین دلیل است که اندازه گیری، قضاوت و استفاده از استراتژی های بارگذاری مناسب برای جاسازی ها بر اساس موقعیت، ارتباط و نیازهای کاربران بالقوه ضروری است.