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

Addy Osmani

Arthur Evans

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

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

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

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

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

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

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

• عناصر DOM مفرطة أو أدوات اختيار لغة CSS باهظة التكلفة

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

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

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

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

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

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

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

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

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

تدقيق وقت بدء أداة Lighthouse

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

تدقيق حِزم البيانات في الشبكة في Lighthouse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يتضمّن WebPageTest أيضًا علامة تبويب "نقطة عطل مفردة" (SPOF) تتيح لك simulating a timeout or complete failure to load a resource. على عكس حظر النطاق، يتم إيقاف SPOF نهائيًا ببطء، ما قد يجعله مفيدًا لاختبار كيفية تصرف صفحاتك عندما تكون الخدمات التابعة لجهات خارجية تحت ضغط كبير أو غير متاحة مؤقتًا.

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

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

لرصد المهام التي تستغرق وقتًا طويلاً في مراقبة المستخدِمين الفعليين (RUM)، استخدِم واجهة برمجة تطبيقات PerformanceObserver لرصد إدخالات 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 إذا كان من المهم تنفيذ الرمز البرمجي في وقت مبكر من عملية التحميل، مثل بعض النصوص البرمجية لتحليلات Google. استخدِم defer للموارد الأقل أهمية، مثل الفيديوهات التي يتم عرضها في أسفل الصفحة عن مستوى ظهورها للمستخدم في البداية.

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

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

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

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

استخدام "اقتراحات الموارد" لتقليل وقت إعداد الربط

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

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

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

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

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

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

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

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

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

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

تحميل الموارد التابعة لجهات خارجية ببطء

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

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

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

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

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

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

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

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

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

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

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

تجنَّب document.write()

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

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

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

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

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

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

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

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

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

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

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

• يمكن أن تؤدي النصوص البرمجية التي تحمّل متطلّبات 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 والثقة في المكتبات التابعة لجهات خارجية
• عدم أمان صفحات الأنماط المتتالية التابعة لجهات خارجية

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