تحسين تحميل النص البرمجي التابع لجهة خارجية في Next.js

تعرّف على الرؤية وراء مكوِّن النص البرمجي الخاص بـ Next.js، والذي يوفر حلاً مضمّنًا لتحسين تحميل النصوص البرمجية التابعة لجهات خارجية.

Leena Sohoni

Houssein Djirdeh

حوالي 45% من الطلبات الواردة من المواقع الإلكترونية التي يتم عرضها على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي هي طلبات من جهات خارجية، و% 33 منها هي نصوص برمجية. يمكن أن يؤثر حجم النصوص البرمجية التابعة لجهات خارجية ووقت الاستجابة والتحميل بشكل كبير في أداء الموقع الإلكتروني. يأتي مكوِّن النص البرمجي Next.js مع أفضل الممارسات والإعدادات التلقائية لمساعدة المطوّرين في تقديم نصوص برمجية تابعة لجهات خارجية في تطبيقاتهم مع معالجة مشاكل الأداء المحتملة بطريقة غير تقليدية.

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

تتيح النصوص البرمجية التابعة لجهات خارجية لمطوّري الويب الاستفادة من الحلول الحالية لتنفيذ الميزات الشائعة وتقليل وقت التطوير. في المقابل، لا يملك منشئو هذه النصوص البرمجية أيّ حافز للنظر في تأثير الأداء في الموقع الإلكتروني المستخدَم. تُعد هذه النصوص البرمجية أيضًا مربعًا أسود للمطورين الذين يستخدمونها.

تمثل النصوص البرمجية عددًا كبيرًا من وحدات البايت التابعة لجهات خارجية التي تنزّلها المواقع الإلكترونية على مستوى فئات مختلفة من طلبات الجهات الخارجية. بشكل افتراضي، يعطي المتصفح الأولوية للنصوص البرمجية بناءً على مكان وجودها في المستند، ما قد يؤخر اكتشاف أو تنفيذ النصوص البرمجية المهمة لتجربة المستخدم.

يجب تحميل مكتبات الجهات الخارجية المطلوبة للتنسيق مبكرًا لعرض الصفحة. يجب تأجيل الجهات الخارجية غير المطلوبة للعرض الأولي حتى لا تحظر عمليات معالجة أخرى في سلسلة التعليمات الرئيسية. تتضمّن Lighthouse عمليتي تدقيق للإشارة إلى النصوص البرمجية لحظر العرض أو حظر سلسلة المحادثات الرئيسية.

ومن المهم مراعاة تسلسل تحميل الموارد في صفحتك حتى لا تتأخر الموارد المهمة ولا تحظر الموارد غير المهمة الموارد المهمة.

في حين أنّ هناك أفضل الممارسات للحدّ من تأثير الجهات الخارجية، قد لا يكون الجميع على دراية بكيفية تنفيذها لكل جهة خارجية يستخدمونها. وقد يكون هذا الأمر معقّدًا للأسباب التالية:

• في المتوسط، تستخدم المواقع الإلكترونية من 21 إلى 23 جهة خارجية مختلفة، بما في ذلك النصوص البرمجية، على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. قد تختلف طريقة الاستخدام والاقتراحات من مستخدم لآخر.
• قد يختلف تنفيذ العديد من الجهات الخارجية استنادًا إلى ما إذا كان يتم استخدام إطار عمل معيّن أو مكتبة واجهة مستخدم معيّنة.
• يتم تقديم مكتبات أحدث تابعة لجهات خارجية بشكل متكرر.
• إنّ المتطلبات المختلفة للأنشطة التجارية والمرتبطة بالجهة الخارجية نفسها، تصعّب على المطوّرين توحيد استخدام هذه الجهة.

تركيز Aurora على النصوص البرمجية التابعة لجهات خارجية

يتمثّل جزء من تعاون Aurora مع أطر عمل وأدوات الويب المفتوحة المصدر في توفير أدوات تلقائية قوية وأدوات تتضمّن الآراء لمساعدة المطوّرين في تحسين جوانب تجربة المستخدم، مثل الأداء وإمكانية الوصول والأمان وجاهزية الأجهزة الجوّالة. في عام 2021، ركّزنا على مساعدة مجموعات إطار العمل في تحسين تجربة المستخدم ومقاييس مؤشرات أداء الويب الأساسية.

