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

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

Leena Sohoni

Houssein Djirdeh

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

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

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

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

يجب تحميل المكتبات التابعة لجهات خارجية المطلوبة لتنسيق الصفحة في وقت مبكر لعرض الصفحة. يجب تأجيل الطلبات التابعة لجهات خارجية غير مطلوبة للعرض الأوّلي حتى لا تحظر عمليات المعالجة الأخرى في سلسلة التعليمات الرئيسية. يتضمّن 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. أنشئ اتصالات مبكرة بالمصادر المطلوبة باستخدام عنصرَي 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 البرمجي الطرق المذكورة أعلاه لترتيب النصوص البرمجية ويقدّم نموذجًا للمطوّرين لتحديد استراتيجية التحميل. بعد تحديد الاستراتيجية المناسبة، سيتم تحميلها على النحو الأمثل بدون حظر موارد مهمة أخرى.

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

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

الخاتمة

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

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

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