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

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

Leena Sohoni

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. أنشِئ اتصالات مبكرة بالمصادر المطلوبة باستخدام preconnect وdns-prefetch. يتيح ذلك بدء تنزيل النصوص البرمجية المهمة في وقت مبكر.

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

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

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

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

يعتمد مكوِّن Script على علامة 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 الأولي على الخادم وتنفيذها قبل ملفات JavaScript الأخرى المجمّعة ذاتيًا. تُعدّ إدارة الموافقة أو نصوص رصد برامج التتبُّع أو مكتبات المساعدة المطلوبة لعرض المحتوى المهم من العناصر المناسبة لهذه الاستراتيجية.

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

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

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

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

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

قياس التأثير

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

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

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

إعدادات النص البرمجي ومكوّن النص البرمجي للعرض التوضيحي 1 الذي يتضمّن نصَّين برمجيَّين

قبل	بعد
‫Google Tag Manager مع async	مكوّن Script مع strategy = afterInteractive لكلا النصَّين البرمجيَّين
زر المتابعة على Twitter بدون السمتَين async أو defer

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

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

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

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

قبل	بعد
‫Google Tag Manager مع async	مكوّن Script مع strategy = lazyonload لكل من النصوص البرمجية الأربعة
زر المتابعة على Twitter مع تحميل غير متزامن
زر الاشتراك في YouTube بدون السمتَين async أو defer
زر المتابعة على LinkedIn بدون السمتَين async أو defer

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

الخطوات التالية لمكوّن Script

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

استخدام Web Workers

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

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

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

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

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

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

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

1. ما يسهّل عليهم تضمين علامات برمجية رائجة
2. التأكّد من أنّ إطار العمل يستخدم الاستراتيجية الأفضل في الخلفية

الخاتمة

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

كلمة شكر

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