من أهم الخطوات التي أدت إلى تحقيق هدفنا المتمثل في تحسين أداء إطار العمل البحث عن تسلسل التحميل المثالي للنصوص البرمجية التابعة لجهات خارجية في Next.js. تم وضع أطر العمل مثل Next.js بشكل فريد لتوفير إعدادات تلقائية وميزات مفيدة تساعد المطوّرين على تحميل الموارد بكفاءة، بما في ذلك الجهات الخارجية. درسنا أرشيف HTTP وLighthouse البيانات الشاملة لتحديد الجهات الخارجية الأكثر عرض حظر عبر أطر العمل المختلفة.

لمعالجة مشكلة حظر سلسلة التعليمات الرئيسية للنصوص البرمجية التابعة لجهات خارجية والمستخدمة في أحد التطبيقات، أنشأنا مكوِّن النص البرمجي. يغلف المكوِّن ميزات التسلسل لتزويد المطورين بعناصر تحكم أفضل لتحميل النص البرمجي التابع لجهات خارجية.

تسلسل النصوص البرمجية التابعة لجهات خارجية بدون مكوّن إطار عمل

إنّ الإرشادات المتوفّرة للحدّ من تأثير النصوص البرمجية التي تحظر العرض توفّر الطرق التالية لتحميل النصوص البرمجية التابعة لجهات خارجية وتسلسلها بكفاءة:

1. يمكنك استخدام السمة async أو defer مع علامات <script> التي تطلب من المتصفّح تحميل نصوص برمجية غير مهمة وتابعة لجهات خارجية بدون حظر محلّل المستند. النصوص البرمجية غير المطلوبة للتحميل الأولي للصفحة أو التفاعل الأول من جانب المستخدم قد يتم اعتبارها غير مهمة.

      <script src="https://example.com/script1.js" defer></script>
      <script src="https://example.com/script2.js" async></script>
   

2. إنشاء اتصالات مبكرة بالمصادر المطلوبة باستخدام الاتصال المُسبَق والجلب المسبق لنظام أسماء النطاقات ويسمح هذا الإجراء ببدء تنزيل النصوص البرمجية المهمة في وقت مبكر.

      <head>
          <link rel="preconnect" href="http://PreconnThis.com">
          <link rel="dns-prefetch" href="http://PrefetchThis.com">
      </head>
   

3. تضمين الموارد والمصادر التابعة لجهات خارجية باستخدام التحميل الكسول بعد انتهاء تحميل محتوى الصفحة الرئيسية أو عندما ينتقل المستخدم للأسفل إلى جزء الصفحة الذي تم تضمينها فيه

مكوِّن النص البرمجي Next.js

ينفِّذ مكوِّن النص البرمجي Next.js الطرق المذكورة أعلاه لتسلسل النصوص البرمجية ويوفر نموذجًا للمطوِّرين لتحديد استراتيجية التحميل. وبعد تحديد الاستراتيجية المناسبة، سيتم تحميلها على النحو الأمثل بدون حظر موارد مهمة أخرى.

يعتمد مكوِّن النص البرمجي على علامة HTML <script>، ويوفر خيارًا لتعيين أولوية التحميل للنصوص البرمجية التابعة لجهات خارجية باستخدام سمة الإستراتيجية.

// 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" />

يمكن استخدام ثلاث قيم لسمة الإستراتيجية.

1. beforeInteractive: يمكن استخدام هذا الخيار للنصوص البرمجية المهمة التي يجب تنفيذها قبل أن تصبح الصفحة تفاعلية. يضمن Next.js أن يتم إدخال مثل هذه النصوص البرمجية في HTML الأولي على الخادم وتنفيذها قبل جافا سكريبت أخرى مجمعة ذاتيًا. إنّ إدارة الموافقة أو النصوص البرمجية لرصد برامج التتبُّع أو المكتبات المساعدة المطلوبة لعرض المحتوى المهمّ تكون مرشحة بشكل جيد لهذه الاستراتيجية.

2. afterInteractive: هذه هي الاستراتيجية التلقائية المطبَّقة وهي تعادل تحميل نص برمجي يتضمّن سمة التأجيل. يجب استخدامه للنصوص البرمجية التي يمكن للمتصفّح تشغيلها بعد أن تصبح الصفحة تفاعلية، على سبيل المثال، النصوص البرمجية للتحليلات. يُدخِل Next.js هذه النصوص البرمجية من جانب العميل، ويتم تشغيلها بعد ترطيب الصفحة. وبالتالي، ما لم يُنصّ على خلاف ذلك، يؤجّل Next.js جميع النصوص البرمجية التابعة لجهات خارجية والمحددة باستخدام مكوِّن النص البرمجي، ما يوفّر قيمة تلقائية قوية.

