في عام 2021، قدّم فريق Chrome Aurora مكوِّن النص البرمجي لتحسين أداء تحميل النصوص البرمجية التابعة لجهات خارجية في Next.js. ومنذ إطلاق هذه الخدمة، وسّعنا نطاق قدراتها من أجل تسهيل تحميل الموارد التابعة لجهات خارجية وتسريعها بالنسبة إلى المطوّرين.
تقدّم مشاركة المدونة هذه نظرة عامة حول أحدث الميزات التي أطلقناها، لا سيما مكتبة @next/rd-parties، بالإضافة إلى مخطط للمبادرات المستقبلية التي سيتم وضع خطة لها.
الآثار الناتجة عن أداء النصوص البرمجية التابعة لجهات خارجية
41% من جميع طلبات الجهات الخارجية في مواقع Next.js عبارة عن نصوص برمجية. على عكس أنواع المحتوى الأخرى، يمكن أن تستغرق النصوص البرمجية وقتًا طويلاً للتنزيل والتنفيذ، مما قد يؤدي إلى حظر العرض وتأخير تفاعل المستخدم. إنّ بيانات تقرير تجربة المستخدم في Chrome تُظهر أنّ المواقع الإلكترونية Next.js التي تحمِّل المزيد من النصوص البرمجية التابعة لجهات خارجية تسجّل معدّلات أقل لاجتياز مدى استجابة الصفحة لتفاعلات المستخدم (INP) وسرعة عرض أكبر محتوى مرئي (LCP).
الارتباط المرصود في هذا المخطط لا يتضمن السببية. ومع ذلك، توفّر التجارب المحلية دليلاً إضافيًا على أنّ النصوص البرمجية التابعة لجهات خارجية تؤثر بشكلٍ كبير في أداء الصفحة. على سبيل المثال، يقارن الرسم البياني التالي بين مقاييس مختبرية متنوعة عند إضافة حاوية "إدارة العلامات من Google"، تتألف من 18 علامة تم اختيارها عشوائيًا، إلى تصنيف، وهو مثال شائع على تطبيق Next.js.
توفر مستندات WebPageTest تفاصيل عن كيفية قياس هذه التوقيتات. من نظرة سريعة، يتضح أن جميع هذه المقاييس المعملية تتأثرت بحاوية GTM. على سبيل المثال، شهد إجمالي وقت الحظر (TBT)، وهو وكيل مختبَر مفيد يقارب مدى استجابة الصفحة لتفاعلات المستخدم (INP)، زيادة بمقدار 20 ضعفًا تقريبًا.
مكوِّن النص البرمجي
عندما شحننا مكوِّن <Script> في Next.js، حرصنا على تقديمه من خلال واجهة برمجة تطبيقات سهلة الاستخدام تشبه عنصر <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" هو الأكثر رواجًا، ويستخدمها 66% من المواقع الإلكترونية على التوالي.
تعتمد السمة @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" أيضًا على مكوّن مخصص خاص به، وهو نص برمجي آخر يُستخدم على نطاق واسع تابع لجهة خارجية (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" وتضمينات 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"، نضمّن loading="lazy" كسمة تلقائية
للتضمين لضمان تحميل الخريطة فقط عندما تكون على مسافة معيّنة من إطار العرض. قد يبدو أنّ هذه سمة واضحة يجب تضمينها، خاصةً وأن وثائق "خرائط Google" تتضمّنها في نموذج مقتطف الرمز، ولكن 45% فقط من مواقع Next.js التي تتضمّن "خرائط Google" تستخدم loading="lazy".
تشغيل نصوص برمجية تابعة لجهة خارجية في عامل ويب
من الأساليب المتقدّمة التي نستكشفها حاليًا في @next/third-parties تسهيل
نقل بيانات النصوص البرمجية التابعة لجهات خارجية إلى العامل على الويب. تحظى هذه العملية بشعبية كبيرة لدى المكتبات مثل Partytown، وقد يحدّ من تأثير النصوص البرمجية التابعة لجهات خارجية على أداء الصفحة بشكل كبير من خلال نقلها بالكامل خارج سلسلة التعليمات الرئيسية.
يعرض ملف GIF المتحرك التالي الاختلافات في المهام الطويلة ووقت حظر سلسلة التعليمات الرئيسية عند تطبيق استراتيجيات <Script> مختلفة على حاوية GTM ضمن موقع Next.js. لاحظ أنه على الرغم من أن التبديل بين خيارات الإستراتيجية لا يؤخر سوى
توقيت تنفيذ هذه النصوص البرمجية، فإن إعادة تحديدها إلى عامل ويب
يقض تمامًا وقتها في سلسلة التعليمات الرئيسية.
في هذا المثال بالذات، يتم نقل تنفيذ حاوية "إدارة العلامات من Google" والنصوص البرمجية للعلامات المرتبطة بها إلى عامل على الويب يؤدي إلى تقليل ما يتم تحديده لاحقًا بنسبة 92%.
وتجدر الإشارة إلى أنّه إذا لم تُدار هذه التقنية بعناية، قد تعطّل العديد من النصوص البرمجية التابعة لجهات خارجية بدون تنبيه، ما يجعل تصحيح الأخطاء أمرًا صعبًا. في الأشهر القادمة، سنتحقّق مما إذا كانت أي مكوّنات تابعة لجهات خارجية مقدَّمة من
@next/third-parties تعمل بشكل صحيح عند تشغيلها في مشغّل على الويب. إذا كان الأمر كذلك، فسنعمل على توفير طريقة سهلة واختيارية للمطورين لاستخدام هذا الأسلوب.
الخطوات التالية
وأثناء عملية تطوير هذه الحزمة، أصبح من الواضح أنّ هناك حاجة إلى تركيز توصيات التحميل من جهات خارجية كي تستفيد أُطر العمل الأخرى أيضًا من الأساليب الأساسية نفسها المستخدَمة. قادنا ذلك إلى إنشاء مكتبة رأس المال
التابعة لجهة خارجية، وهي مكتبة
تستخدم JSON لوصف أساليب التحميل التابعة لجهات خارجية، والتي تعمل حاليًا كأساس لـ @next/third-parties.
في خطواتنا التالية، سنواصل التركيز على تحسين المكونات المقدَّمة في Next.js، بالإضافة إلى توسيع جهودنا لتشمل أدوات مساعدة مماثلة في أُطر العمل ومنصّات نظام إدارة المحتوى (CMS) الأخرى الرائجة. نتعاون حاليًا مع عمّال صيانة Nuxt، ونخطط لإصدار أدوات مساعدة مماثلة تابعة لجهات خارجية تم تصميمها خصيصًا لمنظومة عملهم المتكاملة في المستقبل القريب.
إذا كانت إحدى الجهات الخارجية التي تستخدمها في تطبيق Next.js متوافقة مع
@next/third-parties،
يُرجى تثبيت الحزمة
وتجربتها. يسعدنا معرفة رأيك على GitHub.