حزمة Next.js لإدارة مكتبات الجهات الخارجية

Houssein Djirdeh

في عام 2021، قدّم فريق Chrome Aurora النص البرمجي. لتحسين تحميل أداء النصوص البرمجية التابعة لجهات خارجية في Next.js. منذ إطلاقها، أجرينا توسيع إمكاناتها لتسهيل عملية تحميل الموارد التابعة لجهات خارجية بشكل أسرع للمطورين.

تقدم مشاركة المدونة هذه نظرة عامة حول أحدث الميزات التي أصدرناها، ومعظمها ولا سيما @next/third-parties بالإضافة إلى مخطط تفصيلي للمبادرات المستقبلية بشأن خارطة الطريق لدينا.

الآثار المترتبة على الأداء في النصوص البرمجية التابعة لجهات خارجية

41% من جميع طلبات الجهات الخارجية في مواقع Next.js الإلكترونية هي نصوص برمجية. على عكس المحتوى الآخر أنواع النصوص البرمجية، فقد تستغرق عملية التنزيل والتنفيذ وقتًا طويلاً، ما قد يؤدي إلى حظر العرض وتأخير تفاعل المستخدم. البيانات من متصفِّح Chrome يُظهر تقرير تجربة المستخدم (CrUX) أنّ مواقع Next.js التي تحمِّل المزيد من المواقع الإلكترونية التابعة لجهات خارجية تكون النصوص البرمجية ذات نسبة مدى استجابة الصفحة لتفاعلات المستخدم التالية أقل (مدى استجابة الصفحة لتفاعلات المستخدم (INP) وسرعة عرض أكبر محتوى مرئي (LCP): معدلات النجاح

رسم بياني شريطي يوضّح انخفاضًا في النسبة المئوية لنقاط Next.js التي تحقّق نتائج جيدة لكلٍّ من INP وLCP بما يتناسب مع عدد الجهات الخارجية التي تم تحميلها.
تقرير CrUX لشهر كانون الأول (ديسمبر) 2023 (110,823 موقعًا)

الارتباط المرصود في هذا الرسم البياني لا يتضمن السببية. في المقابل، محلية تقدّم التجارب دليلاً إضافيًا على أنّ النصوص البرمجية التابعة لجهات خارجية في أداء الصفحة. فعلى سبيل المثال، يقارن الرسم البياني أدناه بين التمارين المعملية المختلفة عند وجود حاوية في "إدارة العلامات من Google"، وتتألف من 18 عنصرًا تمّ اختياره عشوائيًا العلامات — إلى تصنيف، وهو مثال شائع لـ Next.js التطبيق.

رسم بياني شريطي يوضّح الفرق في المقاييس الاختبارية المختلفة عند تحميل موقع إلكتروني باستخدام أداة "إدارة العلامات من Google" أو بدونها
WebPageTest (Mobile 4G - فيرجينيا في الولايات المتحدة الأمريكية)

وثائق 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 الإشعار: استخدِم المكوِّن <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 عند إظهاره في "Hello, World" (مرحبًا بالعالم) مقارنة Next.js، يتم تحميلها إلى حد كبير بسرعة أكبر.

ملف GIF يعرض مقارنة تحميل الصفحة بين مكوِّن تضمين YouTube وإطار iframe عادي في YouTube
WebPageTest (Mobile 4G - فيرجينيا في الولايات المتحدة الأمريكية)

وبالمثل، بالنسبة إلى "خرائط Google"، سنُضمّن loading="lazy" كسمة تلقائية التضمين لضمان تحميل الخريطة فقط عند بُعد مسافة معينة من إطار العرض. قد يبدو هذا سمة واضحة يجب تضمينها - خاصة نظرًا لأن خرائط Google المستندات يدرجها في مثال مقتطف الرمز - ولكن % 45 من مواقع Next.js التي تضمّن "خرائط Google" تستخدم loading="lazy".

تشغيل نصوص برمجية تابعة لجهة خارجية في عامل ويب

أحد الأساليب المتقدمة التي نستكشفها في @next/third-parties هو من الأسهل تحميل النصوص البرمجية التابعة لجهات خارجية إلى مشغِّل الويب. تم النشر بواسطة مكتبات مثل Partytown، فقد يؤدي ذلك إلى تقليل تأثير النصوص البرمجية التابعة لجهات خارجية في أداء الصفحة بشكل ملحوظ من خلال ونقلها بالكامل خارج سلسلة التعليمات الرئيسية

ملف GIF المتحرّك التالي يعرض الاختلافات في المهام الطويلة وسلسلة المحادثات الرئيسية وقت الحظر عند تطبيق استراتيجيات <Script> مختلفة على حاوية "إدارة العلامات من Google" داخل موقع Next.js. لاحظ أنه أثناء التبديل بين خيارات الإستراتيجية فقط يؤخر توقيت تنفيذ هذه النصوص البرمجية، وينقلها إلى مشغِّل الويب يؤدي إلى إهدار وقتهم في سلسلة التعليمات الرئيسية

ملف GIF يعرض الاختلافات في وقت حظر سلسلة المحادثات الرئيسية لاستراتيجيات النصوص البرمجية المختلفة
WebPageTest (Mobile 4G - فيرجينيا في الولايات المتحدة الأمريكية)

في هذا المثال بالذات، إنّ نقل تنفيذ حاوية "إدارة العلامات من Google" من النصوص البرمجية للعلامات المرتبطة بها إلى عامل على الويب خفض الوقت الذي يتم تحديده لـ TBT بنسبة 92%.

والجدير بالملاحظة أنه إذا لم تتم إدارة هذا الأسلوب بعناية، فيمكن أن يؤدي ذلك بدون إزعاج اختراق العديد من النصوص البرمجية التابعة لجهات خارجية، مما يجعل تصحيح الأخطاء أمرًا صعبًا. في الأحداث القادمة سنتحقق مما إذا كانت هناك أي مكونات تابعة لجهات خارجية مقدمة من يعمل @next/third-parties بشكل صحيح عند تشغيله في عامل على الويب. إذا كان الأمر كذلك، فسوف لتوفير طريقة سهلة واختيارية يمكن للمطوّرين استخدام هذه .

الخطوات التالية

وأثناء عملية تطوير هذه الحزمة، أصبح من الواضح أن هناك إلى تجميع اقتراحات التحميل من جهات خارجية بحيث لا تقتصر أطر العمل الأخرى أيضًا من نفس الأساليب الأساسية المستخدمة. قادنا هذا إلى إصدار جهة خارجية رأس المال، مكتبة تستخدم JSON لوصف أساليب التحميل من جهات خارجية، وهي حاليًا كأساس لـ @next/third-parties.

في خطواتنا التالية، سنواصل التركيز على تحسين المكونات المقدّمة. لـ Next.js بالإضافة إلى توسيع جهودنا لتضمين برامج خدمات مشابهة في أطر العمل الشائعة وأنظمة أنظمة إدارة المحتوى (CMS) نحن نعمل حاليًا بالتعاون مع Nuxt ويخطّطون لإصدار أدوات مساعدة مماثلة تابعة لجهات خارجية ومخصّصة لنظامها البيئي في المستقبل القريب.

إذا كان أحد الجهات الخارجية التي تستخدمها في تطبيق Next.js متوافقًا مع @next/third-parties, تثبيت الحزمة وتجربته! نود أن نسمع ملاحظاتك حول GitHub.