3. lazyOnload: يمكن استخدام هذا الخيار لتحميل النصوص البرمجية ذات الأولوية المنخفضة باستخدام طريقة التحميل الكسول عندما يكون المتصفّح غير نشِط لفترة قصيرة. لا يلزم استخدام الوظائف التي توفّرها هذه النصوص البرمجية مباشرةً بعد أن تصبح الصفحة تفاعلية، مثل المكوّنات الإضافية للدردشة أو وسائل التواصل الاجتماعي.

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

تنبيه: بما أنّ الاستراتيجية التلقائية المستخدَمة هي afterInteractive، على المطوّرين تذكُّر ضبط الاستراتيجية على beforeInteractive في النصوص البرمجية اللازمة لعرض الصفحة.

باستخدام مكوِّن "النص البرمجي"، يمكن للمطوّرين وضع نص برمجي تابع لجهة خارجية في أي مكان في التطبيق للجهات الخارجية التي تم تحميلها في وقت متأخر وعلى مستوى المستند للنصوص البرمجية المهمة. وهذا يعني أنّه يمكن مشاركة موضع مكوّن النص البرمجي مع المكوِّن الذي يستخدم النص البرمجي. بعد تحويل صفحة ويب ثابتة إلى صفحة ديناميكية، سيتم إدخال النص البرمجي في رأس المستند المعروض في البداية أو أسفل النص، بناءً على الاستراتيجية المستخدَمة.

قياس التأثير

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

النصوص البرمجية التابعة لجهات خارجية في تطبيق تجاري Next.js

تمت إضافة نصوص برمجية تابعة لجهات خارجية إلى نموذج التطبيق التجاري الخاص بالعرض التوضيحي كما هو موضّح أدناه.

إعداد مكوّن النص البرمجي ومكوّن النص البرمجي للإصدار التجريبي 1 باستخدام نصَّين برمجيَين

قبل	بعد
إدارة العلامات من Google مع البيانات غير المتزامنة	مكوّن النص البرمجي الذي يتضمّن الإستراتيجية = AfterInteractive لكلا النصَّين البرمجيَين
زر المتابعة في Twitter بدون مزامنة أو تأجيل

تعرض المقارنة التالية التقدم المرئي لكلا الإصدارين من مجموعة أدوات المبتدئين Next.js commerce. كما هو موضّح، يحدث مقياس LCP قبل ثانية واحدة تقريبًا من خلال تفعيل مكوِّن النص البرمجي عند تفعيل استراتيجية التحميل الصحيحة.

النصوص البرمجية التابعة لجهات خارجية في مدونة Next.js

تمت إضافة نصوص برمجية تابعة لجهات خارجية إلى تطبيق المدونة التجريبي كما هو موضّح أدناه.

إعداد مكوِّن النص البرمجي ومكوِّن النص البرمجي للإصدار التجريبي 2 الذي يتضمّن 4 نصوص برمجية.

قبل	بعد
إدارة العلامات من Google مع البيانات غير المتزامنة	مكوّن النص البرمجي الذي يتضمّن الاستراتيجية = lazyonload لكل من النصوص البرمجية الأربعة
زر المتابعة في Twitter مع مزامنة
زر الاشتراك في YouTube بدون مزامنة أو تأجيل
زر المتابعة على LinkedIn بدون مزامنة أو تأجيل

كما هو موضّح في الفيديو، يتم تسجيل سرعة عرض أول محتوى مرئي (FCP) عند 0.9 ثانية على الصفحة بدون مكوّن النص البرمجي و0.4 ثانية مع مكوِّن النص البرمجي.

الخطوة التالية لمكون النص البرمجي

على الرغم من أنّ خيارَي الاستراتيجية في afterInteractive وlazyOnload يوفِّران إمكانية تحكُّم كبيرة في النصوص البرمجية التي تحظر العرض، نستكشف أيضًا خيارات أخرى من شأنها زيادة فائدة مكوِّن النص البرمجي.

استخدام العاملين على الويب

