مروری بر تکنیک‌های بارگذاری کارآمد افزونه‌های محبوب شخص ثالث.
بسیاری از سایت‌ها از جاسازی‌های شخص ثالث برای ایجاد یک تجربه کاربری جذاب با واگذاری برخی از بخش‌های یک صفحه وب به یک ارائه‌دهنده محتوای دیگر استفاده می‌کنند. رایج‌ترین نمونه‌های جاسازی‌های محتوای شخص ثالث، پخش‌کننده‌های ویدیو، فیدهای رسانه‌های اجتماعی، نقشه‌ها و تبلیغات هستند.
محتوای شخص ثالث می‌تواند از بسیاری جهات بر عملکرد یک صفحه تأثیر بگذارد. می‌تواند مانع رندر شود، با سایر منابع حیاتی برای شبکه و پهنای باند رقابت کند، یا بر معیارهای Core Web Vitals تأثیر بگذارد. جاسازی‌های شخص ثالث همچنین ممکن است هنگام بارگیری باعث تغییر طرح‌بندی شوند. این مقاله در مورد بهترین شیوه‌های عملکرد که می‌توانید هنگام بارگیری جاسازی‌های شخص ثالث استفاده کنید، تکنیک‌های بارگیری کارآمد و ابزار Layout Shift Terminator که به کاهش تغییرات طرح‌بندی برای جاسازی‌های محبوب کمک می‌کند، بحث می‌کند.
جاسازی چیست؟
جاسازی شخص ثالث هر محتوایی است که در سایت شما نمایش داده می‌شود و دارای ویژگی‌های زیر است:
- توسط شما نوشته نشده است
- از سرورهای شخص ثالث ارائه می‌شود
از Embed ها اغلب در موارد زیر استفاده می‌شود:
- وب‌سایت‌های مرتبط با ورزش، اخبار، سرگرمی و مد از ویدیوها برای تقویت محتوای متنی استفاده می‌کنند.
- سازمان‌هایی که حساب‌های کاربری فعال در توییتر یا رسانه‌های اجتماعی دارند، فیدهای این حساب‌ها را در صفحات وب خود قرار می‌دهند تا با افراد بیشتری تعامل داشته باشند و به آنها دسترسی پیدا کنند.
- صفحات رستوران، پارک و محل برگزاری رویدادها اغلب نقشه‌ها را در خود جای می‌دهند.
جاسازی‌های شخص ثالث معمولاً در عناصر <iframe> در صفحه بارگذاری می‌شوند. ارائه‌دهندگان شخص ثالث، قطعه کدهای HTML را ارائه می‌دهند که اغلب شامل یک <iframe> است که صفحه‌ای متشکل از نشانه‌گذاری، اسکریپت‌ها و شیوه‌نامه‌ها را دریافت می‌کند. برخی از ارائه‌دهندگان همچنین از یک قطعه اسکریپت استفاده می‌کنند که به صورت پویا یک <iframe> را برای دریافت محتوای دیگر تزریق می‌کند. این امر می‌تواند جاسازی‌های شخص ثالث را سنگین کند و با تأخیر در محتوای شخص ثالث، بر عملکرد صفحه تأثیر بگذارد.
تأثیر عملکرد جاسازی‌های شخص ثالث
بسیاری از جاسازی‌های محبوب شامل بیش از ۱۰۰ کیلوبایت جاوا اسکریپت هستند، گاهی اوقات حتی تا ۲ مگابایت. آنها زمان بیشتری برای بارگیری می‌گیرند و هنگام اجرا، رشته اصلی را مشغول نگه می‌دارند. ابزارهای نظارت بر عملکرد مانند 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>
بارگذاری تنبل
از آنجایی که محتوای شخص ثالث معمولاً پس از محتوای اصلی می‌آید، ممکن است هنگام بارگذاری صفحه در نمای دید قابل مشاهده نباشد. در این صورت، دانلود منابع شخص ثالث ممکن است تا زمانی که کاربر به آن قسمت از صفحه اسکرول کند، به تعویق بیفتد. این امر نه تنها به بهینه‌سازی بارگذاری اولیه صفحه کمک می‌کند، بلکه هزینه‌های دانلود را برای کاربرانی که از اینترنت ثابت و اتصالات شبکه کند استفاده می‌کنند، کاهش می‌دهد.
به تأخیر انداختن بارگذاری محتوا تا زمانی که واقعاً مورد نیاز باشد، بارگذاری تنبل (lazy-loading) نامیده می‌شود. بسته به نیازها و نوع جاسازی، می‌توانید از تکنیک‌های مختلف بارگذاری تنبل استفاده کنید.
بارگذاری تنبل مرورگر برای <iframe>
برای جاسازی‌های شخص ثالث که از طریق عناصر <iframe> بارگذاری می‌شوند، می‌توانید از بارگذاری تنبل در سطح مرورگر برای به تعویق انداختن بارگذاری iframeهای خارج از صفحه تا زمانی که کاربران در نزدیکی آنها اسکرول کنند، استفاده کنید. ویژگی بارگذاری برای <iframe> در همه مرورگرهای مدرن موجود است.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
ویژگی بارگذاری از مقادیر زیر پشتیبانی می‌کند:
-
lazy: نشان می‌دهد که مرورگر باید بارگذاری iframe را به تعویق بیندازد. مرورگر iframe را هنگامی که به محدوده دید نزدیک می‌شود، بارگذاری می‌کند. اگر iframe گزینه مناسبی برای بارگذاری lazy باشد، از این گزینه استفاده کنید. -
eager: آی‌فریم را فوراً بارگذاری می‌کند. اگر آی‌فریم گزینه مناسبی برای بارگذاری تنبل نباشد، از این گزینه استفاده کنید. اگر ویژگیloadingمشخص نشده باشد، این رفتار پیش‌فرض است - به جز در حالت Lite . -
auto: مرورگر تعیین می‌کند که آیا این فریم را lazy-load کند یا خیر.
مرورگرهایی که از ویژگی loading پشتیبانی نمی‌کنند، آن را نادیده می‌گیرند، بنابراین می‌توانید lazy-loading را در سطح مرورگر به عنوان یک بهبود تدریجی اعمال کنید. مرورگرهایی که از این ویژگی پشتیبانی می‌کنند، ممکن است پیاده‌سازی‌های متفاوتی برای آستانه distance-from-viewport (فاصله‌ای که iframe شروع به بارگیری می‌کند) داشته باشند.
در ادامه روش‌هایی برای بارگذاری تنبل iframeها برای انواع مختلف جاسازی‌ها ارائه شده است.
- ویدیوهای یوتیوب: برای بارگذاری تنبل iframe پخش‌کننده ویدیوی یوتیوب، ویژگی
loadingرا به کد جاسازی ارائه شده توسط یوتیوب اضافه کنید. بارگذاری تنبل جاسازی یوتیوب می‌تواند تقریباً ۵۰۰ کیلوبایت در بارگذاری اولیه صفحه صرفه‌جویی کند.
<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>
- نقشه‌های گوگل: برای بارگذاری تنبل iframe نقشه گوگل، ویژگی
loadingرا در کد مربوط به iframe embed تولید شده توسط Google Maps Embed API قرار دهید. در زیر نمونه‌ای از کد به همراه یک placeholder برای کلید 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>
کتابخانه lazysizes
از آنجا که مرورگرها علاوه بر سیگنال‌هایی مانند نوع اتصال مؤثر و حالت Lite، از فاصله‌ی یک جاسازی از viewport برای تصمیم‌گیری در مورد زمان بارگذاری یک iframe استفاده می‌کنند، بارگذاری تنبل مرورگر می‌تواند ناپایدار باشد. اگر به کنترل بهتری روی آستانه‌های فاصله نیاز دارید یا می‌خواهید یک تجربه بارگذاری تنبل سازگار در مرورگرها ارائه دهید، می‌توانید از کتابخانه lazysizes استفاده کنید.
lazysizes یک lazy loader سریع و سازگار با سئو برای تصاویر و iframe ها است. پس از دانلود این کامپوننت، می‌توانید آن را با یک iframe برای جاسازی یوتیوب به صورت زیر استفاده کنید.
<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>
به طور مشابه، lazysizeها ممکن است با iframeها برای سایر جاسازی‌های شخص ثالث استفاده شوند.
توجه داشته باشید که lazysizes از API مربوط به Intersection Observer برای تشخیص زمان قابل مشاهده شدن یک عنصر استفاده می‌کند.
استفاده از data-lazy در فیسبوک
فیسبوک انواع مختلفی از افزونه‌های اجتماعی را ارائه می‌دهد که می‌توان آنها را جاسازی کرد. این افزونه‌ها شامل پست‌ها، نظرات، ویدیوها و محبوب‌ترین دکمه لایک می‌شوند . همه افزونه‌ها شامل تنظیماتی برای data-lazy هستند. تنظیم آن روی true تضمین می‌کند که افزونه با تنظیم ویژگی iframe به loading="lazy" از مکانیزم بارگذاری تنبل مرورگر استفاده خواهد کرد.
بارگذاری تنبل فیدهای اینستاگرام
اینستاگرام یک بلوک نشانه‌گذاری و یک اسکریپت را به عنوان بخشی از جاسازی ارائه می‌دهد. این اسکریپت یک <iframe> را به صفحه تزریق می‌کند. بارگذاری تنبل این <iframe> می‌تواند عملکرد را بهبود بخشد زیرا جاسازی می‌تواند بیش از ۱۰۰ کیلوبایت در gzip شده حجم داشته باشد. بسیاری از افزونه‌های اینستاگرام برای سایت‌های وردپرس مانند WPZoom و Elfsight گزینه بارگذاری تنبل را ارائه می‌دهند.
جایگزین کردن جاسازی‌ها با نماها
در حالی که جاسازی‌های تعاملی به صفحه ارزش می‌افزایند، بسیاری از کاربران ممکن است با آنها تعامل نداشته باشند. به عنوان مثال، هر کاربری که در حال مرور صفحه یک رستوران است، روی جاسازی نقشه کلیک نمی‌کند، آن را باز نمی‌کند، اسکرول نمی‌کند و پیمایش نمی‌کند. به طور مشابه، هر کاربری که به صفحه ارائه دهندگان خدمات مخابراتی می‌رود، با چت‌بات تعامل نخواهد داشت. در این موارد، می‌توانید با نمایش یک نما به جای آن، از بارگیری یا بارگذاری تنبل جاسازی به طور کلی جلوگیری کنید.
نما (facade) یک عنصر استاتیک است که شبیه به عنصر شخص ثالث جاسازی‌شده واقعی به نظر می‌رسد اما کاربردی نیست و بنابراین، بار بسیار کمتری بر بارگذاری صفحه دارد. در ادامه چند استراتژی برای بارگذاری بهینه چنین عناصر جاسازی‌شده‌ای ارائه شده است که در عین حال برای کاربر ارزش افزوده نیز فراهم می‌کند.
از تصاویر ثابت به عنوان نما استفاده کنید
می‌توان از تصاویر ثابت به جای جاسازی نقشه استفاده کرد، جایی که ممکن است نیازی به تعاملی کردن نقشه نداشته باشید. می‌توانید روی منطقه مورد نظر روی نقشه زوم کنید، یک تصویر بگیرید و از آن به جای جاسازی نقشه تعاملی استفاده کنید. همچنین می‌توانید از ویژگی گرفتن اسکرین‌شات از گره DevTools برای گرفتن اسکرین‌شات از عنصر iframe جاسازی شده استفاده کنید.
DevTools تصویر را به صورت png ذخیره می‌کند، اما می‌توانید برای عملکرد بهتر، تبدیل آن به فرمت WebP را نیز در نظر بگیرید.
از تصاویر پویا به عنوان نما استفاده کنید
این تکنیک به شما امکان می‌دهد تصاویری مربوط به یک جاسازی تعاملی را در زمان اجرا تولید کنید. در ادامه برخی از ابزارهایی که به شما امکان می‌دهند نسخه‌های استاتیک جاسازی‌ها را در صفحات خود تولید کنید، آورده شده است.
API استاتیک نقشه‌ها : سرویس API استاتیک نقشه‌های گوگل، نقشه‌ای را بر اساس پارامترهای URL موجود در یک درخواست HTTP استاندارد تولید می‌کند و نقشه را به عنوان تصویری که می‌توانید در صفحه وب خود نمایش دهید، برمی‌گرداند. URL باید شامل کلید API نقشه‌های گوگل باشد و باید در تگ
<img>در صفحه به عنوان ویژگیsrcقرار گیرد.ابزار Static map maker به پیکربندی پارامترهای مورد نیاز برای URL کمک می‌کند و کد مربوط به عنصر تصویر را به صورت بلادرنگ در اختیار شما قرار می‌دهد.
قطعه کد زیر کدی را برای تصویری نشان می‌دهد که منبع آن روی یک URL API استاتیک Maps تنظیم شده است. این کد در یک تگ لینک گنجانده شده است که تضمین می‌کند با کلیک روی تصویر، می‌توان به نقشه واقعی دسترسی پیدا کرد. (نکته: ویژگی کلید 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 یکی از ابزارهایی است که می‌تواند برای گرفتن اسکرین‌شات از توییت‌ها استفاده شود. API Tweetpik آدرس اینترنتی توییت را می‌پذیرد و تصویری با محتوای آن را برمی‌گرداند. این API همچنین پارامترهایی را برای سفارشی‌سازی پس‌زمینه، رنگ‌ها، حاشیه‌ها و ابعاد تصویر می‌پذیرد.
برای بهبود نماها از کلیک برای بارگذاری استفاده کنید
مفهوم کلیک برای بارگذاری، بارگذاری تنبل و نماها را ترکیب می‌کند. صفحه در ابتدا با نما بارگذاری می‌شود. هنگامی که کاربر با کلیک روی placeholder استاتیک با آن تعامل می‌کند، جاسازی شخص ثالث بارگذاری می‌شود. این الگو همچنین به عنوان الگوی تعامل import on شناخته می‌شود و می‌تواند با استفاده از مراحل زیر پیاده‌سازی شود.
- بارگذاری صفحه: نما یا عنصر استاتیک در صفحه گنجانده می‌شود.
- با بردن ماوس: نما (Facade) از قبل به ارائه‌دهنده‌ی جاسازی شخص ثالث متصل می‌شود.
- با کلیک: نما (facade) با محصول شخص ثالث جایگزین می‌شود.
نماها (Facades) ممکن است با جاسازی‌های شخص ثالث برای پخش‌کننده‌های ویدیو، ابزارک‌های چت، سرویس‌های احراز هویت و ابزارک‌های رسانه‌های اجتماعی استفاده شوند. جاسازی‌های ویدیوی یوتیوب که فقط تصاویری با دکمه پخش هستند، نماهایی هستند که مرتباً با آنها مواجه می‌شویم. ویدیوی واقعی فقط زمانی بارگیری می‌شود که روی تصویر کلیک کنید.
شما می‌توانید با استفاده از الگوی تعامل import on، یک نمای کلیک-برای-بارگذاری سفارشی بسازید یا از یکی از نماهای متن‌باز زیر که برای انواع مختلف جاسازی‌ها موجود است، استفاده کنید.
نمای یوتیوب
Lite-youtube-embed یک نمای پیشنهادی برای پخش‌کننده یوتیوب است که ظاهری شبیه پخش‌کننده واقعی دارد اما ۲۲۴ برابر سریع‌تر است. می‌توان با دانلود اسکریپت و stylesheet و سپس استفاده از تگ
<lite-youtube>در HTML یا جاوا اسکریپت از آن استفاده کرد. پارامترهای پخش‌کننده سفارشی که توسط یوتیوب پشتیبانی می‌شوند را می‌توان از طریق ویژگیparamsوارد کرد.<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>در ادامه مقایسه‌ای بین lite-youtube-embed و خودِ embed انجام شده است.
جاسازی لایت-یوتیوب 
جاسازی یوتیوب سایر نماهای مشابه موجود برای پخش‌کننده‌های یوتیوب و ویمئو عبارتند از lite-youtube ، lite-vimeo-embed و lite-vimeo .
نمای ویجت چت
لودر چت زنده React، دکمه‌ای را بارگذاری می‌کند که به جای خودِ جاسازی، شبیه یک چت جاسازی شده است. می‌توان از آن با پلتفرم‌های مختلف ارائه دهنده چت مانند 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>
جاسازی‌های محبوب مانند یوتیوب، گوگل مپ و فیسبوک، کد جاسازی را با ویژگی‌های اندازه مشخص‌شده ارائه می‌دهند. با این حال، ممکن است ارائه‌دهندگانی وجود داشته باشند که این را شامل نمی‌شوند. برای مثال، این قطعه کد ابعاد جاسازی حاصل را نشان نمی‌دهد.
<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>
طرح بندی تغییر دهنده ترمیناتور
از آنجایی که جاسازی‌های شخص ثالث اغلب ابعاد (عرض، ارتفاع) را برای محتوای نهایی که ارائه می‌دهند، حذف می‌کنند، می‌توانند باعث تغییرات قابل توجهی در طرح‌بندی صفحه شوند. رفع این مشکل بدون بررسی دستی اندازه‌های نهایی با استفاده از DevTools در اندازه‌های مختلف نمایشگر، می‌تواند دشوار باشد.
اکنون یک ابزار خودکار به نام Layout Shift Terminator وجود دارد که می‌تواند به شما در کاهش تغییرات طرح‌بندی از طریق جاسازی‌های محبوب، مانند توییتر، فیسبوک و سایر ارائه‌دهندگان، کمک کند.
پایانه تغییر طرح بندی:
- بارگذاری سمت کلاینتِ جاسازی‌شده در یک iframe.
- اندازه iframe را به اندازه‌های مختلف ویوپورت محبوب تغییر می‌دهد.
- برای هر نمای محبوب، ابعاد جاسازی را ثبت می‌کند تا بعداً پرس‌وجوهای رسانه‌ای و پرس‌وجوهای کانتینر را تولید کند.
- با استفاده از کوئری‌های رسانه‌ای (و کوئری‌های کانتینر) اندازه‌ی یک پوشش با حداقل ارتفاع را در اطراف نشانه‌گذاری جاسازی تغییر می‌دهد تا زمانی که جاسازی مقداردهی اولیه شود (پس از آن استایل‌های حداقل ارتفاع حذف می‌شوند).
یک قطعه کد جاسازی بهینه‌شده تولید می‌کند که می‌توان آن را کپی و در جایی که در غیر این صورت، جاسازی را در صفحه خود قرار می‌دادید، جایگذاری کرد.
Layout Shift Terminator را امتحان کنید و در صورت تمایل می‌توانید نظرات خود را در مورد پروژه Layout Shift Terminator در گیت‌هاب با ما در میان بگذارید. این ابزار در حالت بتا است و هدف آن بهبود تدریجی با اصلاحات بیشتر است.
نتیجه‌گیری
جاسازی‌های شخص ثالث می‌توانند ارزش زیادی برای کاربران فراهم کنند، اما با افزایش تعداد و اندازه جاسازی‌ها در یک صفحه، عملکرد می‌تواند دچار مشکل شود. به همین دلیل است که اندازه‌گیری، قضاوت و استفاده از استراتژی‌های بارگذاری مناسب برای جاسازی‌ها بر اساس موقعیت، ارتباط و نیازهای کاربران بالقوه ضروری است.