قصة نجاح "منصة إدارة الموافقة" من PubTech ' في تقليل INP على مواقع عملائها بنسبة تصل إلى 64% وتحسين إمكانية عرض الإعلانات بنسبة تصل إلى 1.5%

كيفية خفض منصّة إدارة الموافقة PubConsent لمعدّل INP لدى عملائها بنسبة تصل إلى% 64 باستخدام استراتيجية تحقيق الربح التي تستخدِم واجهات برمجة تطبيقات "جدولة المهام" للمتصفّح لحلّ مشاكل الاستجابة التي تم تحديدها باستخدام "أدوات مطوّري برامج Chrome"

Marco Prontera

Gilberto Cocchi

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

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

من خلال استخدام مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)، تمكّنت شركة PubTech من اكتشاف مشاكل في استجابة منصّة إدارة الموافقة. في هذه الدراسة الحالة، توضّح شركة PubTech كيفية حلّ المشاكل المتعلّقة بالاستجابة في منصّة إدارة الموافقة PubConsent، وكيفية تحسين مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" قبل أن يصبح أحد مؤشرات Core Web Vitals في آذار (مارس) 2024، ما يُظهر التزامًا ثابتًا بتقديم أفضل أداء ممكن في منتج إدارة الموافقة.

لماذا تهتم PubTech بالأداء؟

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

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

نظرًا لأهمية الوظائف التي يوفّرها منصّة إدارة الموافقة والتأثير الذي يمكن أن تحدثه في الأداء، وضعت PubTech الأهداف التالية:

1. الحدّ من تأثير منتج منصّة إدارة الموافقة PubConsent على INP
2. تقليل المهام الطويلة التي يمكن أن يُنسَب مصدرها إلى منتج منصّة إدارة الموافقة
3. تقليل إجمالي وقت الحظر (TBT)، ما قد يؤثر سلبًا في مدى استجابة الصفحة لتفاعلات المستخدم (INP)

كيفية قياس INP

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

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

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

كيف حسّنت PubTech مدى استجابة الصفحة لتفاعلات المستخدم (INP) للأزرار والروابط

لتحسين INP، تمّ اعتماد استراتيجيات مختلفة لتحقيق الأرباح في منصّة إدارة الموافقة PubConsent.

إنجاز المهام ذات الأولوية العالية

تم تصميم طريقة yieldToMainUiBlocking المعروضة في مقتطف الرمز التالي لتحسين مهام JavaScript ذات الأولوية العالية من خلال الحصول على scheduler.yield في حال توفّره، ولكن الرجوع إلى postTask مع أولوية user-blocking (عالية) في حال توفّر postTask، وأخيرًا امتنع عن تنفيذ أي إجراء.

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

function yieldToMainUiBlocking () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
};

العائد من المهام المتوسطة والمهام التي تعمل في الخلفية

يتم استخدام الطريقة yieldToMainBackground الموضحة في مقتطف الرمز التالي لتقسيم المهام الطويلة التي لها أولوية user-visible (متوسطة) أو background. ينفِّذ المنطق scheduler.yield() إذا كان متاحًا، ولكنه يختلف في استخدام postTask بأولوية متوسطة، وفي النهاية يعود إلى setTimeout على متصفّحات غير Chromium.

function yieldToMainBackground () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
};

كيف خفضت شركة PubTech وقت عرض الإعلانات بشكلٍ أكبر من خلال تحسين تصميم العرض

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

لمواجهة الزيادة في عمل العرض المطلوب لإزالة العناصر من DOM، تم تقديم حلّ أطلق عليه الفريق اسم "إيقاف عرض العناصر غير المرئيّة". تطبّق هذه الطريقة أولاً قاعدة display: none CSS على مربّع حوار طلب الموافقة في منصّة إدارة الموافقة بعد أن يمنح المستخدم موافقته على إخفائه. بعد ذلك، يتمّ نقل إزالة عقد DOM المرتبطة بمربّع حوار منصّة إدارة الموافقة إلى وقت لاحق عندما يكون المتصفّح في وضع السكون باستخدام requestIdleCallback. وقد أثبتت هذه الطريقة أنّها أسرع بكثير من إزالة عُقد DOM في الوقت الذي أغلق فيه المستخدم مربّع إفادة الموافقة.

