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

كيف قلّلت منصّة PubConsent CMP من مقياس INP للعملاء بنسبة تصل إلى 64%، وذلك من خلال استخدام استراتيجية لتحقيق الأرباح تستخدم واجهات برمجة تطبيقات Scheduler في المتصفّح لحلّ مشاكل الاستجابة التي تم رصدها باستخدام "أدوات مطوري البرامج في Chrome".

Marco Prontera

Gilberto Cocchi

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

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

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

لماذا تهتم شركة PubTech بالأداء؟

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

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

نظرًا لأهمية الوظائف التي توفّرها منصّة إدارة الموافقة (CMP) وتأثيرها في الأداء، حدَّدت PubTech الأهداف التالية:

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

كيفية قياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)

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

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

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

الطريقة التي اتّبعتها شركة PubTech لتحسين INP في الأزرار والروابط

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

تولي مهام ذات أولوية عالية

تم تصميم طريقة 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

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

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

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

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

النتائج

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

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

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

الخلاصة

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

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

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