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

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

Marco Prontera

Gilberto Cocchi

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

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

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

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

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

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

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

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

كيفية قياس INP

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

تمامًا مثل زرّ قبول كلّ ملفات تعريف الارتباط، يُستخدَم زرّ رفض كلّ ملفات تعريف الارتباط أو تخصيص الإعدادات المفضّلة لملفات تعريف الارتباط سير العمل نفسه في بنية منصّة إدارة الموافقة 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 في تقليل TBT باستخدام تحسين جودة عرض الإعلانات

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

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

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

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

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

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

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

النتائج

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

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

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

الخاتمة

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

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

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