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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• يؤدي نقص ضغط الخادم إلى تحميل الموارد ببطء.

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

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

• عدد كبير جدًا من عناصر DOM أو أدوات اختيار لغة CSS باهظة الثمن.

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

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

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

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

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

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

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

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

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

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

يميِّز تدقيق وقت تشغيل JavaScript في Lighthouse النصوص البرمجية التي تحتوي على تحليل نص برمجي أو وقت تجميع أو تقييم مكلف. ويمكن أن يساعدك ذلك في تحديد النصوص البرمجية التابعة لجهات خارجية التي تستهلك وحدة المعالجة المركزية (CPU).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• يتضمن القسم blockDomains قائمة بالنطاقات المطلوب حظرها.
• blockDomainsExcept يستعين بقائمة النطاقات ويحظر أيّ عنصر غير في القائمة.

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

رصد إطارات iframe باهظة الثمن باستخدام "مهام طويلة"

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

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

يسجِّل الرمز التالي إدخالات 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، والسماح للنص البرمجي بالتنفيذ قبل متابعة إنشاء نموذج العناصر في المستند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

للحصول على إرشادات من DoubleClick حول طريقة التحميل الكسول للإعلانات، يمكنك الاطّلاع على مستنداتها الرسمية.

"التحميل الكسول" الفعّال باستخدام أداة Intersection Monitorer

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

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

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

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

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

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

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

تجنُّب document.write()

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

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

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

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

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

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

المخاطر الناتجة عن استخدام خدمات إدارة العلامات

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

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

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

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

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

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

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

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

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

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

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

في ما يلي مثال على كيفية استخدام توجيه script-src في سياسة أمان المحتوى (CSP) لتحديد مصادر 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
• المخاطر المحتملة من خلال النصوص البرمجية التابعة لجهات خارجية
• كيف يمكن للنصوص البرمجية التابعة لجهات خارجية أن تكون فاعلة على الويب؟
• أسباب أهمية السرعة - سحر CSS
• متناقضة سلسلة الإمداد بلغة JavaScript: SRI وCSP وTrust في مكتبات الجهات الخارجية
• خدمة مقارنة الأسعار (CSS) التابعة لجهات خارجية غير آمنة

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