التدخل ضد document.write()

Paul Kinlan

هل ظهر لك مؤخرًا تحذير مثل التالي في Play Console في Chrome وتساءلت عمّا هو؟

(index):34 A Parser-blocking, cross-origin script,
https://paul.kinlan.me/ad-inject.js, is invoked via document.write().
This may be blocked by the browser if the device has poor network connectivity.

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

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

document.write('<script src="https://example.com/ad-inject.js"></script>');

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

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

جمعنا البيانات من تجربة ميدانية لمدة 28 يومًا على 1% من Chrome المستخدمين المستقرين، مقتصرين على المستخدمين الذين يستخدمون اتصالات شبكة الجيل الثاني. وقد لاحظنا أن% 7.6 من جميع عمليات تحميل الصفحات على شبكات الجيل الثاني، تتضمن على الأقل نصًا برمجيًا واحدًا على الأقل لحظر المحللات اللغوية عبر المواقع تم إدراجها عبر document.write() في مستند المستوى الأعلى. نتيجة لحظر تحميل هذه النصوص البرمجية، لاحظنا التحسينات التالية على عمليات التحميل هذه:

  • 10% زيادة في عمليات تحميل الصفحات التي تصل إلى سرعة عرض أول محتوى مرئي (تأكيد مرئي للمستخدم يُفيد بتحميل الصفحة بشكلٍ فعّال) 25% من عمليات تحميل الصفحات تؤدي إلى الوصول إلى حالة التحليل بالكامل، وعمليات إعادة تحميل أقل بنسبة 10% مما يشير إلى انخفاض استياء المستخدم.
  • انخفاض بنسبة 21% في متوسط الوقت (أسرع بما يزيد عن ثانية واحدة) حتى سرعة عرض أول محتوى مرئي
  • انخفاض بنسبة 38% في متوسط الوقت المستغرق في تحليل صفحة، وهو ما يمثل تحسين لمدة ست ثوانٍ تقريبًا، مما يقلل الوقت بشكل كبير لعرض ما يهم المستخدم.

مع وضع هذه البيانات في الاعتبار، فإن Chrome، بدءًا من الإصدار 55، يتدخل نيابةً عن جميع للمستخدمين عند اكتشاف هذا النمط السيئ المعروف من خلال تغيير طريقة document.write() تتم معالجتها في Chrome (راجِع حالة Chrome). ولن ينفِّذ Chrome على وجه التحديد عناصر <script> التي تم إدخالها عبر document.write() عند استيفاء جميع الشروط التالية:

  1. اتصال المستخدم بالإنترنت بطيء، لا سيما عند استخدام شبكة الجيل الثاني. (في المستقبل، ربما سيمتد التغيير ليشمل المستخدمين الآخرين عبر الاتصالات البطيئة، مثل بطء شبكة الجيل الثالث أو بطء Wi-Fi).
  2. document.write() وارد في مستند المستوى الأعلى. التدخل لا تنطبق على النصوص البرمجية Document.write داخل iframes لأنها لا تحظر عرض الصفحة الرئيسية.
  3. يمنع النص البرمجي في document.write() المحلل اللغوي. النصوص البرمجية مع async أو "defer" سيستمر تنفيذ السمات.
  4. عدم استضافة النص البرمجي على الموقع الإلكتروني نفسه. وبعبارة أخرى، سوف يحتاج Chrome عدم التدخّل في النصوص البرمجية التي تتضمّن eTLD+1 مطابِقًا (مثل نص برمجي مستضاف على تم إدراج js.example.org في www.example.org).
  5. النص البرمجي غير موجود فعلاً في ذاكرة التخزين المؤقت لبروتوكول HTTP للمتصفح. النصوص البرمجية في ذاكرة التخزين المؤقت لن يؤدي إلى أي تأخير في الشبكة وسيظل يتم تنفيذه.
  6. لا تتم إعادة تحميل الطلب الخاص بالصفحة. لن يتدخل Chrome إذا أجرى المستخدم إعادة تحميل وسينفذ الصفحة كالمعتاد.

تستخدم مقتطفات الجهات الخارجية أحيانًا document.write() لتحميل نصوص برمجية. لحسن الحظ، توفر معظم الجهات الخارجية بدائل التحميل غير المتزامن، والتي تسمح بتحميل النصوص البرمجية التابعة لجهات خارجية دون حظر عرض باقي محتوى الصفحة.