يمكن استخدام عاملي الويب لتشغيل نصوص برمجية مستقلة على سلاسل محادثات في الخلفية، ما يتيح إخلاء سلسلة التعليمات الرئيسية لمعالجة مهام واجهة المستخدم وتحسين الأداء. إنّ "عوامل تشغيل الويب" هي الأنسب لإزالة تحميل معالجة JavaScript خارج سلسلة التعليمات الرئيسية، بدلاً من تنفيذ واجهة المستخدم. النصوص البرمجية المستخدمة لدعم العملاء أو التسويق، والتي لا تتفاعل عادةً مع واجهة المستخدم، قد تكون مرشحة بشكل جيد للتنفيذ على سلسلة محادثات في الخلفية. يمكن استخدام مكتبة بسيطة تابعة لجهة خارجية، PartyTown، لعزل مثل هذه النصوص البرمجية في مشغّل الويب.

في ظل التنفيذ الحالي لمكوِّن النص البرمجي Next.js، ننصح بتأجيل هذه النصوص البرمجية في سلسلة التعليمات الرئيسية عن طريق ضبط الاستراتيجية على afterInteractive أو lazyOnload. في المستقبل، نقترح تقديم خيار استراتيجية جديد، وهو 'worker'، سيسمح لـ Next.js باستخدام PartyTown أو حل مخصّص لتشغيل النصوص البرمجية على العاملين على الويب. نرحّب بالتعليقات من المطوّرين حول RFC هذا.

تقليل متغيّرات التصميم التراكمية (CLS)

يمكن أن تؤدي عمليات التضمين التابعة لجهات خارجية، مثل الإعلانات أو الفيديوهات أو خلاصات وسائل التواصل الاجتماعي، إلى حدوث تغيُّرات في التصميم عند التحميل الكسول. يؤثّر ذلك في تجربة المستخدم ومقياس متغيّرات التصميم التراكمية (CLS) للصفحة. يمكن تصغير متغيّرات التصميم التراكمية (CLS) من خلال تحديد حجم الحاوية التي سيتم تحميل المحتوى المضمّن فيها.

يمكن استخدام مكوّن النص البرمجي لتحميل العناصر المضمَّنة التي يمكن أن تؤدي إلى متغيّرات التصميم. وندرس زيادة هذه القيمة لتوفير خيارات ضبط تساعد في خفض متغيّرات التصميم التراكمية (CLS). يمكن إتاحة هذا ضمن مكوّن النص البرمجي نفسه أو كمكوِّن مصاحب.

مكوّنات المغلف

عادةً ما يتم إصلاح البنية البرمجية واستراتيجية التحميل لتضمين النصوص البرمجية الرائجة التابعة لجهات خارجية، مثل "إحصاءات Google" أو "إدارة العلامات من Google" (GTM). يمكن تغليفها بشكل أكبر في مكونات برنامج تضمين فردية لكل نوع من أنواع البرنامج النصي. ولن تتوفّر سوى أقل مجموعة من السمات الخاصة بالتطبيقات (مثل رقم تعريف التتبُّع) للمطوّرين. ستساعد مكونات برنامج الالتفاف المطوّرين من خلال:

1. تسهيل عملية تضمين علامات النصوص البرمجية الشائعة
2. التأكّد من أنّ إطار العمل يستخدم الاستراتيجية المثلى بطرق غير مسبوقة.

الخلاصة

عادةً ما يتم إنشاء النصوص البرمجية التابعة لجهات خارجية لتضمين ميزات محددة في موقع الويب الذي يجري استخدامه. لتقليل تأثير النصوص البرمجية غير المهمة، نوصي بتأجيلها، وهو ما يفعله مكوِّن النص البرمجي Next.js تلقائيًا. يضمن المطوّرون أنّ النصوص البرمجية المضمّنة لن تؤخر الوظائف المهمة ما لم يطبّقوا استراتيجية beforeInteractive بشكل صريح. كما هو الحال مع مكوِّن النص البرمجي Next.js، يمكن لمطوّري إطارات العمل أيضًا التفكير في إنشاء هذه الميزات في أطر عمل أخرى. ونحن نسعى جاهدين إلى العثور على مكون مماثل مع فريق Nuxt.js. واستنادًا إلى الملاحظات والآراء، نأمل أيضًا تحسين مكوِّن النص البرمجي ليشمل حالات استخدام إضافية.

خدمات الإقرار

نتوجّه بالشكر إلى "كاريمي إريكسون" و"جانيكلاس رالف" وكاتي هيمبينيوس وفيليب والتون وجيريمي فاغنر وأدي عثماني على ملاحظاتهم بشأن هذه المشاركة.