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

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

Leena Sohoni

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

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

من أهم الخطوات التي اتّخذناها لتحقيق هدفنا المتمثل في تحسين أداء إطار العمل هي البحث عن تسلسل التحميل المثالي للنصوص البرمجية التابعة لجهات خارجية في Next.js. تتمتع أُطر العمل، مثل Next.js، بموقع فريد لتوفير ميزات وإعدادات تلقائية مفيدة تساعد المطوّرين في تحميل الموارد بكفاءة، بما في ذلك الموارد التابعة لجهات خارجية. لقد أجرينا دراسة شاملة على بيانات HTTP Archive و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> ويوفّر خيارًا لضبط أولوية التحميل للنصوص البرمجية التابعة لجهات خارجية باستخدام سمة strategy.

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

يمكن أن تأخذ سمة strategy ثلاث قيم.

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

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

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

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

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

قياس التأثير

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مكونات الحزمة

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

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

الخاتمة

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

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

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