كيف أحل هذه المشكلة؟

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

إذا لم يكن موفّر الخدمة مدرجًا في القائمة وكان يتيح تحميل النص البرمجي غير المتزامن لذلك يُرجى إعلامنا بذلك وسنعدّل الصفحة لمساعدة جميع المستخدمين.

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

إذا قدم لك موفّر الخدمة مقتطفًا يتضمن document.write()، يمكنك إضافة السمة async إلى عنصر النص البرمجي، أو لإضافة عناصر النص البرمجي باستخدام واجهة برمجة تطبيقات DOM API مثل document.appendChild() أو parentNode.insertBefore().

كيفية اكتشاف تأثُّر موقعك الإلكتروني

هناك عدد كبير من المعايير التي تحدد ما إذا كان سيتم فرض التقييد، فكيف يمكنك معرفة ما إذا كنت متأثرًا؟

رصد ما إذا كان المستخدم يستخدم شبكة الجيل الثاني

لفهم التأثير المحتمل لهذا التغيير، يجب أولاً أن تفهم عدد المستخدمين الذين سيستخدمون شبكة الجيل الثاني يمكنك اكتشاف نوع الشبكة الحالي للمستخدم والسرعة باستخدام Network Information API التي متوفرة في Chrome ثم إرسال تنبيه إلى المقاييس التحليلية أو مقاييس المستخدم الحقيقية (RUM).

if(navigator.connection &&
    navigator.connection.type === 'cellular' &&
    navigator.connection.downlinkMax <= 0.115) {
    // Notify your service to indicate that you might be affected by this restriction.
}

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

منذ الإصدار 53 من Chrome، تُصدر "أدوات مطوري البرامج" تحذيرات بشأن مشاكل document.write() البيانات. على وجه التحديد، إذا كان طلب document.write() يستوفي المعايير من 2 إلى 5 (يتجاهل Chrome معايير الاتصال عند إرسال هذا التحذير)، فإن التحذير يبدو شيئًا مثل:

تحذير بشأن كتابة المستند

من الرائع ظهور تحذيرات في "أدوات مطوري البرامج في Chrome"، ولكن كيف يمكنك اكتشاف ذلك في المقياس؟ يمكنك التحقق من عناوين HTTP التي يتم إرسالها إلى الخادم عند التدخل.

التحقّق من عناوين HTTP في مورد النص البرمجي

عندما يتم حظر نص برمجي مدرَج عبر document.write، سيرسل Chrome الرأس التالي إلى المورد المطلوب:

Intervention: <https://shorturl/relevant/spec>;

عند العثور على نص برمجي مدرَج عبر document.write ويمكن حظره في في الظروف المختلفة، قد يرسل Chrome ما يلي:

Intervention: <https://shorturl/relevant/spec>; level="warning"

سيتم إرسال عنوان التدخل كجزء من طلب GET للنص البرمجي. (بشكل غير متزامن في حالة تدخل فعلي).

ما الذي يحمله المستقبل في جعبته؟

الخطة الأولية هي تنفيذ هذا التدخل عندما نكتشف المعايير تحقيقه. بدأنا بعرض تحذير فقط في Play Console في الإصدار 53 من Chrome. (تم استخدام الإصدار التجريبي في تموز (يوليو) 2016. نتوقع أن يكون الإصدار الثابت متاحًا لجميع المستخدمين في أيلول (سبتمبر) 2016.)

نتدخل لحظر النصوص البرمجية التي يتم إدخالها لمستخدمي شبكات الجيل الثاني مؤقتًا من Chrome 54، ومن المُقدّر أن يكون في إصدار ثابت لجميع المستخدمين في منتصف تشرين الأول (أكتوبر) 2016. ننصحك بالاطّلاع على إدخال حالة Chrome للحصول على المزيد من التحديثات.

بمرور الوقت، نحاول التدخل عندما يكون اتصال أي مستخدم بطيئًا (أي 3G أو WiFi بطيئة). اتّبِع إدخال حالة Chrome هذا.

هل يهمّك معرفة المزيد من المعلومات؟

لمزيد من المعلومات، يُرجى الاطّلاع على هذه المراجع الإضافية: