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

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

Marco Prontera

Gilberto Cocchi

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

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

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

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

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

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

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

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

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

النتائج

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

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

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

الخاتمة

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

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

نشكر بشكل خاص "لوكا كوبولا"، رئيس التكنولوجيا في PubTech، على دعمه لهذا العمل المبتكِر، ونشكر "جيريمي واغنر" و"ميكال مونكي" و"ريك فيسكومي" من Google.