تحميل JavaScript التابعة لجهة خارجية

Addy Osmani

Arthur Evans

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

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

• ويمكن أن تؤدي إلى إبطاء أداء موقعك الإلكتروني.
• ويمكن أن تسبّب مشاكل في الخصوصية أو الأمان.
• قد تكون غير متوقعة وقد يؤدي سلوكها إلى عواقب غير مقصودة.

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

ما هي النصوص البرمجية التابعة لجهات خارجية؟

يشير رمز JavaScript التابع لجهة خارجية غالبًا إلى النصوص البرمجية التي يمكن تضمينها في أي موقع إلكتروني مباشرةً من مزوّد خدمة خارجي. تشمل الأمثلة ما يلي:

• أزرار المشاركة على وسائل التواصل الاجتماعي (Facebook وX وLinkedIn وMastodon)

• مشغّلات الفيديوهات المضمّنة (YouTube وVimeo)

• إطارات iframe الإعلانية

• نصوص برمجية للإحصاءات والمقاييس

• نصوص برمجية لاختبارات A/B للتجارب

• المكتبات المساعدة، مثل تنسيق التاريخ أو الرسوم المتحركة أو المكتبات الوظيفية

مثال على فيديو على YouTube مضمَّن يمكن إضافته إلى صفحة باستخدام الرمز التالي.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/mo8thg5XGV0"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen
>
</iframe>

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

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

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

• يمكن أن يؤدي إرسال ملفات صور أو فيديوهات كبيرة الحجم وغير محسّنة إلى استهلاك البيانات وتكبيد المستخدمين تكاليف إضافية.

• مشاكل الأمان التي يمكن أن تعمل كنقطة عطل مفردة (SPOF) إذا حمّلت صفحتك نصًا برمجيًا بدون حذر

• عدم كفاية التخزين المؤقت لبروتوكول HTTP، ما يجبر المتصفّح على إرسال المزيد من طلبات الشبكة لاسترجاع الموارد

• يؤدي عدم كفاية ضغط الخادم إلى تحميل الموارد ببطء.

• يتم حظر عرض المحتوى إلى أن تكتمل معالجته. ويمكن أن ينطبق ذلك أيضًا على النصوص البرمجية لاختبارات A/B غير المتزامنة.

• استخدام واجهات برمجة التطبيقات القديمة المعروفة بأنّها تضرّ بتجربة المستخدم، مثل document.write()

• عناصر DOM زائدة أو أدوات اختيار لغة CSS مكلفة

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

• غالبًا ما تستخدم النصوص البرمجية التابعة لجهات خارجية تقنيات تضمين يمكنها حظر window.onload إذا كانت خوادمها تستجيب ببطء، حتى إذا كان التضمين يستخدم async أو defer.

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

كيف يمكنك تحديد نص برمجي تابع لجهة خارجية على صفحة؟

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

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

يستغرق تحميل النصوص البرمجية في هذه الصفحة وقتًا أطول من تحميل الصفحة نفسها.

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

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

كيف يمكنني قياس تأثير نص برمجي تابع لجهة خارجية على صفحتي؟

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

تدقيق وقت التشغيل في Lighthouse

يُبرز تدقيق وقت تشغيل JavaScript في Lighthouse النصوص البرمجية التي تستغرق وقتًا طويلاً في التحليل أو التجميع أو التقييم. يمكن أن يساعدك ذلك في تحديد النصوص البرمجية التابعة لجهات خارجية والتي تستهلك قدرًا كبيرًا من طاقة وحدة المعالجة المركزية.

يعرض تدقيق وقت التشغيل النصوص البرمجية التي تستغرق أطول وقت في التحميل.

تدقيق حمولات الشبكة في Lighthouse

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

يعرض تدقيق حمولات الشبكة طلبات الشبكة التي تستغرق وقتًا أطول وتجلب أكبر قدر من البيانات.

حظر طلبات الشبكة في "أدوات مطوّري البرامج في Chrome"

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

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

