با چشم‌انداز پشت مؤلفه Script در Next.js آشنا شوید که راه‌حلی داخلی برای بهینه‌سازی بار کردن اسکریپت‌های طرف سوم ارائه می‌دهد.
حدود ۴۵٪ از درخواست‌های وب‌سایت‌های ارائه‌شده در تلفن همراه و رایانه، درخواست‌های طرف سوم هستند که ۳۳٪ آن‌ها اسکریپت هستند. اندازه، تأخیر، و بار کردن اسکریپت‌های طرف سوم می‌تواند به‌طور قابل‌توجهی بر عملکرد سایت تأثیر بگذارد. مؤلفه Next.js Script با روال‌های مطلوب و پیش‌فرض‌های داخلی ارائه می‌شود تا به توسعه‌دهندگان کمک کند اسکریپت‌های طرف سوم را در برنامه‌هایشان معرفی کنند و درعین‌حال مشکلات عملکردی احتمالی را به‌طور آماده برطرف کنند.
دستورگان‌های طرف سوم و تأثیر آن‌ها بر عملکرد
دستورگان‌های طرف سوم به توسعه‌دهندگان وب اجازه می‌دهند تا از راهکارهای موجود برای پیاده‌سازی ویژگی‌های رایج و کاهش زمان توسعه استفاده کنند. اما سازندگان این دستورگان‌ها معمولاً انگیزه‌ای برای درنظر گرفتن تأثیر عملکرد بر وب‌سایت مصرف‌کننده ندارند. این اسکریپت‌ها برای توسعه‌دهندگانی که از آن‌ها استفاده می‌کنند نیز جعبه سیاه هستند.
اسکریپت‌ها بخش قابل‌توجهی از بایت‌های طرف سوم را تشکیل می‌دهند که توسط وب‌سایت‌ها در دسته‌های مختلف درخواست‌های طرف سوم بارگیری می‌شوند. به‌طور پیش‌فرض، مرورگر اسکریپت‌ها را براساس جایی که در سند قرار دارند اولویت‌بندی می‌کند که ممکن است باعث تأخیر در کشف یا اجرای اسکریپت‌های حیاتی برای تجربه کاربری شود.
کتابخانه‌های طرف سوم موردنیاز برای چیدمان باید زود بار شوند تا صفحه پرداز زده شود. اشخاص ثالثی که برای پرداز اولیه لازم نیستند باید به‌تأخیر انداخته شوند تا پردازش‌های دیگر را در رشته اصلی مسدود نکنند. Lighthouse دو ممیزی برای پرچم‌گذاری اسکریپت‌های مسدودکننده پرداز یا مسدودکننده رشته اصلی دارد.
مهم است که توالی بار کردن منابع صفحه‌تان را درنظر بگیرید تا منابع ضروری به‌تأخیر نیفتند و منابع غیرضروری منابع ضروری را مسدود نکنند.
اگرچه روال‌های مطلوبی برای کاهش تأثیر طرف‌های سوم وجود دارد، ممکن است همه افراد ندانند که چگونه این روال‌ها را برای هر طرف سومی که استفاده می‌کنند پیاده‌سازی کنند. این کار می‌تواند پیچیده باشد زیرا:
- به‌طور میانگین، وب‌سایت‌ها از ۲۱ تا ۲۳ شخص ثالث مختلف (ازجمله اسکریپت‌ها) در تلفن همراه و رایانه استفاده می‌کنند. استفاده و توصیه‌ها ممکن است برای هرکدام متفاوت باشد.
- پیاده‌سازی بسیاری از طرف‌های سوم می‌تواند براساس اینکه از چارچوب یا کتابخانه میانای کاربری خاصی استفاده می‌شود یا نه متفاوت باشد.
- کتابخانه‌های طرف سوم جدیدتر مرتباً معرفی می‌شوند.
- الزامات کسب‌وکار متفاوت مربوط به یک طرف سوم یکسان، استانداردسازی استفاده از آن را برای توسعه‌دهندگان دشوار می‌کند.
تمرکز Aurora بر متون شخص ثالث
بخشی از همکاری Aurora با چارچوب‌ها و ابزارهای وب متن‌باز، ارائه پیش‌فرض‌های قوی و ابزارهای تخصصی برای کمک به توسعه‌دهندگان در بهبود جنبه‌های تجربه کاربری مانند عملکرد، دسترس‌پذیری، امنیت، و آمادگی برای تلفن همراه است. در سال ۲۰۲۱، تمرکز ما بر کمک به پشته‌های چارچوب برای بهبود تجربه کاربری و سنجه‌های هسته‌های حیاتی وب آن‌ها بود.
یکی از مهم‌ترین گام‌ها برای دستیابی به هدف ما در بهبود عملکرد چارچوب، تحقیق درباره توالی بارگیری ایده‌آل اسکریپت‌های شخص ثالث در Next.js بود. چارچوب‌هایی مانند Next.js به‌طور منحصربه‌فردی برای ارائه پیش‌فرض‌ها و ویژگی‌های مفیدی که به توسعه‌دهندگان کمک می‌کند منابع، ازجمله منابع طرف سوم را به‌طور کارآمد بارگیری کنند، قرار گرفته‌اند. ما بایگانی HTTP و داده‌های Lighthouse را به‌طور گسترده مطالعه کردیم تا ببینیم کدام طرف‌های سوم بیشترین مسدودسازی پرداز را در چارچوب‌های مختلف دارند.
برای حل مشکل مسدود کردن رشته اصلی توسط اسکریپت‌های شخص ثالث استفاده‌شده در برنامه، مؤلفه اسکریپت را ساختیم. این مؤلفه ویژگی‌های توالی را کپسوله می‌کند تا کنترل‌های بهتری برای بار کردن اسکریپت طرف سوم به توسعه‌دهندگان ارائه دهد.
ترتیب‌بندی متن‌های شخص ثالث بدون مؤلفه چارچوب
راهنمایی‌های موجود برای کاهش تأثیر اسکریپت‌های مسدودکننده پرداز روش‌های زیر را برای بار کردن و توالی‌بندی کارآمد اسکریپت‌های طرف سوم ارائه می‌دهد:
از مشخصه
asyncیاdeferبا برچسب‌های<script>استفاده کنید که به مرورگر می‌گوید اسکریپت‌های طرف سوم غیرضروری را بدون مسدود کردن تجزیه‌کننده سند بار کند. دستورگان‌هایی که برای بار کردن اولیه صفحه یا اولین تعامل کاربر لازم نیستند ممکن است غیربحرانی درنظر گرفته شوند.<script src="https://example.com/script1.js" defer></script> <script src="https://example.com/script2.js" async></script>بااستفاده از پیش‌اتصال و واکشی اولیه DNS، اتصال‌های اولیه را به مبدأهای موردنیاز برقرار کنید. این کار به اسکریپت‌های مهم اجازه می‌دهد بارگیری را زودتر شروع کنند.
<head> <link rel="preconnect" href="http://PreconnThis.com"> <link rel="dns-prefetch" href="http://PrefetchThis.com"> </head>منابع و جاسازی‌های طرف سوم را پس‌از اتمام بار شدن محتوای صفحه اصلی یا زمانی که کاربر به بخشی از صفحه که این منابع در آن قرار دارند پیمایش می‌کند، به‌صورت کُند بار کنید.
عنصر Next.js Script
مؤلفه Next.js Script روش‌های بالا را برای توالی دستورگان پیاده‌سازی می‌کند و الگویی برای توسعه‌دهندگان ارائه می‌دهد تا استراتژی بارگیری خود را تعریف کنند. وقتی استراتژی مناسب مشخص شد، به‌طور بهینه و بدون مسدود کردن منابع مهم دیگر بار می‌شود.
مؤلفه Script براساس برچسب HTML <script> ساخته شده است و گزینه‌ای برای تنظیم اولویت بارگیری برای دستورگان‌های شخص ثالث بااستفاده از مشخصه strategy ارائه می‌دهد.
// Example for beforeInteractive:
<Script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver" strategy="beforeInteractive" />
// Example for afterInteractive (default):
<Script src="https://example.com/samplescript.js" />
// Example for lazyonload:
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />
مشخصه strategy می‌تواند سه مقدار داشته باشد.
beforeInteractive: این گزینه ممکن است برای دستورگان‌های حیاتی که باید قبل‌از تعاملی شدن صفحه اجرا شوند استفاده شود. Next.js تضمین می‌کند که چنین دستورگان‌هایی به HTML اولیه در سرور تزریق می‌شوند و قبل‌از سایر جاوا اسکریپت‌های خودبسته‌بندی‌شده اجرا می‌شوند. مدیریت موافقت، اسکریپت‌های تشخیص روبات، یا کتابخانه‌های کمکی موردنیاز برای ارائه محتوای مهم گزینه‌های خوبی برای این استراتژی هستند.afterInteractive: این استراتژی پیش‌فرض اعمال‌شده است و معادل بار کردن دستورگان با مشخصه defer است. باید برای دستورگان‌هایی استفاده شود که مرورگر می‌تواند پس‌از تعاملی شدن صفحه اجرا کند—برای مثال، دستورگان‌های تجزیه‌وتحلیل. Next.js این اسکریپت‌ها را در سمت کارخواه تزریق می‌کند و این اسکریپت‌ها پس‌از هیدراته شدن صفحه اجرا می‌شوند. بنابراین، مگر اینکه خلاف آن مشخص شده باشد، همه اسکریپت‌های شخص ثالث تعریف‌شده بااستفاده از عنصر Script توسط Next.js به‌تعویق می‌افتند و درنتیجه پیش‌فرض قوی‌ای ارائه می‌شود.lazyOnload: این گزینه ممکن است برای بار کردن کُند اسکریپت‌های با اولویت پایین در زمانی که مرورگر غیرفعال است استفاده شود. عملکردی که این اسکریپت‌ها ارائه می‌دهند بلافاصله پس‌از تعاملی شدن صفحه موردنیاز نیست—برای مثال، افزایه‌های گپ یا رسانه‌های اجتماعی.
توسعه‌دهندگان می‌توانند با مشخص کردن راهبرد، به Next.js بگویند که برنامه آن‌ها چگونه از یک اسکریپت استفاده می‌کند. این کار به چارچوب اجازه می‌دهد تا بهینه‌سازی‌ها و روال‌های مطلوب را برای بار کردن اسکریپت اعمال کند و درعین‌حال بهترین توالی بار کردن را تضمین کند.
بااستفاده از مؤلفه «اسکریپت»، توسعه‌دهندگان می‌توانند اسکریپت طرف سوم را در هرجایی از برنامه برای طرف‌های سوم با بارگیری دیرهنگام و در سطح سند برای اسکریپت‌های حیاتی قرار دهند. این نشان می‌دهد که مؤلفه Script ممکن است با مؤلفه‌ای که از اسکریپت استفاده می‌کند در یک مکان قرار داشته باشد. پس‌از هیدراتاسیون، بسته به استراتژی استفاده‌شده، اسکریپت به سر سند رندرشده اولیه یا به پایین بدنه تزریق می‌شود.
اندازه‌گیری تأثیر
ما از الگوهای Next.js برنامه تجارت و وبلاگ شروع‌کننده برای ایجاد دو برنامه نمایشی استفاده کردیم که به اندازه‌گیری تأثیر گنجاندن اسکریپت‌های شخص ثالث کمک کرد. طرف‌های سومی که معمولاً برای «مدیریت برچسب Google» و جاسازی‌های رسانه‌های اجتماعی استفاده می‌شوند، ابتدا مستقیماً در صفحه‌های این برنامه‌ها و سپس ازطریق مؤلفه «متن» گنجانده شدند. سپس عملکرد این صفحه‌ها را در WebPageTest مقایسه کردیم.
دست‌نوشته‌های طرف سوم در برنامه تجاری Next.js
متن‌های شخص ثالث به الگوی برنامه تجارت برای نسخه نمایشی به‌صورت زیر اضافه شدند.
مقایسه زیر پیشرفت بصری را برای هر دو نسخه کیت شروع تجارت Next.js نشان می‌دهد. همان‌طور که مشاهده می‌شود، با فعال شدن مؤلفه Script با استراتژی بارگیری مناسب، LCP تقریباً ۱ ثانیه زودتر رخ می‌دهد.
اسکریپت‌های طرف سوم در وبلاگ Next.js
متن‌های اشخاص ثالث به برنامه وبلاگ نمایشی اضافه شدند، همان‌طور که در زیر نشان داده شده است.
| پیش‌از | بعد از |
|---|---|
| Google Tag Manager با غیرهمگام | مؤلفه Script با strategy = lazyonload برای هریک از چهار اسکریپت |
| دکمه «دنبال کردن» توییتر با async | |
| دکمه اشتراک YouTube بدون async یا defer | |
| دکمه «دنبال کردن» LinkedIn بدون async یا defer |
همان‌طور که در ویدیو دیده می‌شود، اولین نقاشی دارای محتوا (FCP) در صفحه بدون مؤلفه Script در ۰٫۹ ثانیه و با مؤلفه Script در ۰٫۴ ثانیه رخ می‌دهد.
مورد بعدی برای عنصر «متن»
درحالی‌که گزینه‌های استراتژی برای afterInteractive و lazyOnload کنترل قابل‌توجهی بر اسکریپت‌های مسدودکننده رندر ارائه می‌دهند، ما همچنین درحال بررسی گزینه‌های دیگری هستیم که کاربرد مؤلفه «اسکریپت» را افزایش می‌دهند.
استفاده از وب‌ورکرها
از Web workers می‌توان برای اجرای دستورگان مستقل در رشته‌های پس‌زمینه استفاده کرد که می‌تواند رشته اصلی را برای رسیدگی به پردازش تکالیف میانای کاربر آزاد کند و عملکرد را بهبود بخشد. Web Workers برای تخلیه پردازش جاوا اسکریپت، به‌جای کار واسط کاربر، از رشته اصلی مناسب‌تر است. اسکریپت‌هایی که برای پشتیبانی مشتری یا بازاریابی استفاده می‌شوند و معمولاً با میانای کاربر تعامل ندارند، ممکن است گزینه‌های خوبی برای اجرا در رشته پس‌زمینه باشند. می‌توان از یک کتابخانه شخص ثالث سبک—PartyTown—برای جداسازی چنین اسکریپت‌هایی در یک وب‌ورکر استفاده کرد.
با پیاده‌سازی فعلی مؤلفه اسکریپت Next.js، توصیه می‌کنیم این اسکریپت‌ها را در رشته اصلی با تنظیم استراتژی روی afterInteractive یا lazyOnload به‌تعویق بیندازید. در آینده، پیشنهاد می‌کنیم گزینه استراتژی جدیدی به‌نام 'worker' معرفی شود که به Next.js اجازه می‌دهد از PartyTown یا راه‌حل سفارشی برای اجرای دستورگان در وب‌ورکرها استفاده کند. از نظرات توسعه‌دهندگان درباره این RFC استقبال می‌کنیم.
به حداقل رساندن CLS
جاسازی‌های شخص ثالث مانند تبلیغات، ویدیو، یا جاسازی‌های فید رسانه‌های اجتماعی می‌توانند هنگام بارگذاری کُند باعث تغییر چیدمان شوند. این امر بر تجربه کاربری و سنجه تغییر چیدمان تجمعی (CLS) برای صفحه تأثیر می‌گذارد. با مشخص کردن اندازه ظرفی که جاسازی در آن بار می‌شود، می‌توان CLS را به‌حداقل رساند.
ممکن است از مؤلفه Script برای بار کردن جاسازی‌هایی استفاده شود که می‌توانند باعث تغییر چیدمان شوند. درحال بررسی تقویت آن هستیم تا گزینه‌های پیکربندی‌ای ارائه دهیم که به کاهش CLS کمک کند. این مورد می‌تواند در خود مؤلفه «اسکریپت» یا به‌عنوان مؤلفه همراه دردسترس قرار گیرد.
اجزای بسته‌بندی‌کننده
نحو و راهبرد بار کردن برای گنجاندن اسکریپت‌های طرف سوم محبوب مثل Google Analytics یا Google Tag Manager (GTM) معمولاً ثابت است. این‌ها را می‌توان در مؤلفه‌های پوشاننده جداگانه برای هر نوع اسکریپت کپسوله‌سازی کرد. فقط مجموعه حداقلی از مشخصه‌های مختص برنامه (مثل شناسه ردیابی) برای توسعه‌دهندگان دردسترس خواهد بود. عناصر پوشاننده به توسعه‌دهندگان کمک می‌کنند تا:
- این کار باعث می‌شود که آن‌ها راحت‌تر بتوانند برچسب‌های دستورگان پرطرفدار را اضافه کنند.
- اطمینان از اینکه چارچوب از بهینه‌ترین استراتژی در پشت صحنه استفاده می‌کند.
نتیجه‌گیری
دستورات طرف سوم معمولاً برای گنجاندن ویژگی‌های خاص در وب‌سایت مصرف‌کننده ایجاد می‌شوند. برای کاهش تأثیر اسکریپت‌های غیربحرانی، توصیه می‌کنیم آن‌ها را به‌تعویق بیندازید—که مؤلفه Next.js Script به‌طور پیش‌فرض این کار را انجام می‌دهد. توسعه‌دهندگان مطمئن هستند که دستورگان‌های گنجانده‌شده عملکرد حیاتی را به‌تأخیر نمی‌اندازند، مگراینکه صریحاً استراتژی beforeInteractive را اعمال کنند. توسعه‌دهندگان چارچوب نیز می‌توانند مانند مؤلفه Next.js Script، این ویژگی‌ها را در چارچوب‌های دیگر بسازند. ما به‌طور فعال درحال بررسی ارائه مؤلفه مشابهی با تیم Nuxt.js هستیم. براساس بازخوردها، امیدواریم مؤلفه دستورگان را بیشتر بهبود دهیم تا موارد استفاده بیشتری را پوشش دهد.
سپاس‌گزاری
با تشکر از Kara Erickson، Janicklas Ralph، Katie Hempenius، Philip Walton، Jeremy Wagner، و Addy Osmani برای بازخوردشان درباره این پست.