كيفية خفض PubTech بشكلٍ أكبر من INP من خلال تحسين مكتبة إطار الشفافية والموافقة الصادر عن مكتب IAB

بعد حلّ معظم مشاكل استجابة منصّة إدارة الموافقة بنجاح، تمّ تحديد فرص إضافية للتحسين في إحدى التبعيات الرئيسية لها: مكتبة إطار الشفافية والموافقة الصادر عن مكتب IAB‏ (TCF).

كانت أكثر عناصر هذه المكتبة تكلفة من الناحية الحسابية هي "إنشاء سلاسل" و"الموافقة على الإرسال". تشكِّل هذه المكوّنات جزءًا لا يتجزأ من مكتبة إطار الشفافية والموافقة الصادر عن مكتب IAB. تم تطبيق التحسينات التالية على هذه المكوّنات في إصدار فرعي منفصل خصيصًا لتلبية احتياجات PubTech:

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

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

النتائج

بعد تطبيق الاستراتيجيات التي حقّقت نتائج جيدة في السابق وتحسينات تنسيق العرض الجديدة، تحسّنت نسبة INP في منصّة إدارة الموافقة بنسبة تصل إلى%65. نتيجةً لذلك، تحسّنت استجابة تجربة المستخدم في منصّة إدارة الموافقة PubConsent CMP بشكلٍ كبير، وبالنسبة إلى بعض الإعلانات، تحسّنت إمكانية المشاهدة بنسبة% 1.5 من خلال تحسين وقت طلب الإعلانات.

بالإضافة إلى هذه التحسينات، تبيّن في مكتبة إطار الشفافية والموافقة التابعة لاتحاد IAB أنّ INP تحسّنت بنسبة تصل إلى% 77 على الأجهزة الجوّالة للعملاء المتأثرين نتيجةً لخفض المهام الطويلة الناتجة عن إطار الشفافية والموافقة بنسبة تصل إلى %85. وقد ساعد ذلك في تقليل الوقت المستغرَق في تنفيذ كلّ طلب إعادة اتصال تابع لجهة خارجية خلال دورة حياة الصفحة بأكملها.

تحسَّن عدد المصادر التي اجتازت مقياس INP عند استخدام منصّة إدارة الموافقة (CMP) من PubConsent بنسبة 400%، وبارتفاع من 13% إلى 55% على الأجهزة الجوّالة. بالنسبة إلى بعض العملاء، انخفضت مدة عرض الإعلان على الصفحة بأكثر من النصف، من 470 ملي ثانية إلى 230 ملي ثانية، وذلك بسبب تحسينات حِزم تطوير البرامج (SDK) في PubTech التي تم إجراؤها.

الخاتمة

تمكّن عملاء PubTech من التعرّف سريعًا على أداء مقياس INP الإيجابي ونتائج مقاييس الأعمال بفضل جهود التحسين، كما يجري حاليًا النظر في إجراء المزيد من التحسينات على أداء "منصّة إدارة الموافقة" PubConsent، مع الاستفادة من بيانات "تتبُّع المستخدم الفعلي" (RUM) القيّمة. وتتتبّع هذه البيانات عن كثب كلّ من التراجعات والتقدّمات، ما يدفع جهود التحسين المستمر في PubTech.

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

نشكر "لوكا كوبولا"، رئيس قسم التكنولوجيا في شركة PubTech لدعم هذا الابتكار، ولـ "جيريمي فاغنر" و"ميكال موكني" و"ريك فيسكومي" من Google.