يمكنك حظر طلبات الشبكة الفردية لمعرفة سلوك صفحتك بدونها.

لوحة "الأداء" في "أدوات مطوّري البرامج في Chrome"

تساعد لوحة "الأداء" في "أدوات مطوّري البرامج في Chrome" في تحديد المشاكل المتعلّقة بأداء صفحتك على الويب.

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

نصوص برمجية تابعة لجهات خارجية تم ترتيبها حسب المنتج، بدءًا من أطول وقت تحميل

لمزيد من المعلومات حول استخدام "أدوات مطوّري البرامج في Chrome" لتحليل أداء تحميل الصفحة، يمكنك الاطّلاع على مقالة البدء في تحليل أداء وقت التشغيل.

في ما يلي سير العمل المقترَح لقياس تأثير النصوص البرمجية التابعة لجهات خارجية:

1. استخدِم لوحة الشبكة لقياس المدة التي يستغرقها تحميل صفحتك.
   • لمحاكاة الظروف الواقعية، ننصح بتفعيل ضبط الحد الأقصى المسموح لعرض نطاق الشبكة وضبط الحد الأقصى المسموح لوحدة المعالجة المركزية. من غير المرجّح أن يتوفّر لدى المستخدمين اتصالات سريعة بالشبكة وأجهزة كمبيوتر مكتبية تقلّل من تأثير النصوص البرمجية المكلفة في ظروف المختبر.
2. احظر عناوين URL أو النطاقات المسؤولة عن نصوص برمجية تابعة لجهات خارجية تعتقد أنّها تتسبّب في حدوث مشكلة (راجِع لوحة الأداء في "أدوات مطوري البرامج في Chrome" للحصول على إرشادات حول تحديد النصوص البرمجية التي تستهلك الكثير من الموارد).
3. أعِد تحميل الصفحة وقِس وقت التحميل مرة أخرى.
   • للحصول على بيانات أكثر دقة، قد ترغب في قياس وقت التحميل ثلاث مرات على الأقل. ويعود ذلك إلى أنّ بعض النصوص البرمجية التابعة لجهات خارجية تجلب موارد مختلفة عند كل تحميل للصفحة. للمساعدة في ذلك، تتيح لوحة "الأداء" في "أدوات مطوري البرامج في Chrome" إجراء تسجيلات متعددة.

قياس تأثير نصوص الجهات الخارجية باستخدام WebPageTest

تتيح أداة WebPageTest حظر تحميل الطلبات الفردية لقياس تأثيرها في الإعدادات المتقدّمة > حظر. استخدِم هذه الميزة لتحديد قائمة بالنطاقات المطلوب حظرها، مثل نطاقات الإعلانات.

أدرِج النطاقات التي تريد حظرها في هذه اللوحة.

ننصح باتّباع سير العمل التالي لاستخدام هذه الميزة:

1. اختبِر صفحة بدون حظر الجهات الخارجية.
2. كرِّر الاختبار مع حظر بعض الجهات الخارجية.
3. اختَر النتيجتَين من سجلّ الاختبارات.
4. انقر على مقارنة.

اختيار نتائج اختبارات التحميل لمقارنتها

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

تأثير حظر موارد الجهات الخارجية، من استخدام WebPageTest لقياس تأثير علامات الجهات الخارجية بقلم "آندي ديفيز"

تتيح أداة WebPageTest أيضًا استخدام أمرَين يعملان على مستوى نظام أسماء النطاقات لحظر النطاقات:

• blockDomains تتلقّى قائمة بالنطاقات التي يجب حظرها.
• تتلقّى الدالة blockDomainsExcept قائمة بالنطاقات وتحظر أي نطاق غير مُدرَج في القائمة.

يحتوي WebPageTest أيضًا على علامة تبويب نقطة عطل مفردة (SPOF) تتيح لك محاكاة مهلة أو فشل كامل في تحميل مورد. على عكس حظر النطاقات، تنتهي مهلة SPOF ببطء، ما يجعلها مفيدة لاختبار سلوك صفحاتك عندما تكون خدمات الجهات الخارجية تحت ضغط كبير أو غير متاحة مؤقتًا.

استخدِم ميزة اختبار نقطة التعطّل الوحيدة لمحاكاة تعطُّل نطاقات محدّدة.

رصد إطارات iframe التي تستهلك الكثير من الموارد باستخدام المهام التي يستغرق تنفيذها وقتًا طويلاً

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

لرصد المهام التي يستغرق تنفيذها وقتًا طويلاً في مراقبة المستخدمين الحقيقيين (RUM)، استخدِم واجهة برمجة التطبيقات PerformanceObserver في JavaScript لمراقبة إدخالات longtask. تحتوي هذه الإدخالات على سمة تحديد المصدر التي يمكنك استخدامها لتحديد سياق الإطار الذي تسبب في المهمة التي يستغرق تنفيذها وقتًا طويلاً.

يسجّل الرمز التالي إدخالات longtask في وحدة التحكّم، بما في ذلك إدخال واحد لإطار iframe "مكلف":

<script>
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Attribution entry including "containerSrc":"https://example.com"
      console.log(JSON.stringify(entry.attribution));
    }
  });

  observer.observe({entryTypes: ['longtask']});
</script>

<!-- Imagine this is an iframe with expensive long tasks -->
<iframe src="https://example.com"></iframe>

لمزيد من المعلومات حول مراقبة المهام التي يستغرق تنفيذها وقتًا طويلاً، يمكنك الاطّلاع على مقاييس الأداء من منظور المستخدم.

كيف يمكنك تحميل نص برمجي تابع لجهة خارجية بكفاءة؟

إذا كان نص برمجي تابع لجهة خارجية يؤدي إلى إبطاء تحميل صفحتك، لديك عدة خيارات لتحسين الأداء:

• حمِّل النص البرمجي باستخدام السمة async أو defer لتجنُّب حظر تحليل المستند.
• إذا كان خادم الجهة الخارجية بطيئًا، ننصحك باستضافة النص البرمجي ذاتيًا.
• إذا لم يضِف النص البرمجي قيمة واضحة إلى موقعك الإلكتروني، عليك إزالته.
• استخدِم تلميحات الموارد مثل <link rel=preconnect> أو <link rel=dns-prefetch> لإجراء بحث في نظام أسماء النطاقات للنطاقات التي تستضيف نصوصًا برمجية تابعة لجهات خارجية.

استخدام async أو defer

يؤدي تنفيذ JavaScript إلى حظر المحلل اللغوي. عندما يواجه المتصفّح نصًا برمجيًا، عليه إيقاف إنشاء DOM مؤقتًا، وتمرير النص البرمجي إلى محرّك JavaScript، والسماح بتنفيذ النص البرمجي قبل مواصلة إنشاء DOM.

تغيّر السمتان async وdefer هذا السلوك على النحو التالي:

• تؤدي السمة async إلى تنزيل المتصفّح للنص البرمجي بشكل غير متزامن أثناء مواصلة تحليل مستند HTML. عندما ينتهي تنزيل النص البرمجي، يتم حظر التحليل أثناء تنفيذ النص البرمجي.

• تؤدي السمة defer إلى تنزيل المتصفّح للنص البرمجي بشكل غير متزامن أثناء مواصلة تحليل مستند HTML، ثم ينتظر المتصفّح لتشغيل النص البرمجي إلى أن يكتمل تحليل المستند.

استخدِم دائمًا async أو defer للنصوص البرمجية التابعة لجهات خارجية، ما لم يكن النص البرمجي ضروريًا لمسار العرض الحرج. استخدِم async إذا كان من المهم تشغيل النص البرمجي في وقت مبكر من عملية التحميل، مثل بعض النصوص البرمجية للإحصاءات. استخدِم defer للموارد الأقل أهمية، مثل الفيديوهات التي يتم عرضها في أسفل الصفحة ولا تظهر للمستخدم في البداية.

إذا كان الأداء هو مصدر قلقك الأساسي، ننصحك بالانتظار لإضافة نصوص برمجية غير متزامنة إلى أن يتم تحميل المحتوى المهم في صفحتك. لا ننصح باستخدام async للمكتبات الأساسية، مثل jQuery.

ملاحظة: في Chrome والمتصفحات الأخرى المستندة إلى Blink، async وdefer يخفضان أولوية طلب الشبكة للموارد، ما قد يؤدي إلى تحميلها بعد وقت أطول بكثير من تحميلها كنص برمجي يحظر العرض. وهذا مفيد بشكل خاص لنصوص الإحصاءات البرمجية.

يجب تحميل بعض النصوص البرمجية بدون async أو defer، خاصةً تلك التي تشكّل أجزاءً أساسية من موقعك الإلكتروني. وتشمل هذه الموارد مكتبات واجهة المستخدم أو أُطر عمل شبكة توصيل المحتوى (CDN) التي لا يمكن لموقعك الإلكتروني العمل بدونها.

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

يُرجى العِلم أنّ ميزة "async" لا تحلّ جميع المشاكل. إذا كانت صفحتك تتضمّن عددًا كبيرًا من النصوص البرمجية، مثل نصوص التتبّع البرمجية لأغراض إعلانية، لن يؤدي تحميلها بشكل غير متزامن إلى منعها من إبطاء تحميل الصفحة.

استخدام تلميحات الموارد لتقليل وقت إعداد الاتصال

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

<link rel="dns-prefetch" href="http://example.com" />

إذا كان النطاق الخارجي الذي تتصل به يستخدم بروتوكول HTTPS، يمكنك أيضًا استخدام ، الذي يُجري عمليات بحث في نظام أسماء النطاقات ويعالج عمليات الذهاب والعودة عبر بروتوكول TCP ويتعامل مع عمليات التفاوض عبر بروتوكول أمان طبقة النقل (TLS). يمكن أن تكون هذه الخطوات الأخرى بطيئة جدًا لأنّها تتضمّن التحقّق من شهادات طبقة المقابس الآمنة (SSL)، لذا يمكن أن يؤدي الاتصال المُسبق إلى تقليل وقت التحميل بشكل كبير.

<link rel="preconnect" href="https://cdn.example.com" />

"عزل" النصوص البرمجية باستخدام إطار iframe

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

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

استضافة النصوص البرمجية التابعة لجهات خارجية ذاتيًا

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

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

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

إجراء اختبارات A/B على عينات أصغر من المستخدمين

اختبار A/B (أو اختبار التقسيم) هو أسلوب لتجربة نسختين من صفحة معيّنة لتحليل تجربة المستخدم وسلوكه. يجعل إصدارات الصفحة متاحة لعينات مختلفة من حركة المرور على موقع الويب الخاص بك، ويحدد من التحليلات الإصدار الذي يوفر معدل تحويل أفضل.

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

لتسريع عرض الصفحة، ننصح بإرسال نصوص اختبارات A/B إلى عيّنة أصغر من قاعدة المستخدمين، وتنفيذ الرمز الذي يحدّد إصدار الصفحة الذي سيتم عرضه من جهة الخادم.

تحميل الموارد التابعة لجهات خارجية باستخدام "التحميل الكسول"

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

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

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

ملاحظة: LazySizes هي مكتبة JavaScript شائعة الاستخدام في التحميل الكسول للصور وإطارات iframe. وتتيح هذه المنصة تضمين فيديوهات YouTube والتطبيقات المصغّرة.

توفّر DoubleClick إرشادات حول كيفية تحميل الإعلانات بشكل بطيء في مستنداتها الرسمية.

التحميل الكسول الفعّال باستخدام Intersection Observer

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

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

إحصاءات التحميل الكسول

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

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

تحميل النصوص البرمجية التابعة لجهات خارجية بأمان

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

تجنُّب document.write()

