در سال 2021، تیم Chrome Aurora مؤلفه Script را برای بهبود عملکرد بارگیری اسکریپت های شخص ثالث در Next.js معرفی کرد. از زمان راه‌اندازی آن، ما قابلیت‌های آن را گسترش داده‌ایم تا بارگیری منابع شخص ثالث را برای توسعه‌دهندگان آسان‌تر و سریعتر کنیم.
این پست وبلاگ مروری بر ویژگی‌های جدیدتری که منتشر کرده‌ایم، به ویژه کتابخانه @next/third-parties ، و همچنین طرح کلی طرح‌های آینده در نقشه راه ما را ارائه می‌کند.
مفاهیم عملکرد اسکریپت های شخص ثالث
41٪ از تمام درخواست های شخص ثالث در سایت های Next.js اسکریپت هستند. برخلاف سایر انواع محتوا، اسکریپت‌ها می‌توانند زمان قابل‌توجهی را برای دانلود و اجرا صرف کنند، که می‌تواند رندر را مسدود کند و تعامل کاربر را به تاخیر بیندازد. داده‌های گزارش تجربه کاربر Chrome (CrUX) نشان می‌دهد که سایت‌های Next.js که اسکریپت‌های شخص ثالث بیشتری بارگیری می‌کنند، نرخ عبور کمتری از تعامل با رنگ بعدی (INP) و بزرگترین رنگ محتوایی (LCP) دارند.
همبستگی مشاهده شده در این نمودار دلالت بر علیت ندارد. با این حال، آزمایش‌های محلی شواهد بیشتری ارائه می‌دهند که اسکریپت‌های شخص ثالث به طور قابل‌توجهی بر عملکرد صفحه تأثیر می‌گذارند. به عنوان مثال، نمودار زیر معیارهای آزمایشگاهی مختلف را مقایسه می‌کند، زمانی که یک محفظه Google Tag Manager (شامل 18 برچسب به طور تصادفی انتخاب شده) به Taxonomy ، یک برنامه نمونه محبوب Next.js اضافه می‌شود.
مستندات WebPageTest جزئیاتی را در مورد نحوه اندازه گیری این زمان بندی ها ارائه می دهد. با یک نگاه سریع، واضح است که همه این معیارهای آزمایشگاهی تحت تأثیر ظرف GTM قرار دارند. به عنوان مثال، زمان مسدود کردن کل (TBT) - یک پروکسی آزمایشگاهی مفید که INP را تقریب می‌کند - تقریباً 20 برابر افزایش یافت.
جزء اسکریپت
هنگامی که مؤلفه <Script> را در Next.js ارسال کردیم، مطمئن شدیم که آن را از طریق یک API کاربر پسند که شباهت زیادی به عنصر سنتی <script> دارد، معرفی می‌کنیم. با استفاده از آن، توسعه دهندگان می توانند یک اسکریپت شخص ثالث را در هر مؤلفه ای در برنامه خود قرار دهند و Next.js پس از بارگیری منابع حیاتی، ترتیب اسکریپت را انجام می دهد.
<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />
<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />
<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />
ده‌ها هزار برنامه Next.js - از جمله سایت‌های محبوب مانند Patreon ، Target و Notion - از مؤلفه <Script> استفاده می‌کنند. با وجود اثربخشی آن، برخی از توسعه دهندگان نگرانی هایی را در مورد موارد زیر مطرح کرده اند:
- محل قرار دادن مؤلفه
<Script>در برنامه Next.js در حالی که به دستورالعمل‌های نصب مختلف ارائه‌دهندگان شخص ثالث مختلف پایبند هستید (تجربه توسعه‌دهنده) . - کدام استراتژی بارگیری برای اسکریپت های شخص ثالث مختلف (تجربه کاربر) بهینه ترین است.
برای رفع هر دوی این نگرانی‌ها، @next/third-parties را راه‌اندازی کردیم — یک کتابخانه تخصصی که مجموعه‌ای از مؤلفه‌ها و ابزارهای بهینه‌سازی شده را برای اشخاص ثالث محبوب ارائه می‌دهد.
تجربه توسعه‌دهنده: مدیریت کتابخانه‌های شخص ثالث را آسان‌تر می‌کند
بسیاری از اسکریپت‌های شخص ثالث در درصد قابل‌توجهی از سایت‌های Next.js استفاده می‌شوند که Google Tag Manager محبوب‌ترین آنهاست که به ترتیب توسط ۶۶٪ سایت‌ها استفاده می‌شود. @next/third-parties بر روی مولفه <Script> با معرفی پوشش‌های سطح بالاتر طراحی شده برای ساده‌سازی استفاده برای این موارد استفاده رایج ایجاد می‌کند.
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleTagManager gtmId="GTM-XYZ" />
</html>
);
}
Google Analytics - یکی دیگر از اسکریپت های شخص ثالث که به طور گسترده مورد استفاده قرار می گیرد ( 52٪ از سایت های Next.js ) - همچنین دارای یک جزء اختصاصی برای خود است.
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XYZ" />
</html>
);
}
@next/third-parties فرآیند بارگیری اسکریپت‌های رایج را ساده می‌کند، اما همچنین توانایی ما را برای توسعه ابزارهای کاربردی برای سایر دسته‌های شخص ثالث، مانند جاسازی‌ها، گسترش می‌دهد. به عنوان مثال، جاسازی‌های Google Maps و YouTube به ترتیب در 8 و 4 درصد از وب‌سایت‌های Next.js استفاده می‌شوند، و ما نیز مؤلفه‌هایی را برای آسان‌تر کردن بارگیری آنها ارسال کرده‌ایم.
import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";
export default function Page() {
return (
<>
<GoogleMapsEmbed
apiKey="XYZ"
height={200}
width="100%"
mode="place"
q="Brooklyn+Bridge,New+York,NY"
/>
<YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
</>
);
}
تجربه کاربر: باعث می شود کتابخانه های شخص ثالث سریعتر بارگذاری شوند
در یک دنیای عالی، هر کتابخانه شخص ثالثی که به طور گسترده پذیرفته شده است، کاملاً بهینه می شود و هرگونه انتزاعی که عملکرد آنها را بهبود می بخشد غیرضروری می شود. با این حال، تا زمانی که این امر به واقعیت تبدیل شود، می‌توانیم سعی کنیم تجربه کاربری آنها را با ادغام از طریق چارچوب‌های محبوبی مانند Next.js بهبود دهیم. ما می‌توانیم تکنیک‌های بارگذاری مختلف را آزمایش کنیم، اطمینان حاصل کنیم که اسکریپت‌ها به شیوه‌ای درست ترتیب‌بندی شده‌اند، و در نهایت بازخورد خود را با ارائه‌دهندگان شخص ثالث به اشتراک بگذاریم تا تغییرات بالادستی را تشویق کنیم.
برای مثال، جاسازی‌های YouTube را در نظر بگیرید. جایی که برخی از پیاده سازی های جایگزین عملکرد بسیار بهتری نسبت به تعبیه بومی دارند. در حال حاضر، مؤلفه <YouTubeEmbed> صادر شده توسط @next/third-parties از lite-youtube-embed استفاده می کند، که وقتی در مقایسه Next.js «Hello, World» نشان داده می شود، بسیار سریعتر بارگیری می شود.
به طور مشابه، برای Google Maps، loading="lazy" به عنوان یک ویژگی پیش‌فرض برای embed در نظر می‌گیریم تا اطمینان حاصل کنیم که نقشه تنها زمانی بارگیری می‌شود که فاصله معینی از درگاه دید داشته باشد. به نظر می‌رسد که این یک ویژگی واضح به نظر می‌رسد - به خصوص از آنجایی که اسناد Google Maps آن را در قطعه کد نمونه خود گنجانده است - اما فقط 45٪ از سایت‌های Next.js که Google Maps را جاسازی می‌کنند از loading="lazy" استفاده می‌کنند.
اجرای اسکریپت های شخص ثالث در یک وب کارگر
یکی از تکنیک‌های پیشرفته‌ای که در @next/third-parties در حال بررسی آن هستیم این است که بارگذاری اسکریپت‌های شخص ثالث را برای یک وب‌کار آسان‌تر می‌کند. این مورد که توسط کتابخانه‌هایی مانند Partytown رایج شده است، می‌تواند تأثیر اسکریپت‌های شخص ثالث را بر عملکرد صفحه به‌طور قابل‌توجهی با جابجایی کامل آنها از موضوع اصلی کاهش دهد.
GIF متحرک زیر تغییرات در وظایف طولانی و زمان مسدود کردن رشته اصلی را هنگام اعمال استراتژی‌های مختلف <Script> در یک ظرف GTM در یک سایت Next.js نشان می‌دهد. توجه داشته باشید که در حالی که جابه‌جایی بین گزینه‌های استراتژی فقط زمان اجرای این اسکریپت‌ها را به تاخیر می‌اندازد، جابجایی آنها به وب‌کارگر زمان آنها را در رشته اصلی کاملاً حذف می‌کند.
در این مثال خاص، انتقال اجرای کانتینر GTM و اسکریپت‌های برچسب مرتبط با آن به یک وب‌کارگر ، TBT را 92% کاهش داد .
شایان ذکر است که اگر این تکنیک به دقت مدیریت نشود، می‌تواند بی‌صدا بسیاری از اسکریپت‌های شخص ثالث را بشکند و اشکال‌زدایی را به چالش بکشد. در ماه‌های آینده، اگر مؤلفه‌های شخص ثالث ارائه‌شده توسط @next/third-parties به درستی در هنگام اجرا در وب‌کارگر به درستی کار کنند، تأیید می‌کنیم. اگر چنین است، ما در جهت ارائه راهی آسان و اختیاری برای توسعه دهندگان برای استفاده از این تکنیک کار خواهیم کرد.
مراحل بعدی
در فرآیند توسعه این بسته، آشکار شد که نیاز به متمرکز کردن توصیه‌های بارگذاری شخص ثالث وجود دارد تا سایر چارچوب‌ها نیز بتوانند از تکنیک‌های زیربنایی مورد استفاده بهره ببرند. این ما را بر آن داشت تا سرمایه شخص ثالث را بسازیم، کتابخانه ای که از JSON برای توصیف تکنیک های بارگذاری شخص ثالث استفاده می کند، که در حال حاضر به عنوان پایه ای برای @next/third-parties عمل می کند.
به عنوان گام‌های بعدی، تمرکز خود را بر بهبود مؤلفه‌های ارائه‌شده برای Next.js ادامه می‌دهیم و همچنین تلاش‌های خود را برای گنجاندن ابزارهای مشابه در سایر چارچوب‌های محبوب و پلت‌فرم‌های CMS گسترش خواهیم داد. ما در حال حاضر با نگهبانان Nuxt در حال همکاری هستیم و در حال برنامه ریزی برای انتشار ابزارهای مشابه شخص ثالث متناسب با اکوسیستم آنها در آینده نزدیک هستیم.
اگر یکی از شخص ثالثی که در برنامه Next.js خود استفاده می‌کنید توسط @next/third-parties پشتیبانی می‌شود، بسته را نصب کنید و به آن ضربه بزنید! ما دوست داریم نظرات شما را در مورد GitHub بشنویم.