فهم الرؤية وراء مكون النص البرمجي Next.js، الذي يوفر حلاً مدمجًا لتحسين تحميل النصوص البرمجية التابعة لجهات خارجية.
حوالي 45% من الطلبات الواردة من المواقع الإلكترونية المعروضة على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي هي طلبات تابعة لجهات خارجية، 33% منها عبارة عن نصوص برمجية. يمكن أن يؤثر حجم النصوص البرمجية التابعة لجهات خارجية ووقت الاستجابة وتحميلها بشكل كبير في أداء الموقع الإلكتروني. يأتي مكوِّن النص البرمجي Next.js مع أفضل الممارسات والإعدادات التلقائية المدمجة لمساعدة مطوّري البرامج على تقديم نصوص برمجية خاصة بجهات خارجية في تطبيقاتهم مع حلّ المشاكل المحتملة في الأداء بطريقة غير تقليدية.
النصوص البرمجية التابعة لجهات خارجية وتأثيرها في الأداء
النصوص البرمجية التابعة لجهات خارجية تتيح لمطوّري البرامج على الويب الاستفادة من الحلول الحالية لتنفيذ الميزات الشائعة وتقليل وقت التطوير. في العادة، لا يملك صنّاع هذه النصوص أي حافز لمراعاة تأثير الأداء في الموقع الإلكتروني الذي يتم استهلاكه. تعتبر هذه النصوص البرمجية أيضًا مربعًا أسودًا للمطورين الذين يستخدمونها.
تمثل النصوص البرمجية عددًا كبيرًا من وحدات البايت التابعة لجهات خارجية التي تنزّلها المواقع الإلكترونية من فئات مختلفة من طلبات الجهات الخارجية. بشكل تلقائي، يعطي المتصفّح الأولوية للنصوص البرمجية بناءً على مكانها في المستند، ما قد يؤخّر اكتشاف أو تنفيذ النصوص البرمجية المهمة لتجربة المستخدم.
يجب تحميل مكتبات الجهات الخارجية المطلوبة للتنسيق مبكرًا لعرض الصفحة. يجب تأجيل الجهات الخارجية غير المطلوبة للعرض الأولي حتى لا تحظر عمليات المعالجة الأخرى في سلسلة التعليمات الرئيسية. تتضمن أداة Lighthouse عمليتي تدقيق لوضع علامة على النصوص البرمجية التي تحظر العرض أو التي تحظر سلسلة التعليمات الرئيسية.
من المهم مراعاة تسلسل تحميل الموارد في صفحتك حتى لا تتأخر الموارد المهمة ولا تحظر الموارد غير الحرجة الموارد المهمة.
على الرغم من توفُّر أفضل الممارسات للحدّ من تأثير الجهات الخارجية، إلا أنّه قد لا يكون جميع المستخدمين على دراية بكيفية تنفيذها لكل جهة خارجية يستخدمونها. قد يكون هذا معقدًا للأسباب التالية:
- في المتوسط، تستخدم المواقع الإلكترونية من 21 إلى 23 جهة خارجية مختلفة، بما في ذلك النصوص البرمجية، على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. وقد يختلف الاستخدام والاقتراحات لكل منها.
- يمكن أن يختلف تنفيذ العديد من الجهات الخارجية استنادًا إلى ما إذا كان يتم استخدام إطار عمل معيّن أو مكتبة واجهة مستخدم معيّنة.
- تتوفر مكتبات أحدث تابعة لجهات خارجية بشكل متكرر.
- بسبب تنوع متطلبات العمل المتعلقة بالجهة الخارجية نفسها، يصبح من الصعب على المطوّرين توحيد طريقة استخدامها.
تركيز Aurora على النصوص البرمجية التابعة لجهات خارجية
جزء من تعاون Aurora مع أدوات وأطر عمل البرامج المفتوحة المصدر على الويب هو توفير إعدادات تلقائية فعّالة وأدوات تستند إلى رأي المستخدمين لمساعدة المطوّرين على تحسين جوانب تجربة المستخدم، مثل الأداء وتسهيل الاستخدام والأمان وجاهزية الأجهزة الجوّالة. في عام 2021، ركّزنا على المساعدة في تحسين تجربة المستخدم ومقاييس مؤشرات أداء الويب الأساسية على حِزم أُطر العمل.
من أهم الخطوات التي تهدف إلى تحقيق هدفنا في تحسين أداء إطار العمل البحث عن تسلسل التحميل المثالي للنصوص البرمجية التابعة لجهات خارجية في Next.js. يتم وضع إطارات عمل مثل Next.js بشكل فريد لتوفير إعدادات افتراضية وميزات مفيدة تساعد المطورين على تحميل الموارد بكفاءة، بما في ذلك الجهات الخارجية. لقد درسنا بيانات أرشيف HTTP وبيانات Lighthouse لمعرفة الجهات الخارجية التي تحظر العرض كثيرًا في إطارات عمل مختلفة.
لمعالجة مشكلة حظر سلسلة التعليمات الرئيسية التي تحظر النصوص البرمجية التابعة لجهات خارجية والمُستخدَمة في أحد التطبيقات، أنشأنا مكوِّن النص البرمجي. يحتوي المكوِّن على ميزات تسلسلية لتوفير عناصر تحكّم أفضل للمطوّرين لتحميل النصوص البرمجية التابعة لجهات خارجية.
تسلسل نصوص برمجية تابعة لجهات خارجية بدون مكون إطار عمل
إنّ الإرشادات المتاحة لتقليل تأثير النصوص البرمجية التي تحظر العرض توفّر الطرق التالية لتحميل النصوص البرمجية التابعة لجهات خارجية وتسلسلها بكفاءة:
يمكنك استخدام السمة
asyncأوdeferمع علامات<script>التي تطلب من المتصفّح تحميل نصوص برمجية غير مهمة تابعة لجهات خارجية بدون حظر محلّل المستند. قد يتم اعتبار النصوص البرمجية غير المطلوبة للتحميل الأولي للصفحة أو تفاعل المستخدم الأول غير مهمّة.<script src="https://example.com/script1.js" defer></script> <script src="https://example.com/script2.js" async></script>إنشاء اتصالات مبكرة بالمصادر المطلوبة باستخدام الاتصال المسبق والجلب المسبق لنظام أسماء النطاقات ويسمح هذا الإجراء للنصوص البرمجية المهمة ببدء تنزيلها في وقت سابق.
<head> <link rel="preconnect" href="http://PreconnThis.com"> <link rel="dns-prefetch" href="http://PrefetchThis.com"> </head>يتم التحميل الكسول للموارد والتضمينات التابعة لجهات خارجية بعد الانتهاء من تحميل محتوى الصفحة الرئيسية أو عند انتقال المستخدم للأسفل إلى جزء الصفحة حيث تم تضمينها.
مكوِّن النص البرمجي Next.js
ينفِّذ مكوِّن النص البرمجي Next.js الطرق المذكورة أعلاه لتسلسل النصوص البرمجية، كما يوفر نموذجًا للمطورين لتحديد استراتيجية التحميل الخاصة بهم. بعد تحديد الاستراتيجية المناسبة، سيتم تحميلها بشكل مثالي بدون حظر موارد مهمة أخرى.
يعتمد مكوِّن النص البرمجي على علامة HTML <script>، ويوفر خيارًا لتعيين أولوية التحميل للنصوص البرمجية التابعة لجهة خارجية باستخدام سمة الإستراتيجية.
// Example for beforeInteractive:
<Script src="https://polyfill.io/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" />
يمكن أن تتضمن سمة الإستراتيجية ثلاث قيم.
beforeInteractive: يمكن استخدام هذا الخيار للنصوص البرمجية المهمة التي يجب تنفيذها قبل أن تصبح الصفحة تفاعلية. يضمن مقتطف Next.js إدخال هذه النصوص البرمجية في نص HTML الأولي على الخادم وتنفيذها قبل لغة JavaScript أخرى مجمّعة ذاتيًا. وتشكّل إدارة الموافقة أو النصوص البرمجية لرصد برامج التتبّع أو المكتبات المساعدة المطلوبة لعرض المحتوى المهمّ عوامل مرشحة جيدة لهذه الاستراتيجية.afterInteractive: هذه هي الاستراتيجية التلقائية المطبَّقة وتكافئ تحميل نص برمجي بسمة التأجيل. ويجب استخدامه للنصوص البرمجية التي يمكن للمتصفِّح تشغيلها بعد أن تكون الصفحة تفاعلية، مثل النصوص البرمجية للتحليلات. تُدخل مقتطف Next.js هذه النصوص البرمجية من جهة العميل، ويتم تشغيلها بعد ترطيب الصفحة. وبالتالي، ما لم يُذكر خلاف ذلك، يتم تأجيل جميع النصوص البرمجية التابعة لجهات خارجية المحددة باستخدام مكوّن النص البرمجي عن طريق Next.js، وبالتالي توفير إعداد تلقائي قوي.lazyOnload: يمكن استخدام هذا الخيار لتحميل النصوص البرمجية ذات الأولوية المنخفضة بالكسول عندما يكون المتصفِّح غير نشِط لفترة قصيرة. ولا تكون الوظائف التي توفّرها هذه النصوص البرمجية مطلوبة بعد أن تصبح الصفحة تفاعلية على الفور، مثل مكوّنات المحادثة أو المكوّنات الإضافية لوسائل التواصل الاجتماعي.
يمكن للمطورين إعلام Next.js بكيفية استخدام التطبيق للنص البرمجي من خلال تحديد الإستراتيجية. ويسمح هذا لإطار العمل بتطبيق التحسينات وأفضل الممارسات لتحميل النص البرمجي مع ضمان أفضل تسلسل للتحميل.
باستخدام مكوِّن النص البرمجي، يمكن للمطورين وضع نص برمجي تابع لجهة خارجية في أي مكان في التطبيق للتحميل المتأخر للجهات الخارجية وعلى مستوى المستند للنصوص البرمجية المهمة. وهذا يعني أن مكون النص البرمجي قد يكون في موقع مشترك مع المكوِّن باستخدام النص البرمجي. وبعد شُرب الماء والسوائل، سيتم حقن النص البرمجي في رأس المستند المعروض في البداية أو أسفل النص حسب الاستراتيجية المستخدَمة.
قياس التأثير
استخدمنا نموذجَين لتطبيق التجارة Next.js ومدونة المبتدئين لإنشاء تطبيقَين تجريبيَّين ساعدا في قياس تأثير تضمين نصوص برمجية تابعة لجهات خارجية. تمّ تضمين جهات خارجية شائعة الاستخدام من أجل "إدارة العلامات من Google" وتضمينات وسائل التواصل الاجتماعي في صفحات هذه التطبيقات مباشرةً في البداية، ثم من خلال مكوِّن النص البرمجي. ثم أجرينا مقارنة بين أداء هذه الصفحات في WebPageTest.
النصوص البرمجية التابعة لجهات خارجية في تطبيق تجاري من Next.js
تمت إضافة نصوص برمجية تابعة لجهات خارجية إلى نموذج تطبيق التجارة الخاص بالعرض التوضيحي كما هو مُوضَّح أدناه.
توضّح المقارنة التالية مستوى التقدّم المرئي لكلا الإصدارَين من Next.js commerce starter-kit. كما رأينا، يحدث LCP في وقت سابق بثانية واحدة تقريبًا مع تفعيل مكوّن النص البرمجي باستخدام استراتيجية التحميل الصحيحة.
النصوص البرمجية التابعة لجهات خارجية في مدونة Next.js
تمت إضافة نصوص برمجية تابعة لجهات خارجية إلى تطبيق المدونة التجريبي كما هو مُوضَّح أدناه.
| قبل | بعد |
|---|---|
| أداة "إدارة العلامات من Google" غير المتزامنة | مكوِّن النص البرمجي مع الاستراتيجية = التحميل الكسول لكل من النصوص البرمجية الأربعة |
| زر "متابعة" على 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). ويمكن تضمين هذه الأدوات في مكونات برامج تضمين فردية لكل نوع من أنواع النصوص البرمجية. لن يتوفّر للمطوِّرين سوى مجموعة صغيرة فقط من السمات الخاصة بالتطبيق (مثل رقم تعريف التتبّع). ستساعد مكونات برنامج الالتفاف المطورين من خلال:
- وهو ما يسهِّل عليهم تضمين علامات النصوص البرمجية الرائجة.
- التأكّد من أنّ إطار العمل يستخدم الاستراتيجية المثلى.
الخلاصة
يتم عادةً إنشاء النصوص البرمجية التابعة لجهات خارجية لتضمين ميزات محدّدة في الموقع الإلكتروني المستخدَم. للحد من تأثير النصوص البرمجية غير المهمة، نوصي بتأجيلها، وهو ما يفعله مكوِّن النص البرمجي Next.js بشكل افتراضي. يؤكّد المطوّرون أنّ النصوص البرمجية المضمّنة لن تؤخّر الوظائف المهمة ما لم يطبّقوا استراتيجية beforeInteractive بشكل صريح. مثل مكوِّن النص البرمجي Next.js، يمكن لمطوّري أُطر العمل أيضًا التفكير في إنشاء هذه الميزات في أُطر عمل أخرى. نحن نستكشف بشكل نشط تحقيق مكون مشابه مع فريق Nuxt.js. استنادًا إلى الملاحظات التي تلقّيناها، نأمل أيضًا أن نحسّن مكوِّن النص البرمجي بشكل أكبر لتغطية حالات استخدام إضافية.
خدمات الإقرار
نتوجّه بالشكر إلى كارا إريكسون وجانيكلاس رالف وكاتي هيمبينيوس وفيليب والتون وجيريمي واغنر وآدي عثمان على ملاحظاتهم بشأن هذه المشاركة.