تستخدم النصوص البرمجية التابعة لجهات خارجية، خاصةً للخدمات القديمة، أحيانًا document.write() لإدخال النصوص البرمجية وتحميلها. هذه مشكلة لأنّ document.write() يتصرف بشكل غير متسق، ومن الصعب تصحيح أخطاء إخفاقاته.

الحلّ لمشاكل document.write()‎ هو عدم استخدامها. في الإصدار 53 من Chrome والإصدارات الأحدث، تسجّل "أدوات مطوّري البرامج في Chrome" التحذيرات في وحدة التحكّم بشأن الاستخدام الذي يتضمّن مشاكل في document.write():

تضع "أدوات مطوّري البرامج في Chrome" علامة على استخدام document.write().

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

تقرير Lighthouse يعرض النصوص البرمجية التي تستخدم document.write().

استخدام أدوات إدارة العلامات بعناية

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

للحفاظ على سرعة تحميل الصفحة، ننصحك باستخدام أداة لإدارة العلامات، مثل Google Tag Manager. تتيح لك أداة GTM نشر العلامات بشكل غير متزامن كي لا تمنع بعضها من التحميل، وتقلّل عدد طلبات الشبكة التي يحتاجها المتصفّح لتنفيذ العلامات، وتجمع بيانات العلامات في واجهة مستخدم طبقة البيانات.

مخاطر استخدام أدوات إدارة العلامات

على الرغم من أنّ أنظمة إدارة العلامات مصمَّمة لتبسيط عملية تحميل الصفحات، قد يؤدي استخدامها بشكل غير مدروس إلى إبطاء هذه العملية بالطرق التالية:

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

تجنُّب النصوص البرمجية التي تلوّث النطاق العام

يمكن أن تعمل النصوص البرمجية التابعة لجهات خارجية بجميع أنواع الطرق التي تؤدي إلى تعطُّل صفحتك بشكل غير متوقع:

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

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

استراتيجيات تخفيف الأثر

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

• HTTPS: يجب ألا تعتمد المواقع الإلكترونية التي تستخدم بروتوكول HTTPS على جهات خارجية تستخدم بروتوكول HTTP. لمزيد من المعلومات، يُرجى الاطّلاع على المحتوى المختلط.

• وضع الحماية: ننصحك بتشغيل نصوص برمجية تابعة لجهات خارجية في إطارات iframe باستخدام السمة sandbox لتقييد الإجراءات المتاحة للنصوص البرمجية.

• سياسة أمان المحتوى (CSP): يمكنك استخدام عناوين HTTP في استجابة الخادم لتحديد سلوكيات النصوص البرمجية الموثوقة لموقعك الإلكتروني، ورصد آثار بعض الهجمات والحدّ منها، مثل هجمات البرمجة عبر المواقع (XSS).

في ما يلي مثال على كيفية استخدام توجيه script-src في سياسة أمان المحتوى لتحديد مصادر JavaScript المسموح بها في الصفحة:

// Given this CSP header Content-Security-Policy: script-src
https://example.com/ // The following third-party script will not be loaded or
executed

<script src="https://not-example.com/js/library.js"></script>

محتوى إضافي للقراءة

لمزيد من المعلومات حول تحسين JavaScript التابعة لجهات خارجية، ننصحك بقراءة ما يلي:

• الأداء والمرونة: اختبارات التحمّل للجهات الخارجية
• إضافة التفاعلية باستخدام JavaScript
• المخاطر المحتملة للنصوص البرمجية التابعة لجهات خارجية
• كيف يمكن أن تكون النصوص البرمجية التابعة لجهات خارجية فعّالة على الويب
• Why Fast Matters - CSS Wizardry
• The JavaScript Supply Chain Paradox: SRI, CSP and Trust in Third Party Libraries
• ملفات CSS التابعة لجهات خارجية ليست آمنة

نشكر "كينجي باهو" و"جيريمي واغنر" و"بات مينان" و"فيليب والتون" و"جيف بوسنيك" و"تشيني تساي" على مراجعاتهم.